beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Final extra components

Browse source
This commit is contained in:
Angelos Chalaris 2016-09-14 13:19:26 +03:00
parent e0c4753315
commit c2901b67fb
6 changed files with 198 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -10,7 +10,7 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
- **nav**: navigation bar `GZIPPED SIZE`: 527 bytes
- **table**: table styles `GZIPPED SIZE`: 243 bytes
- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
- **utility**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
## Extra Components
@ -21,12 +21,9 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
- **progress**: progress bar styles `GZIPPED SIZE`: 193 bytes
- **carousel**: slideshow component `GZIPPED SIZE`: 383 bytes
- **utility**: classes for panels, button groups, popovers and more 'GZIPPED SIZE': 915 bytes
TODO:
- Components
- Utilities
- Button states and groups (mostly for style if impemented, not much more than that)
- Popovers
- Later down the line
- A *material-design* module and/or flavor could be added
- An alternative grid system using `flexbox` or `grid`

70
flavors/mini-default.css
View file

@ -1547,6 +1547,22 @@ input[type="radio"]:checked.acrd + label {
- [1] : This mixin uses `make-generic-container` to partially generate its
CSS.
*/
/*
Mixin for generic popover style.
Parameters:
- $popover-name : The name for the popover style
- $popover-direction : The direction of the popover. [1]
- $popover-border-radius : The border radius for the popover style.
- $popover-distance : The distance for the popover style's placement. [2]
- $popover-color : The text color of the popover style.
- $popover-bg-color : The background color of the popover style.
- $popover-padding : The padding of the popover.
Notes:
- [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value
is provided, it will be treated as 'bottom'.
- [2] : The value of $popover-distance should be treated as a general guideline for the popover
distance and is supposed to be tweaked with inline styles or helper classes for better use.
*/
/*
Mixin for generic button states.
Parameters:
@ -1690,6 +1706,60 @@ input[type="checkbox"]:checked.alert-red + div {
padding: 10px;
margin: 0; }
input[type="checkbox"].popover-top {
display: none; }
input[type="checkbox"].popover-top + label {
position: relative; }
input[type="checkbox"].popover-top + label > .popover-top {
position: absolute;
display: none;
background-color: #222;
color: #f5f5f5;
border-radius: 5px;
padding: 7px 10px;
z-index: 998;
width: auto;
bottom: 49px; }
input[type="checkbox"].popover-top + label > .popover-top:before {
position: absolute;
display: block;
border-top: 7px solid #222;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
bottom: -7px;
content: '';
left: 50%;
margin-left: -7px; }
input[type="checkbox"]:checked.popover-top + label > .popover-top {
display: block; }
input[type="checkbox"].popover-bottom {
display: none; }
input[type="checkbox"].popover-bottom + label {
position: relative; }
input[type="checkbox"].popover-bottom + label > .popover-bottom {
position: absolute;
display: none;
background-color: #222;
color: #f5f5f5;
border-radius: 4px;
padding: 7px 10px;
z-index: 998;
width: auto;
top: 49px; }
input[type="checkbox"].popover-bottom + label > .popover-bottom:before {
position: absolute;
display: block;
border-bottom: 7px solid #222;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
top: -7px;
content: '';
left: 50%;
margin-left: -7px; }
input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
display: block; }
.btn-grp .btn {
border: 1px solid #ccc;
margin: 0; }

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

File diff suppressed because one or more lines are too long

10
flavors/mini-default.scss
View file

@ -384,6 +384,8 @@ $panel-class-name: panel; // Name for the panel class
$panel-header-name: head; // Name for the panel's header class
$button-states-class-name: stateful; // Name for the stateful button class
$button-group-class-name: btn-grp; // Name for the button group class
$popover-above-name: popover-top; // Name for the popover above class
$popover-below-name: popover-bottom; // Name for the popover below class
// Utility color variables and styles (you can remove things you
// don't need or define more colors if you need them).
$well-color: $body-color; // Text color for the well
@ -392,6 +394,8 @@ $panel-color: $body-color; // Text color for the panel
$panel-bg-color: $body-bg-color; // Background color for the panel
$panel-header-color: $body-color; // Text color for the panel's header
$panel-header-bg-color: #e7e7e7; // Background color for the panel's header
$popover-color: $body-bg-color; // Text color for the popover
$popover-bg-color: $body-color; // Background color for the popover
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/utility';
// Use utilities mixins to create utilities with given specs. For more
@ -402,6 +406,8 @@ $panel-header-bg-color: #e7e7e7; // Background color for the panel's h
@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close);
@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close);
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px);
@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px);
@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px);
// Use experimental utilities mixins to create utilities with given
// specs. Please exercise caution when using these mixins.
//@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it.
@ -409,4 +415,6 @@ $panel-header-bg-color: #e7e7e7; // Background color for the panel's h
@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
//====================================================================
//====================================================================

48
scss/flavor.scss
View file

@ -371,4 +371,50 @@ $carousel-control-color: #fafafa; // Color for the carousel's control e
// Use carousel mixin to create carousel with given specs. For more
// information refer to the _carousel.scss file to check the definitions.
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
// TODO: Copy the stuff for utility
//====================================================================
// Variable definitions for the Utility module (_utility.scss)
//====================================================================
// Utility class names.
$breadcrumbs-class-name: brdcrmb; // Name for the breadcrumbs class
$well-class-name: well; // Name for the well class
$alert-style1-class: alert-blue; // Name for the style 1 alert
$alert-style2-class: alert-green; // Name for the style 2 alert
$alert-style3-class: alert-red; // Name for the style 3 alert
$panel-class-name: panel; // Name for the panel class
$panel-header-name: head; // Name for the panel's header class
$button-states-class-name: stateful; // Name for the stateful button class
$button-group-class-name: btn-grp; // Name for the button group class
$popover-above-name: popover-top; // Name for the popover above class
$popover-below-name: popover-bottom; // Name for the popover below class
// Utility color variables and styles (you can remove things you
// don't need or define more colors if you need them).
$well-color: $body-color; // Text color for the well
$well-bg-color: #e7e7e7; // Background color for the well
$panel-color: $body-color; // Text color for the panel
$panel-bg-color: $body-bg-color; // Background color for the panel
$panel-header-color: $body-color; // Text color for the panel's header
$panel-header-bg-color: #e7e7e7; // Background color for the panel's header
$popover-color: $body-bg-color; // Text color for the popover
$popover-bg-color: $body-color; // Background color for the popover
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
@import 'mini-extra/utility';
// Use utilities mixins to create utilities with given specs. For more
// information refer to the _utility.scss file to check the definitions.
@include make-breadcrumbs($breadcrumbs-class-name);
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px);
@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close);
@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close);
@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close);
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px);
@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px);
@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px);
// Use experimental utilities mixins to create utilities with given
// specs. Please exercise caution when using these mixins.
//@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it.
// The folowing mixin is considered stable, you can disable it if you need to.
@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px);
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
//====================================================================
//====================================================================

72
scss/mini-extra/_utility.scss
View file

@ -133,9 +133,75 @@
}
}
}
// TODO: Add popover mixin with directions etc.
/*
Mixin for generic popover style.
Parameters:
- $popover-name : The name for the popover style
- $popover-direction : The direction of the popover. [1]
- $popover-border-radius : The border radius for the popover style.
- $popover-distance : The distance for the popover style's placement. [2]
- $popover-color : The text color of the popover style.
- $popover-bg-color : The background color of the popover style.
- $popover-padding : The padding of the popover.
Notes:
- [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value
is provided, it will be treated as 'bottom'.
- [2] : The value of $popover-distance should be treated as a general guideline for the popover
distance and is supposed to be tweaked with inline styles or helper classes for better use.
*/
@mixin make-popover( $popover-name, $popover-direction, $popover-border-radius,
$popover-distance, $popover-color, $popover-bg-color, $popover-padding ){
input[type="checkbox"]{
&.#{$popover-name}{
display:none;
+ label{
position: relative;
}
+ label > .#{$popover-name}{
position: absolute;
display: none;
background-color: $popover-bg-color;
color: $popover-color;
border-radius: $popover-border-radius;
padding: $popover-padding;
z-index: 998;
width: auto;
@if $popover-direction == 'top'
{
bottom: 49px;
}
@else{
top: 49px;
}
&:before{
position: absolute;
display: block;
@if $popover-direction == 'top'
{
border-top: 7px solid $popover-bg-color;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
bottom: -7px;
}
@else{
border-bottom: 7px solid $popover-bg-color;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
top: -7px;
}
content: '';
left: 50%;
margin-left: -7px;
}
}
}
&:checked.#{$popover-name}{
+ label > .#{$popover-name}{
display: block;
}
}
}
}
//====================================================================
// THE MIXINS SPECIFIED BELOW ARE EXPERIMENTAL AND MIGHT NOT BEHAVE
// AS DOCUMENTED. EXERCISE CAUTION IF YOU USE THEM!