Selaa lähdekoodia

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

soyjavi 14 vuotta sitten
vanhempi
commit
1b04c48c3f

+ 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);
 }