making some sideNav styles less specific

Dogfalo · Oct 29, 2016 · a0f67c2 · a0f67c2
1 parent 696bfc4
commit a0f67c2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -6995,22 +6995,22 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .side-nav .userView {
-  overflow: hidden;
   position: relative;
   padding: 32px 32px 0;
   margin-bottom: 8px;
 }
 
-.side-nav .userView a {
+.side-nav .userView > a {
   height: auto;
   padding: 0;
 }
 
-.side-nav .userView a:hover {
+.side-nav .userView > a:hover {
   background-color: transparent;
 }
 
 .side-nav .userView .background {
+  overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
@@ -7052,12 +7052,6 @@ input[type=range]:focus::-ms-fill-upper {
   z-index: 998;
 }
 
-.side-nav.fixed a {
-  display: block;
-  padding: 0 16px;
-  color: rgba(0, 0, 0, 0.87);
-}
-
 .side-nav.fixed {
   left: 0;
   -webkit-transform: translateX(0);

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
diff --git a/jade/page-contents/sideNav_content.html b/jade/page-contents/sideNav_content.html
@@ -11,7 +11,9 @@ <h4>Introduction</h4>
 
         <ul id="slide-out" class="side-nav">
           <li><div class="userView">
-            <img class="background" src="images/office.jpg">
+            <div class="background">
+              <img src="images/office.jpg">
+            </div>
             <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
             <a href="#!name"><span class="white-text name">John Doe</span></a>
             <a href="#!email"><span class="white-text email">[email protected]</span></a>
@@ -27,7 +29,9 @@ <h4>HTML Structure</h4>
         <pre><code class="language-markup col s12">
   &lt;ul id="slide-out" class="side-nav">
     &lt;li>&lt;div class="userView">
-      &lt;img class="background" src="images/office.jpg">
+      &lt;div class="background">
+        &lt;img src="images/office.jpg">
+      &lt;/div>
       &lt;a href="#!user">&lt;img class="circle" src="images/yuna.jpg">&lt;/a>
       &lt;a href="#!name">&lt;span class="white-text name">John Doe&lt;/span>&lt;/a>
       &lt;a href="#!email">&lt;span class="white-text email">[email protected]&lt;/span>&lt;/a>

diff --git a/sass/components/_sideNav.scss b/sass/components/_sideNav.scss
@@ -92,18 +92,18 @@
   }
 
   .userView {
-    overflow: hidden;
     position: relative;
     padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
     margin-bottom: $sidenav-padding / 2;
 
-    a {
+    & > a {
       &:hover { background-color: transparent; }
       height: auto;
       padding: 0;
     }
 
     .background {
+      overflow: hidden;
       position: absolute;
       top: 0;
       right: 0;
@@ -150,16 +150,6 @@
 }
 
 
-// Hidden side-nav for all sizes
-.side-nav.fixed {
-  a {
-    display: block;
-    padding: 0 $sidenav-padding;
-    color: $sidenav-font-color;
-  }
-}
-
-
 // Fixed side-nav shown
 .side-nav.fixed {
   left: 0;

diff --git a/side-nav.html b/side-nav.html
@@ -122,7 +122,9 @@ <h4>Introduction</h4>
 
         <ul id="slide-out" class="side-nav">
           <li><div class="userView">
-            <img class="background" src="images/office.jpg">
+            <div class="background">
+              <img src="images/office.jpg">
+            </div>
             <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
             <a href="#!name"><span class="white-text name">John Doe</span></a>
             <a href="#!email"><span class="white-text email">[email protected]</span></a>
@@ -138,7 +140,9 @@ <h4>HTML Structure</h4>
         <pre><code class="language-markup col s12">
   &lt;ul id="slide-out" class="side-nav">
     &lt;li>&lt;div class="userView">
-      &lt;img class="background" src="images/office.jpg">
+      &lt;div class="background">
+        &lt;img src="images/office.jpg">
+      &lt;/div>
       &lt;a href="#!user">&lt;img class="circle" src="images/yuna.jpg">&lt;/a>
       &lt;a href="#!name">&lt;span class="white-text name">John Doe&lt;/span>&lt;/a>
       &lt;a href="#!email">&lt;span class="white-text email">[email protected]&lt;/span>&lt;/a>