diff --git a/dist/mini-default.css b/dist/mini-default.css index 654bd8f..e7095e6 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -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. diff --git a/dist/mini-sucroa.css b/dist/mini-sucroa.css index e6270fe..6836a07 100644 --- a/dist/mini-sucroa.css +++ b/dist/mini-sucroa.css @@ -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"); /* diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index cf86f39..e38e276 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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. diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index a34e4b5..5eed46c 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -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. diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss index 6bf36f6..20dab10 100644 --- a/src/flavors/mini-sucroa.scss +++ b/src/flavors/mini-sucroa.scss @@ -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. diff --git a/src/mini/_utility.scss b/src/mini/_utility.scss index cf35ec4..c3a8d3c 100644 --- a/src/mini/_utility.scss +++ b/src/mini/_utility.scss @@ -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 { diff --git a/src/mini/_utility_mixins.scss b/src/mini/_utility_mixins.scss new file mode 100644 index 0000000..26e356e --- /dev/null +++ b/src/mini/_utility_mixins.scss @@ -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; + } + } +}