mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 14:26:28 +02:00
Code Issues Releases Wiki Activity

Extra components: collapses and accordions

Browse Source
This commit is contained in:
Angelos Chalaris
2016-09-08 10:55:22 +03:00
parent 2b50a2da14
commit 110f62a210
7 changed files with 240 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -18,11 +18,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
- **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
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
TODO:
- Components
- Collapse (checkbox based)
- Also accordion (radio based)
- Progress bar styles (maybe also spinners)
- Button groups (maybe)
- Button states (checkbox based)

2
docs/index.html
View File

@@ -155,8 +155,6 @@
<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>
</div>
</div>
</div>

80
flavors/mini-default.css
View File

@@ -1279,3 +1279,83 @@ img.thumb {
display: block;
font-size: 0.8em;
margin-left: 20px; }
/*
Mixin for collapse component.
Parameters:
- $collapse-name : The class name of the collapse component.
- $collapse-border : The border style of the collapse contents.
- $collapse-border-radius : The border radius of the collapse contents.
- $collapse-padding : The padding of the collapse contents.
- $collapse-margin-top : The margin above the collapse contents. [1]
- $collapse-color : The collapse contents' text color.
- $collapse-bg-color : The collapse contents' background color.
Notes:
- [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually
above the collapsed contents and the contents themselves.
*/
/*
Mixin for accordion component.
Parameters:
- $accordion-name : The class name of the accordion component.
- $accordion-border : The border style of the accordion component.
- $accordion-border-radius : The border radius of the accordion component. [1]
- $accordion-padding : The padding of the accordion's contents.
- $accordion-margin : The margin between accordion's parts. [2]
- $accordion-color : The accordion contents' text color.
- $accordion-bg-color : The accordion contents' background color.
- $accordion-label-color : The accordion labels' text color.
- $accordion-label-bg-color : The accordion labels' background color.
- $accordion-label-padding : The padding of the accordion's labels.
- $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3]
- $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier.
Notes:
- [1] : The value of $accordion-border-radius will be applied to labels along with their contents.
Closed labels will have the border-radius applied to all of their corners, while open labels will
change accordingly to combine their border with the shown contents.
- [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order
to space them out evenly. This does not apply to label and related content margins.
- [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
*/
input[type="checkbox"].clps {
display: none; }
input[type="checkbox"].clps + div {
display: none;
color: #222;
background-color: #eeeeee;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px; }
input[type="checkbox"]:checked.clps + div {
display: block; }
input[type="radio"].acrd {
display: none; }
input[type="radio"].acrd + label {
width: 100%;
display: block;
color: #222;
background-color: #eeeeee;
padding: 8px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer; }
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus {
background: #dbdbdb; }
input[type="radio"].acrd + label + div {
display: none;
color: #222;
background-color: #f5f5f5;
padding: 10px;
margin-top: -1px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 0 0 4px 4px; }
input[type="radio"]:checked.acrd + label {
border-radius: 4px 4px 0 0;
margin-bottom: 0; }
input[type="radio"]:checked.acrd + label + div {
display: block; }

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

File diff suppressed because one or more lines are too long

26
flavors/mini-default.scss
View File

@@ -307,4 +307,28 @@ $dropdown-class-name: dropdown; // Name for the modal class
@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);
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);
//====================================================================
// Variable definitions for the Collapse module (_collapse.scss)
//====================================================================
// Collapse and accordion class names.
$collapse-class-name: clps; // Name for the collapse class
$accordion-class-name: acrd; // Name for the accordion class
// Collapse colors and styles (you can remove things you don't need or
// define more colors if you need them).
$collapse-border: 1px solid #ccc; // Border style for the collapse
$collapse-color: $body-color; // Color for the text in the collapse
$collapse-bg-color: #eeeeee; // Background color for the collapse
// Accordion colors and styles (you can remove things you don't need or
// define more colors if you need them).
$accordion-border: $collapse-border; // Border style for the accordion
$accordion-color: $collapse-color; // Color for the text in the accordion
$accordion-bg-color: $body-bg-color; // Background color for the accordion
$accordion-label-color: $collapse-color; // Color for the text in the accordion's label
$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label
// Enable collapse (_collapse.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/collapse';
// Use collapse and accordion mixins to create components wit the given specs.
// For more information refer to the _collapse.scss file to check the definitions.
@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color);
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);

26
scss/flavor.scss
View File

@@ -307,4 +307,28 @@ $dropdown-class-name: dropdown; // Name for the modal class
@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);
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);
//====================================================================
// Variable definitions for the Collapse module (_collapse.scss)
//====================================================================
// Collapse and accordion class names.
$collapse-class-name: clps; // Name for the collapse class
$accordion-class-name: acrd; // Name for the accordion class
// Collapse colors and styles (you can remove things you don't need or
// define more colors if you need them).
$collapse-border: 1px solid #ccc; // Border style for the collapse
$collapse-color: $body-color; // Color for the text in the collapse
$collapse-bg-color: #eeeeee; // Background color for the collapse
// Accordion colors and styles (you can remove things you don't need or
// define more colors if you need them).
$accordion-border: $collapse-border; // Border style for the accordion
$accordion-color: $collapse-color; // Color for the text in the accordion
$accordion-bg-color: $body-bg-color; // Background color for the accordion
$accordion-label-color: $collapse-color; // Color for the text in the accordion's label
$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label
// Enable collapse (_collapse.scss). (Use individual mixins below to use.)
@import 'mini-extra/collapse';
// Use collapse and accordion mixins to create components wit the given specs.
// For more information refer to the _collapse.scss file to check the definitions.
@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color);
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);

108
scss/mini-extra/_collapse.scss Normal file
View File

@@ -0,0 +1,108 @@
/*
Mixin for collapse component.
Parameters:
- $collapse-name : The class name of the collapse component.
- $collapse-border : The border style of the collapse contents.
- $collapse-border-radius : The border radius of the collapse contents.
- $collapse-padding : The padding of the collapse contents.
- $collapse-margin-top : The margin above the collapse contents. [1]
- $collapse-color : The collapse contents' text color.
- $collapse-bg-color : The collapse contents' background color.
Notes:
- [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually
above the collapsed contents and the contents themselves.
*/
@mixin make-collapse( $collapse-name, $collapse-border, $collapse-border-radius, $collapse-padding,
$collapse-margin-top, $collapse-color, $collapse-bg-color ){
input[type="checkbox"]{
&.#{$collapse-name}{
display: none;
& + div{
display: none;
color: $collapse-color;
background-color: $collapse-bg-color;
padding: $collapse-padding;
margin-top: $collapse-margin-top;
border: $collapse-border;
border-radius: $collapse-border-radius;
}
}
&:checked.#{$collapse-name}{
& + div{
display: block;
}
}
}
}
/*
Mixin for accordion component.
Parameters:
- $accordion-name : The class name of the accordion component.
- $accordion-border : The border style of the accordion component.
- $accordion-border-radius : The border radius of the accordion component. [1]
- $accordion-padding : The padding of the accordion's contents.
- $accordion-margin : The margin between accordion's parts. [2]
- $accordion-color : The accordion contents' text color.
- $accordion-bg-color : The accordion contents' background color.
- $accordion-label-color : The accordion labels' text color.
- $accordion-label-bg-color : The accordion labels' background color.
- $accordion-label-padding : The padding of the accordion's labels.
- $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3]
- $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier.
Notes:
- [1] : The value of $accordion-border-radius will be applied to labels along with their contents.
Closed labels will have the border-radius applied to all of their corners, while open labels will
change accordingly to combine their border with the shown contents.
- [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order
to space them out evenly. This does not apply to label and related content margins.
- [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
*/
@mixin make-accordion( $accordion-name, $accordion-border, $accordion-border-radius, $accordion-padding,
$accordion-margin, $accordion-color, $accordion-bg-color, $accordion-label-color,
$accordion-label-bg-color, $accordion-label-padding, $accordion-hover-style,
$accordion-hover-style-percentage ){
input[type="radio"]{
&.#{$accordion-name}{
display: none;
& + label{
width: 100%;
display: block;
color: $accordion-label-color;
background-color: $accordion-label-bg-color;
padding: $accordion-label-padding;
margin-bottom: $accordion-margin;
border: $accordion-border;
border-radius: $accordion-border-radius;
cursor: pointer;
&:hover, &:active, &:focus{
@if $accordion-hover-style == 'lighten'{
background: lighten($accordion-label-bg-color, $accordion-hover-style-percentage);
}
@else{
background: darken($accordion-label-bg-color, $accordion-hover-style-percentage);
}
}
& + div{
display: none;
color: $accordion-color;
background-color: $accordion-bg-color;
padding: $accordion-padding;
margin-top: -1px;
margin-bottom: $accordion-margin;
border: $accordion-border;
border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
}
}
}
&:checked.#{$accordion-name}{
& + label{
border-radius: $accordion-border-radius $accordion-border-radius 0 0;
margin-bottom: 0;
& + div{
display: block;
}
}
}
}
}