Extra component: Dropdown

README.md

@@ -17,10 +17,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
 - **label**: label and badge styles `GZIPPED SIZE`: 208 bytes
 - **tab**: tabbed navigation `GZIPPED SIZE`: 347 bytes
 - **modal**: modal dialog prompts `GZIPPED SIZE`: 298 bytes
+- **dropdown**: dropdown menu for the navigation bar `GZIPPED SIZE`: 136 bytes
 
 TODO:
 - Components
-  - Dropdowns (possibly checkbox-hack)
   - Collapse (checkbox based)
     - Also accordion (radio based)
   - Progress bar styles (maybe also spinners)

docs/index.html

@@ -24,22 +24,7 @@
       </ul>
     </div>
     <label for="nav-toggle"></label>
-    <br>
+    <br>      
-
-    <input type="checkbox" id="modal-toggle" class="modal">
-          <div>
-          <label for="modal-toggle"></label>
-            <div>
-              <h3>Modal title</h3><label for="modal-toggle"><span class="close" ></span></label>
-              <hr>
-              <p> Lorem ipsum etc.</p>
-              <hr>
-              <label for="modal-toggle" class="btn blue">Close modal</label>
-            </div>
-
-          </div>
-          
-
     <div class="grid-container">
       <div class="row">
         <div class="col xs-no md-1"></div>
@@ -169,7 +154,6 @@
           <h2 id="extra-modules">Extra modules</h2><hr>
           <p>Coming soon! <small>In the meantime, why don't you check out the framework's <a href="https://github.com/Chalarangelo/mini.css">Github page</a>?</small></p>
 
-          <label for="modal-toggle" class="btn blue">Open modal</label>
 
           
 

flavors/mini-default.css

@@ -811,7 +811,7 @@ textarea {
       display: inline-block;
       margin: 0;
       white-space: nowrap; }
-      .nav ul li * {
+      .nav ul li > * {
         display: inline-block;
         padding: 8px;
         color: #ddd;
@@ -826,7 +826,7 @@ textarea {
     display: block; }
     .nav.vertical ul li {
       display: block; }
-      .nav.vertical ul li * {
+      .nav.vertical ul li > * {
         width: 100%;
         padding: 8px 0; }
   .nav.fixed {
@@ -1253,3 +1253,29 @@ img.thumb {
   position: absolute;
   top: 20px;
   right: 20px; }
+
+/*
+	Mixin for navigation bar's dropdown element.
+	Parameters:
+	- $nav-name             :	The class name for the navigation bar. [1]
+	- $nav-link-name        :	The class name for the navigation links of the navigation bar. [1]
+	- $dropdown-name        :	The class name for the dropdown element. [2]
+	- $dropdown-left-margin :	The left margin of the dropdown element's contents. [3]
+	- $dropdown-font-size   :	The font size of the dropdown element's contents.
+	Notes:
+	- [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's
+		definition, otherwise the dropdown element will not work properly.
+	- [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the
+		checkbox and the dropdown toggle.
+	- [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown
+		menus on mobile screens. It is suggested that you set this value to something different than
+		0 to visually represent the menu hierarchy in devices with smaller screens.
+*/
+.nav .link.dropdown {
+  cursor: pointer; }
+.nav input[type="checkbox"].dropdown + div {
+  display: none; }
+.nav input[type="checkbox"]:checked.dropdown + div {
+  display: block;
+  font-size: 0.8em;
+  margin-left: 20px; }

flavors/mini-default.scss

@@ -297,4 +297,14 @@ $modal-border:								1px solid #ccc;						// Border style for the modal
 // Use modal mixin to create modal with given specs. For more information
 // refer to the _modal.scss file to check the definitions.
 @include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
-@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
+@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
+//====================================================================
+//	Variable definitions for the Dropdown module (_dropdown.scss)
+//====================================================================
+//	Dropdown class names.
+$dropdown-class-name:						dropdown;							// Name for the modal class
+//	Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
+@import '../scss/mini-extra/dropdown';
+// Use dropdown mixin to create dropdown with given specs. For more information
+// refer to the _dropdown.scss file to check the definitions.
+@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);

scss/flavor.scss

@@ -297,4 +297,14 @@ $modal-border:								1px solid #ccc;						// Border style for the modal
 // Use modal mixin to create modal with given specs. For more information
 // refer to the _modal.scss file to check the definitions.
 @include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
-@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
+@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
+//====================================================================
+//	Variable definitions for the Dropdown module (_dropdown.scss)
+//====================================================================
+//	Dropdown class names.
+$dropdown-class-name:						dropdown;							// Name for the modal class
+//	Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
+@import 'mini-extra/dropdown';
+// Use dropdown mixin to create dropdown with given specs. For more information
+// refer to the _dropdown.scss file to check the definitions.
+@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);

scss/mini-extra/_dropdown.scss

@@ -0,0 +1,36 @@
+/*
+	Mixin for navigation bar's dropdown element.
+	Parameters:
+	- $nav-name             :	The class name for the navigation bar. [1]
+	- $nav-link-name        :	The class name for the navigation links of the navigation bar. [1]
+	- $dropdown-name        :	The class name for the dropdown element. [2]
+	- $dropdown-left-margin :	The left margin of the dropdown element's contents. [3]
+	- $dropdown-font-size   :	The font size of the dropdown element's contents.
+	Notes:
+	- [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's
+		definition, otherwise the dropdown element will not work properly.
+	- [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the
+		checkbox and the dropdown toggle.
+	- [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown
+		menus on mobile screens. It is suggested that you set this value to something different than
+		0 to visually represent the menu hierarchy in devices with smaller screens.
+*/
+@mixin make-dropdown($nav-name, $nav-link-name, $dropdown-name, $dropdown-left-margin, $dropdown-font-size){
+	.#{$nav-name}{
+		& .#{$nav-link-name}.#{$dropdown-name}{
+			cursor: pointer;
+		}
+		& input[type="checkbox"]{
+			&.#{$dropdown-name} + div{
+				display: none;
+			}
+			&:checked.#{$dropdown-name}{
+				+ div{
+					display: block;
+					font-size: $dropdown-font-size;
+					margin-left: $dropdown-left-margin;
+				}
+			}
+		}
+	}
+}

scss/mini/_nav.scss

@@ -65,7 +65,7 @@
 				display: inline-block;		
 				margin: 0;
 				white-space: nowrap;
-				* {
+				> * {
 					display: inline-block;
 					padding: #{$nav-padding};
 					color: #{$nav-color};
@@ -93,7 +93,7 @@
 				display: block;
 				li{
 					display: block;					
-					* {
+					> * {
 						width: 100%;
 						padding: #{$nav-padding} 0;
 					}