_form.scss in materialize-sass-0.97.2

- old
+ new

@@ -168,14 +168,11 @@
       width: calc(100% - 3rem);
     }
   }
 }
 
-
 // Search Field
-
-
 .input-field input[type=search] {
   display: block;
   line-height: inherit;
   padding-left: 4rem;
   width: calc(100% - 4rem);
@@ -222,11 +219,10 @@
     resize: none;
     min-height: 3rem;
   }
 }
 
-
 // For textarea autoresize
 .hiddendiv {
   display: none;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -275,11 +271,10 @@
   height: 16px;
   z-index: 0;
   @include transition(.28s ease);
 }
 
-
 /* Unchecked styles */
 [type="radio"]:not(:checked) + label:before {
   border-radius: 50%;
   border: 2px solid $radio-empty-color;
 }
@@ -341,11 +336,10 @@
 [type="radio"]:disabled:checked + label:after {
   background-color: $input-disabled-color;
   border-color: $input-disabled-solid-color;
 }
 
-
 /***************
    Checkboxes
 ***************/
 
 /* CUSTOM CSS CHECKBOXES */
@@ -363,11 +357,10 @@
   position: absolute;
   left: -9999px;
   visibility: hidden;
 }
 
-
 // Checkbox Styles
 [type="checkbox"] {
 
   // Text Label Style
   + label {
@@ -402,11 +395,10 @@
 
   &:not(:checked):disabled + label:before {
     border: none;
     background-color: $input-disabled-color;
   }
-
 }
 
 [type="checkbox"]:checked {
   + label:before {
     top: -4px;
@@ -423,11 +415,10 @@
 
   &:disabled + label:before {
     border-right: 2px solid $input-disabled-color;
     border-bottom: 2px solid $input-disabled-color;
   }
-
 }
 
 /* Indeterminate checkbox */
 [type="checkbox"]:indeterminate {
   +label:before {
@@ -448,11 +439,10 @@
     border-right: 2px solid $input-disabled-color;
     background-color: transparent;
   }
 }
 
-
 // Filled in Style
 [type="checkbox"].filled-in {
   // General
   + label:after {
     border-radius: 2px;
@@ -464,10 +454,11 @@
     position: absolute;
     /* .1s delay is for check animation */
     transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
     z-index: 1;
   }
+
   // Unchecked style
   &:not(:checked) + label:before {
     width: 0;
      height: 0;
      border: 3px solid transparent;
@@ -477,18 +468,20 @@
      -webkit-transform: rotateZ(37deg);
              transform: rotateZ(37deg);
      -webkit-transform-origin: 20% 40%;
              transform-origin: 100% 100%;
   }
+
   &:not(:checked) + label:after {
     height: 20px;
     width: 20px;
     background-color: transparent;
     border: 2px solid $radio-empty-color;
     top: 0px;
     z-index: 0;
   }
+
   // Checked style
   &:checked {
     + label:before {
       top: 0;
       left: 1px;
@@ -502,10 +495,11 @@
       transform: rotateZ(37deg);
 
       -webkit-transform-origin: 100% 100%;
       transform-origin: 100% 100%;
     }
+
     + label:after {
       top: 0px;
       width: 20px;
       height: 20px;
       border: 2px solid $secondary-color;
@@ -513,27 +507,27 @@
       z-index: 0;
     }
   }
   // Disabled style
   &:disabled:not(:checked) + label:before {
-
     background-color: transparent;
     border: 2px solid transparent;
   }
+
   &:disabled:not(:checked) + label:after {
     border-color: transparent;
     background-color: $input-disabled-solid-color;
   }
+
   &:disabled:checked + label:before {
     background-color: transparent;
-
   }
+
   &:disabled:checked + label:after {
     background-color: $input-disabled-solid-color;
     border-color: $input-disabled-solid-color;
   }
-
 }
 
 /***************
      Switch
 ***************/
@@ -542,24 +536,29 @@
     -webkit-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -ms-user-select: none;
 }
+
 .switch label {
     cursor: pointer;
 }
+
 .switch label input[type=checkbox]{
     opacity: 0;
     width: 0;
     height: 0;
 }
+
 .switch label input[type=checkbox]:checked + .lever {
     background-color: $switch-checked-lever-bg;
 }
+
 .switch label input[type=checkbox]:checked + .lever:after {
     background-color: $switch-bg-color;
 }
+
 .switch label .lever {
     content: "";
     display: inline-block;
     position: relative;
     width: 40px;
@@ -569,10 +568,11 @@
     margin-right: 10px;
     transition: background 0.3s ease;
     vertical-align: middle;
     margin: 0 16px;
 }
+
 .switch label .lever:after {
     content: "";
     position: absolute;
     display: inline-block;
     width: 21px;
@@ -582,38 +582,36 @@
     box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
     left: -5px;
     top: -3px;
     transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
 }
+
 // Switch active style
 input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
        box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
 }
+
 input[type=checkbox]:not(:disabled) ~ .lever:active:after {
        box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
 }
+
 .switch label input[type=checkbox]:checked + .lever:after {
     left: 24px;
 }
 
 // Disabled Styles
-
 .switch input[type=checkbox][disabled] + .lever{
   cursor: default;
 }
 .switch label input[type=checkbox][disabled] + .lever:after,
 .switch label input[type=checkbox][disabled]:checked + .lever:after {
     background-color: $input-disabled-solid-color;
 }
 
-
-
-
 /***************
   Select Field
 ***************/
-
 .select-label {
   position: absolute;
 }
 
 .select-wrapper {
@@ -633,62 +631,95 @@
     font-size: 1rem;
     margin: 0 0 15px 0;
     padding: 0;
     display: block;
   }
+
   span.caret {
     color: initial;
     position: absolute;
     right: 0;
     top: 16px;
     font-size: 10px;
     &.disabled {
       color: $input-disabled-color;
     }
   }
+
   & + label {
     position: absolute;
     top: -14px;
     font-size: $label-font-size;
   }
 }
 
 select { display: none; }
 select.browser-default { display: block; }
 
-
 // Disabled styles
 select:disabled {
   color: rgba(0,0,0,.3);
 }
+
 .select-wrapper input.select-dropdown:disabled {
   color: rgba(0,0,0,.3);
   cursor: default;
   -webkit-user-select: none; /* webkit (safari, chrome) browsers */
   -moz-user-select: none; /* mozilla browsers */
   -ms-user-select: none; /* IE10+ */
   border-bottom: 1px solid rgba(0,0,0,.3);
 }
+
 .select-wrapper i {
   color: rgba(0,0,0,.3);
 }
-.select-dropdown li.disabled {
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
   color: rgba(0,0,0,.3);
   background-color: transparent;
 }
 
+// Icons
+.select-dropdown li {
+  img {
+    height: $dropdown-item-height - 10;
+    width: $dropdown-item-height - 10;
+    margin: 5px 15px;
+    float: right;
+  }
+}
 
+// Optgroup styles
+.select-dropdown li.optgroup {
+  border-top: 1px solid $dropdown-hover-bg-color;
+
+  &.selected > span {
+    color: rgba(0,0,0, .7);
+  }
+
+  & > span {
+    color: rgba(0,0,0, .4);
+  }
+
+  & ~ li:not(.optgroup) {
+    padding-left: 1rem;
+  }
+}
+
 /*********************
       File Input
 **********************/
 .file-field {
   position: relative;
 
   .file-path-wrapper {
     overflow: hidden;
     padding-left: 10px;
   }
+
   input.file-path { width: 100%; }
 
   .btn {
     float: left;
     height: 3rem;
@@ -713,12 +744,10 @@
     opacity: 0;
     filter: alpha(opacity=0);
   }
 }
 
-
-
 /***************
       Range
 ***************/
 
 .range-field {
@@ -776,12 +805,10 @@
 
 input[type=range]:focus {
   outline: none;
 }
 
-
-
 // WebKit
 input[type=range]{
   -webkit-appearance: none;
 }
 
@@ -852,37 +879,41 @@
   border-width: 6px 0;
 
   /*remove default tick marks*/
   color: transparent;
 }
+
 input[type=range]::-ms-fill-lower {
   background: #777;
 }
+
 input[type=range]::-ms-fill-upper {
   background: #ddd;
 }
+
 input[type=range]::-ms-thumb {
   border: none;
   height: 14px;
   width: 14px;
   border-radius: 50%;
   background: $radio-fill-color;
 }
+
 input[type=range]:focus::-ms-fill-lower {
   background: #888;
 }
+
 input[type=range]:focus::-ms-fill-upper {
   background: #ccc;
 }
 
 /***************************
    Text Inputs + Textarea
 ****************************/
-
 select {
    background-color: rgba(255, 255, 255, 0.90);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
-   }
+}
\ No newline at end of file