홈 탐색 도움말
로그인
pwa
/
Lungo.js
의 미러 https://github.com/tapquo/Lungo.js.git
2
0
포크 0
파일 이슈 0 위키
소스 검색

[BUG] Fixed: Incorrect box-shadow for nav.right

soyjavi 14 년 전
부모
0bc9cb356c
커밋
e6118151ef
3개의 변경된 파일과 23개의 추가작업 그리고 15개의 파일을 삭제
분할 보기 변경상태 보기
  1. 4 2
      examples/test/boletus.html
  2. 10 5
      src/stylesheets/Lungo.theme.scaffold.less
  3. 9 8
      src/stylesheets/css/Lungo.theme.scaffold.css

+ 4 - 2
examples/test/boletus.html
파일 보기 

@@ -43,7 +43,7 @@
 
 </head>
 
 
 <body class="app">
 
-
 
+<!--
 
     <section id="login" data-transition="slide">
 
         <article class="-indented splash ">
 
 
@@ -60,12 +60,14 @@
 
             <div class="copyright">This App is made by TAPQUO</div>
 
         </article>
 
     </section>
 
+ -->
 
 
     <section id="main" data-transition="slide">
 
         <header data-title="main" data-back="home">
 
 
             <nav class="left">
 
-                <a href="#" class="empty" data-icon="left" data-label="Volver"></a>
 
+                <a href="#" class="empty cancel " data-icon="close" ></a>
 
+                <a href="#" class="empty accept" data-icon="menu" ></a>
 
             </nav>
 
 
             <nav class="right">

+ 10 - 5
src/stylesheets/Lungo.theme.scaffold.less
파일 보기 

@@ -58,19 +58,24 @@ article {
 
 
 /* @group <nav> */
 
 header nav {
 
-    & a {
 
-        color: @white;
 
-    }
 
+    & a { color: @white; }
 
 
     &:not(.plain) {
 
         & a {
 
             .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)");
 
             &.accept { background: rgba(0, 255, 0, 0.4); }
 
             &.cancel { background: rgba(255, 0, 0, 0.4); }
 
+
 
+            &:active {
 
+                &.accept { background: rgba(0, 255, 0, 0.2); }
 
+                &.cancel { background: rgba(255, 0, 0, 0.2); }
 
+                &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.25); }
 
+            }
 
         }
 
-        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
 
 
-        & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
 
+        &.right a {
 
+            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
 
+        }
 
     }
 
 
     &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }

+ 9 - 8
src/stylesheets/css/Lungo.theme.scaffold.css
파일 보기 

@@ -54,6 +54,15 @@ header nav:not(.plain) a.accept {
 
 header nav:not(.plain) a.cancel {
 
   background: rgba(255, 0, 0, 0.4);
 
 }
 
+header nav:not(.plain) a:active.accept {
 
+  background: rgba(0, 255, 0, 0.2);
 
+}
 
+header nav:not(.plain) a:active.cancel {
 
+  background: rgba(255, 0, 0, 0.2);
 
+}
 
+header nav:not(.plain) a:active:not(.accept):not(.cancel) {
 
+  background: rgba(0, 0, 0, 0.25);
 
+}
 
 header nav:not(.plain).right a {
 
   -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 
@@ -62,14 +71,6 @@ header nav:not(.plain).right a {
 
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 
   box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 
 }
 
-header nav:not(.plain) a:active {
 
-  -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-  -moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-  box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-  -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-  -moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-  box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
 
-}
 
 header nav.plain a:active {
 
   text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
 
 }