Housekeeping for utility module
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
parent
cb1ceb37a5
commit
874c57f802
7 changed files with 271 additions and 266 deletions
2
dist/mini-default.css
vendored
2
dist/mini-default.css
vendored
|
|
@ -2,7 +2,7 @@
|
|||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
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.
|
||||
|
|
|
|||
3
dist/mini-sucroa.css
vendored
3
dist/mini-sucroa.css
vendored
|
|
@ -2,7 +2,8 @@
|
|||
/*
|
||||
Flavor name: Sucroa (mini-sucroa)
|
||||
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");
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -908,3 +908,5 @@
|
|||
- 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.
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
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
|
||||
$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-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius 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);
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of 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
|
||||
$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-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name 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-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
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of 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
|
||||
$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-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name 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-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-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);
|
||||
$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
|
||||
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
|
||||
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-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
|
||||
$grid-large-breakpoint;
|
||||
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding
|
||||
$grid-large-breakpoint;
|
||||
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
||||
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]
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
|
||||
$responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
|
||||
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
|
||||
$responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
|
||||
$responsive-padding-small-value: 2px 4px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||
$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:
|
||||
// [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.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
/*
|
||||
Flavor name: Sucroa (mini-sucroa)
|
||||
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
|
||||
@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-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e8deff; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 12px 10px; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 3px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 1px solid #a9a2ba; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e8deff; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 12px 10px; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 3px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 1px solid #a9a2ba; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius 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);
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of 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
|
||||
$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-radius: 4px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name 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-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
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of 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
|
||||
$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-radius: 4px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name 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-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-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);
|
||||
$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
|
||||
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
|
||||
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-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
|
||||
$grid-large-breakpoint;
|
||||
$responsive-margin-small-value: 3px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 10px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding
|
||||
$grid-large-breakpoint;
|
||||
$responsive-padding-small-value:2px 3px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
||||
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]
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
|
||||
$responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
|
||||
$responsive-margin-small-value: 3px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 10px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
|
||||
$responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
|
||||
$responsive-padding-small-value: 2px 3px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||
$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:
|
||||
// [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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
/*
|
||||
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-name}{
|
||||
display: none !important;
|
||||
|
|
@ -15,197 +23,122 @@
|
|||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
// Breadcrumbs
|
||||
ul.#{$breadcrumbs-name} {
|
||||
// Old syntax
|
||||
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 {
|
||||
@if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
|
||||
// Breadcrumbs
|
||||
ul.#{$breadcrumbs-name} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
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
|
||||
-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;
|
||||
text-align: center;
|
||||
background: $breadcrumbs-back-color;
|
||||
height: $breadcrumbs-height;
|
||||
line-height: $breadcrumbs-height;
|
||||
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
|
||||
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 {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.45em;
|
||||
height: 0.1em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid $breadcrumbs-back-color;
|
||||
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
|
||||
content: "";
|
||||
top: 0.33em;
|
||||
left: 0.155em;
|
||||
text-overflow: clip;
|
||||
background: $close-icon-fore-color;
|
||||
}
|
||||
&:before {
|
||||
left: -($breadcrumbs-height/2);
|
||||
border-left-color: transparent;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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.
|
||||
// NOTE: Might be obsolete and not play well with others.
|
||||
@if $include-floats {
|
||||
|
|
|
|||
78
src/mini/_utility_mixins.scss
Normal file
78
src/mini/_utility_mixins.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue