mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 19:10:25 +02:00
Code Issues Releases Wiki Activity

Extra component: Dropdown

Browse Source
This commit is contained in:
Angelos Chalaris
2016-09-07 13:06:46 +03:00
parent 40da09731a
commit 2b50a2da14
8 changed files with 91 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -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)

18
docs/index.html
View File

@@ -24,22 +24,7 @@
</ul>
</div>
<label for="nav-toggle"></label>
<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>
<br>
<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>

30
flavors/mini-default.css
View File

@@ -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; }

2
flavors/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
flavors/mini-default.scss
View File

@@ -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);

12
scss/flavor.scss
View File

@@ -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);

36
scss/mini-extra/_dropdown.scss Normal file
View File

@@ -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;
}
}
}
}
}

4
scss/mini/_nav.scss
View File

@@ -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;
}