Update Dropdown component

audi · Mar 22, 2017 · 7882177 · 7882177
1 parent ad4545e
commit 7882177
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 20 deletions.
diff --git a/dist/audi-ui.css b/dist/audi-ui.css
@@ -944,8 +944,8 @@ body::before {
     font-weight: 400; }
   .aui-dropdown__list-title {
     color: rgba(0, 0, 0, 0.2);
-    padding-top: 0.5rem;
-    padding-bottom: 0.25rem; }
+    padding-top: 0.75rem;
+    padding-bottom: 0; }
   .aui-dropdown__option {
     position: relative;
     width: 100%;

diff --git a/dist/audi-ui.min.css b/dist/audi-ui.min.css
diff --git a/src/dropdown/_dropdown.scss b/src/dropdown/_dropdown.scss
@@ -159,8 +159,8 @@ $aui-dropdown-option-hover-background: rgba(#000, 0.10) !default;
 
   &__list-title {
     color: $aui-dropdown-list-title-color;
-    padding-top: unit(2);
-    padding-bottom: unit(1);
+    padding-top: unit(3);
+    padding-bottom: 0;
   }
 
   &__option {

diff --git a/src/dropdown/snippets/dropdown-multiple.html b/src/dropdown/snippets/dropdown-multiple.html
@@ -42,20 +42,25 @@
           </ul>
         </li>
         <li class="aui-dropdown__list-item aui-dropdown__list-item--animate">
-          <div class="aui-dropdown__option" data-title="A3">
-            <label class="aui-checkbox aui-js-checkbox aui-checkbox--dropdown-option">
-              <input class="aui-checkbox__input" type="checkbox">
-              <span class="aui-checkbox__label">A3</span>
-            </label>
-          </div>
-        </li>
-        <li class="aui-dropdown__list-item aui-dropdown__list-item--animate">
-          <div class="aui-dropdown__option" data-title="A4">
-            <label class="aui-checkbox aui-js-checkbox aui-checkbox--dropdown-option">
-              <input class="aui-checkbox__input" type="checkbox">
-              <span class="aui-checkbox__label">A4</span>
-            </label>
-          </div>
+          <span class="aui-dropdown__list-title">A3</span>
+          <ul class="aui-dropdown__list">
+            <li class="aui-dropdown__list-item">
+              <div class="aui-dropdown__option" data-title="A1">
+                <label class="aui-checkbox aui-js-checkbox aui-checkbox--dropdown-option">
+                  <input class="aui-checkbox__input" type="checkbox">
+                  <span class="aui-checkbox__label">A3</span>
+                </label>
+              </div>
+            </li>
+            <li class="aui-dropdown__list-item">
+              <div class="aui-dropdown__option" data-title="A1 Sportsback">
+                <label class="aui-checkbox aui-js-checkbox aui-checkbox--dropdown-option">
+                  <input class="aui-checkbox__input" type="checkbox">
+                  <span class="aui-checkbox__label">A3 Sportsback</span>
+                </label>
+              </div>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>

diff --git a/src/dropdown/snippets/dropdown.html b/src/dropdown/snippets/dropdown.html
@@ -23,11 +23,22 @@
           </ul>
         </li>
         <li class="aui-dropdown__list-item aui-dropdown__list-item--animate">
-          <button type="button" class="aui-dropdown__option" data-title="A3">A3</button>
+          <span class="aui-dropdown__list-title">A3</span>
+          <ul class="aui-dropdown__list">
+            <li class="aui-dropdown__list-item">
+              <button type="button" class="aui-dropdown__option" data-title="A3">A3</button>
+            </li>
+            <li class="aui-dropdown__list-item">
+              <button type="button" class="aui-dropdown__option" data-title="A3 Sportsback">A3 Sportsback</button>
+            </li>
+          </ul>
         </li>
         <li class="aui-dropdown__list-item aui-dropdown__list-item--animate">
           <button type="button" class="aui-dropdown__option" data-title="A4">A4</button>
         </li>
+        <li class="aui-dropdown__list-item aui-dropdown__list-item--animate">
+          <button type="button" class="aui-dropdown__option" data-title="A5">A5</button>
+        </li>
       </ul>
     </div>
   </div>