mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-13 17:33:59 +02:00
Code Issues Releases Wiki Activity

Housekeeping for utility module

Browse Source 
Split file, added hidden flags, cleanup and addition of maintainers in flavor files. Codebase cleanup is now considered mostly complete. New features, changes and code safeguards will be implemented in the next few commits.
This commit is contained in:
Angelos Chalaris
2017-03-30 17:44:16 +03:00
parent cb1ceb37a5
commit 874c57f802
7 changed files with 271 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mini-default.css vendored
View File

@@ -2,7 +2,7 @@
/* /*
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.0 (Fermion) mini.css version: v2.1.1 (Fermion)
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

3
dist/mini-sucroa.css vendored
View File

@@ -2,7 +2,8 @@
/* /*
Flavor name: Sucroa (mini-sucroa) Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis Author: Angeliki Daskalakis
mini.css version: v2.1.0 (Fermion) Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.1 (Fermion)
*/ */
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext"); @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/* /*

2
docs/v2/DEVLOG.md
View File

@@ -908,3 +908,5 @@
- Flavor cleanup for `contextual` module. - Flavor cleanup for `contextual` module.
- Updated `progress`, splitting file and adding **hidden flag** `$include-spinner-donut` for toggling spinning donuts on and off. Added `@error` messages accordingly. - Updated `progress`, splitting file and adding **hidden flag** `$include-spinner-donut` for toggling spinning donuts on and off. Added `@error` messages accordingly.
- Flavor cleanup for `progress` module's updates. - Flavor cleanup for `progress` module's updates.
- Updated `utility` module, added proper **hidden flags** to `$include-breadcrumbs` and `$include-close-icon` to make it easier to disable those components.
- Cleanup in both flavor files is now complete, added maintainers to the `mini-sucroa` file to meake it easier for people to reach the team behind it.

81
src/flavors/mini-default.scss
View File

@@ -4,7 +4,7 @@
/* /*
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.0 (Fermion) mini.css version: v2.1.1 (Fermion)
*/ */
// Basic rules for body and typography // Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color $fore-color: #212121; // Text and general foreground color
@@ -484,57 +484,52 @@ $spinner-donut-style1-name: 'large'; // Class name for donut spinner styl
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1 $spinner-donut-style1-size: 32px; // Size for donut spinner style 1
$spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1 $spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
// Variables for utilities and helper classes // Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements $visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs $breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs $breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
$breadcrumbs-height: 32px; // Height of the breadcrumbs $breadcrumbs-height: 32px; // Height of the breadcrumbs
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator $breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
$breadcrumbs-border-style: 0; // Border style for breadcrumbs $breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs $breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs $breadcrumbs-box-shadow: // Box shadow for breadcrumbs
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15); 0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
$close-icon-name: 'close'; // Class name for close icon $close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 32px; // Size of the close icon $close-icon-size: 32px; // Size of the close icon
$close-icon-back-color: #e0e0e0; // Background color for the close icon $close-icon-back-color: #e0e0e0; // Background color for the close icon
$close-icon-fore-color: #212121; // Foreground color for the close icon $close-icon-fore-color: #212121; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style $border-generic-name: 'bordered'; // Class name for generic border style
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1 $border-radial-style1-name: 'rounded'; // Class name for radial border style 1
$border-radial-style1-radius: 2px; // Border radius for radial border style 1 $border-radial-style1-radius: 2px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2 $border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2 $border-radial-style2-radius: 50%; // Border radius for radial border style 2
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1 $box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1 $box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2 $box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2 $box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3 $box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3 $box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4 $box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4 $box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); 0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin $responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin $responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
$grid-medium-breakpoint; $responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin $responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
$grid-large-breakpoint; $responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens $responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens $responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens $responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding $responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding $responsive-padding-small-value: 2px 4px; // Padding value for responsive padding on small screens
$grid-medium-breakpoint; $responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding $responsive-padding-large-value: 6px 8px; // Padding value for responsive padding on large screens
$grid-large-breakpoint; $include-floats: false; // Should floats be included? (`true`/`false`) [1]
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens $include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens $include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
4px 6px;
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
// Notes: // Notes:
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class // [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
// names that will be used. // names that will be used.

84
src/flavors/mini-sucroa.scss
View File

@@ -4,7 +4,8 @@
/* /*
Flavor name: Sucroa (mini-sucroa) Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis Author: Angeliki Daskalakis
mini.css version: v2.1.0 (Fermion) Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.1 (Fermion)
*/ */
// Google Fonts imports and usage // Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext'); @import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
@@ -479,57 +480,52 @@ $spinner-donut-style1-name: 'large'; // Class name for donut spinner styl
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1 $spinner-donut-style1-size: 32px; // Size for donut spinner style 1
$spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1 $spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
// Variables for utilities and helper classes // Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements $visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$breadcrumbs-back-color: #e8deff; // Background color for breadcrumbs $breadcrumbs-back-color: #e8deff; // Background color for breadcrumbs
$breadcrumbs-margin: 12px 10px; // Margin for breadcrumbs $breadcrumbs-margin: 12px 10px; // Margin for breadcrumbs
$breadcrumbs-height: 32px; // Height of the breadcrumbs $breadcrumbs-height: 32px; // Height of the breadcrumbs
$breadcrumbs-separator-width: 3px; // Width of the breadcrumbs' separator $breadcrumbs-separator-width: 3px; // Width of the breadcrumbs' separator
$breadcrumbs-border-style: 1px solid #a9a2ba; // Border style for breadcrumbs $breadcrumbs-border-style: 1px solid #a9a2ba; // Border style for breadcrumbs
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs $breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs $breadcrumbs-box-shadow: // Box shadow for breadcrumbs
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15); 0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
$close-icon-name: 'close'; // Class name for close icon $close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 32px; // Size of the close icon $close-icon-size: 32px; // Size of the close icon
$close-icon-back-color: #e8deff; // Background color for the close icon $close-icon-back-color: #e8deff; // Background color for the close icon
$close-icon-fore-color: #211423; // Foreground color for the close icon $close-icon-fore-color: #211423; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style $border-generic-name: 'bordered'; // Class name for generic border style
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1 $border-radial-style1-name: 'rounded'; // Class name for radial border style 1
$border-radial-style1-radius: 4px; // Border radius for radial border style 1 $border-radial-style1-radius: 4px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2 $border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2 $border-radial-style2-radius: 50%; // Border radius for radial border style 2
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1 $box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1 $box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2 $box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2 $box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3 $box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3 $box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4 $box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4 $box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); 0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin $responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin $responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
$grid-medium-breakpoint; $responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin $responsive-margin-small-value: 3px; // Margin value for responsive margin on small screens
$grid-large-breakpoint; $responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
$responsive-margin-small-value: 3px; // Margin value for responsive margin on small screens $responsive-margin-large-value: 10px; // Margin value for responsive margin on large screens
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens $responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-margin-large-value: 10px; // Margin value for responsive margin on large screens $responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding $responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding $responsive-padding-small-value: 2px 3px; // Padding value for responsive padding on small screens
$grid-medium-breakpoint; $responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding $responsive-padding-large-value: 8px 10px; // Padding value for responsive padding on large screens
$grid-large-breakpoint; $include-floats: false; // Should floats be included? (`true`/`false`) [1]
$responsive-padding-small-value:2px 3px; // Padding value for responsive padding on small screens $include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens $include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
4px 6px;
$responsive-padding-large-value:8px 10px; // Padding value for responsive padding on large screens
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
// Notes: // Notes:
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class // [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
// names that will be used. // names that will be used.

287
src/mini/_utility.scss
View File

@@ -1,6 +1,14 @@
/* /*
Definitions for utilities and helper classes. Definitions for utilities and helper classes.
*/ */
// Check the `_utility_mixins.scss` file to find this module's mixins.
@import 'utility_mixins';
// The floats, clearfix and center-block flags are for legacy features.
$include-floats: false !default; // Should floats be included? (`true`/`false`)
$include-clearfix: false !default; // Should clearfix be included? (`true`/`false`)
$include-center-block: false !default; // Should center block be included? (`true`/`false`)
$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`)
// Hidden elements class. ATTENTION: Uses !important. // Hidden elements class. ATTENTION: Uses !important.
.#{$hidden-name}{ .#{$hidden-name}{
display: none !important; display: none !important;
@@ -15,197 +23,122 @@
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
// Breadcrumbs @if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
ul.#{$breadcrumbs-name} { // Breadcrumbs
// Old syntax ul.#{$breadcrumbs-name} {
display: -webkit-box;
// New syntax
display: -webkit-flex;
display: flex;
list-style: none;
// Apply margin from styling
@if $breadcrumbs-margin != 0 {
margin: $breadcrumbs-margin;
}
@else { // Reset margins from list styling
margin-left: 0;
margin-right: 0;
}
padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style;
}
@if $breadcrumbs-border-radius != 0 {
border-radius: $breadcrumbs-border-radius;
}
@if $breadcrumbs-box-shadow != none {
box-shadow: $breadcrumbs-box-shadow;
}
li {
// Old syntax // Old syntax
-webkit-box-flex: 1; display: -webkit-box;
max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; display: -webkit-flex;
flex-grow: 1; display: flex;
-webkit-flex-basis: 0; list-style: none;
flex-basis: 0; // Apply margin from styling
@if $breadcrumbs-margin != 0 {
margin: $breadcrumbs-margin;
}
@else { // Reset margins from list styling
margin-left: 0;
margin-right: 0;
}
padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style;
}
@if $breadcrumbs-border-radius != 0 {
border-radius: $breadcrumbs-border-radius;
}
@if $breadcrumbs-box-shadow != none {
box-shadow: $breadcrumbs-box-shadow;
}
li {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
position: relative;
text-align: center;
background: $breadcrumbs-back-color;
height: $breadcrumbs-height;
line-height: $breadcrumbs-height;
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
&:before, &:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border: 0 solid $breadcrumbs-back-color;
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
}
&:before {
left: -($breadcrumbs-height/2);
border-left-color: transparent;
}
&:after {
left: 100%;
border-color: transparent;
border-left-color: $breadcrumbs-back-color;
}
&:first-child {
&:before {
border: 0;
}
}
&:last-child {
margin-right: 0;
&:after {
border: 0;
}
}
}
}
}
@if $include-close-icon { // Turn off if you do not want to include the close icon
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative; position: relative;
text-align: center; border-radius: 1em;
background: $breadcrumbs-back-color; font-size: $close-icon-size;
height: $breadcrumbs-height; text-overflow: clip;
line-height: $breadcrumbs-height; background: rgba($close-icon-back-color,0);
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width; vertical-align: top;
cursor: pointer;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
&:hover, &:active, &:focus {
background: rgba($close-icon-back-color,1);
}
&:before, &:after { &:before, &:after {
content: ""; display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute; position: absolute;
top: 0; content: "";
width: 0; top: 0.33em;
height: 0; left: 0.155em;
border: 0 solid $breadcrumbs-back-color; text-overflow: clip;
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4); background: $close-icon-fore-color;
} }
&:before { &:before {
left: -($breadcrumbs-height/2); -webkit-transform: rotateZ(45deg);
border-left-color: transparent; transform: rotateZ(45deg);
} }
&:after { &:after {
left: 100%; -webkit-transform: rotateZ(-45deg);
border-color: transparent; transform: rotateZ(-45deg);
border-left-color: $breadcrumbs-back-color;
}
&:first-child {
&:before {
border: 0;
}
}
&:last-child {
margin-right: 0;
&:after {
border: 0;
}
} }
} }
} }
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
font-size: $close-icon-size;
text-overflow: clip;
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
&:hover, &:active, &:focus {
background: rgba($close-icon-back-color,1);
}
&:before, &:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: $close-icon-fore-color;
}
&:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
&:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
}
// Generic border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-generic-name : The name of the class used for the generic border.
@mixin make-border-generic ($border-generic-name) {
.#{$border-generic-name} {
border: 1px solid rgba(0,0,0, 0.25) !important;
}
}
// Generic radial border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-radial-name : The name of the class used for the radial border.
// - $border-radial-radius : The border radius used for the radial border.
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
.#{$border-radial-name} {
border-radius: $border-radial-radius !important;
}
}
// Generic box shadow mixin. ATTENTION: Uses !important.
// Variables:
// - $box-shadow-name : The name of the class used for the generic box shadow.
// - $box-shadow-value : The box shadow value of the generic box shadow.
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
.#{$box-shadow-name} {
box-shadow: $box-shadow-value !important;
}
}
// Responsive margin mixin. ATTENTION: Uses !important.
// Variables:
// - $margin-name : The name of the class used for the responsive margin.
// - $margin-medium-breakpoint : Medium screen breakpoint for the responsive margin.
// - $margin-large-breakpoint : Large screen breakpoint for the responsive margin.
// - $margin-small-value : Responsive margin value for smaller screens.
// - $margin-medium-value : Responsive margin value for medium screens.
// - $margin-large-value : Responsive margin value for large screens.
@mixin make-margin-responsive ($margin-name, $margin-medium-breakpoint,
$margin-large-breakpoint, $margin-small-value, $margin-medium-value,
$margin-large-value) {
.#{$margin-name} {
margin: $margin-small-value !important;
}
@media (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} {
margin: $margin-medium-value !important;
}
}
@media (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} {
margin: $margin-large-value !important;
}
}
}
// Responsive padding mixin. ATTENTION: Uses !important.
// Variables:
// - $padding-name : The name of the class used for the responsive padding.
// - $padding-medium-breakpoint : Medium screen breakpoint for the responsive padding.
// - $padding-large-breakpoint : Large screen breakpoint for the responsive padding.
// - $padding-small-value : Responsive padding value for smaller screens.
// - $padding-medium-value : Responsive padding value for medium screens.
// - $padding-large-value : Responsive padding value for large screens.
@mixin make-padding-responsive ($padding-name, $padding-medium-breakpoint,
$padding-large-breakpoint, $padding-small-value, $padding-medium-value,
$padding-large-value) {
.#{$padding-name} {
padding: $padding-small-value !important;
}
@media (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} {
padding: $padding-medium-value !important;
}
}
@media (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} {
padding: $padding-large-value !important;
}
}
}
$include-floats: false !default; // Should floats be included?
$include-clearfix: false !default; // Should clearfix be included?
$include-center-block: false !default; // Should center block be included?
// Floats. ATTENTION: Uses !important. // Floats. ATTENTION: Uses !important.
// NOTE: Might be obsolete and not play well with others. // NOTE: Might be obsolete and not play well with others.
@if $include-floats { @if $include-floats {

78
src/mini/_utility_mixins.scss Normal file
View File

@@ -0,0 +1,78 @@
// Utility module's mixin definitions are here. For the module itself
// check `_utility.scss`.
// Generic border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-generic-name : The name of the class used for the generic border.
@mixin make-border-generic ($border-generic-name) {
.#{$border-generic-name} {
border: 1px solid rgba(0,0,0, 0.25) !important;
}
}
// Generic radial border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-radial-name : The name of the class used for the radial border.
// - $border-radial-radius : The border radius used for the radial border.
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
.#{$border-radial-name} {
border-radius: $border-radial-radius !important;
}
}
// Generic box shadow mixin. ATTENTION: Uses !important.
// Variables:
// - $box-shadow-name : The name of the class used for the generic box shadow.
// - $box-shadow-value : The box shadow value of the generic box shadow.
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
.#{$box-shadow-name} {
box-shadow: $box-shadow-value !important;
}
}
// Responsive margin mixin. ATTENTION: Uses !important.
// Variables:
// - $margin-name : The name of the class used for the responsive margin.
// - $margin-medium-breakpoint : Medium screen breakpoint for the responsive margin.
// - $margin-large-breakpoint : Large screen breakpoint for the responsive margin.
// - $margin-small-value : Responsive margin value for smaller screens.
// - $margin-medium-value : Responsive margin value for medium screens.
// - $margin-large-value : Responsive margin value for large screens.
@mixin make-margin-responsive ($margin-name, $margin-medium-breakpoint,
$margin-large-breakpoint, $margin-small-value, $margin-medium-value,
$margin-large-value) {
.#{$margin-name} {
margin: $margin-small-value !important;
}
@media (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} {
margin: $margin-medium-value !important;
}
}
@media (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} {
margin: $margin-large-value !important;
}
}
}
// Responsive padding mixin. ATTENTION: Uses !important.
// Variables:
// - $padding-name : The name of the class used for the responsive padding.
// - $padding-medium-breakpoint : Medium screen breakpoint for the responsive padding.
// - $padding-large-breakpoint : Large screen breakpoint for the responsive padding.
// - $padding-small-value : Responsive padding value for smaller screens.
// - $padding-medium-value : Responsive padding value for medium screens.
// - $padding-large-value : Responsive padding value for large screens.
@mixin make-padding-responsive ($padding-name, $padding-medium-breakpoint,
$padding-large-breakpoint, $padding-small-value, $padding-medium-value,
$padding-large-value) {
.#{$padding-name} {
padding: $padding-small-value !important;
}
@media (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} {
padding: $padding-medium-value !important;
}
}
@media (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} {
padding: $padding-large-value !important;
}
}
}