mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-13 08:49:41 +01:00
242 lines
12 KiB
SCSS
242 lines
12 KiB
SCSS
// 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-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.
|
|
// - $margin-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive margin. Defaults to `768px`.
|
|
// - $margin-large-breakpoint : (Optional) Large screen breakpoint for the responsive margin. Defaults to `1280px`.
|
|
// - $margin-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
|
// - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
|
|
// - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
|
|
@mixin make-margin-responsive ($margin-name, $margin-small-value,
|
|
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
|
|
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
|
|
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
|
|
@if $margin-use-four-step-grid {
|
|
.#{$margin-name} {
|
|
margin: $margin-extra-small-value !important;
|
|
}
|
|
@media screen and (min-width: #{$margin-small-breakpoint}) {
|
|
margin: $margin-small-value !important;
|
|
}
|
|
}
|
|
@else {
|
|
.#{$margin-name} {
|
|
margin: $margin-small-value !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$margin-medium-breakpoint}) {
|
|
.#{$margin-name} {
|
|
margin: $margin-medium-value !important;
|
|
}
|
|
}
|
|
@media screen and (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-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.
|
|
// - $padding-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive padding. Defaults to `768px`.
|
|
// - $padding-large-breakpoint : (Optional) Large screen breakpoint for the responsive padding. Defaults to `1280px`.
|
|
// - $padding-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
|
// - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
|
|
// - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
|
|
@mixin make-padding-responsive ($padding-name, $padding-small-value,
|
|
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
|
|
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
|
|
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
|
|
@if $padding-use-four-step-grid{
|
|
.#{$padding-name} {
|
|
padding: $padding-extra-small-value !important;
|
|
}
|
|
@media screen and (min-width: #{$padding-small-breakpoint}) {
|
|
padding: $padding-small-value !important;
|
|
}
|
|
}
|
|
@else {
|
|
.#{$padding-name} {
|
|
padding: $padding-small-value !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$padding-medium-breakpoint}) {
|
|
.#{$padding-name} {
|
|
padding: $padding-medium-value !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$padding-large-breakpoint}) {
|
|
.#{$padding-name} {
|
|
padding: $padding-large-value !important;
|
|
}
|
|
}
|
|
}
|
|
// Responsive hidden elements mixin. ATTENTION: Uses !important.
|
|
// Variables:
|
|
// - $hidden-prefix : The prefix for the name of the class used for the responsive hiding.
|
|
// - $hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive hiding. Defaults to `768px`.
|
|
// - $hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive hiding. Defaults to `1280px`.
|
|
// - $hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive hiding. Defaults to 'sm'.
|
|
// - $hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive hiding. Defaults to 'md'.
|
|
// - $hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive hiding. Defaults to 'lg'.
|
|
// - $hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
|
// - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
|
|
// - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
|
|
@mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
|
|
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
|
|
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
|
|
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
|
|
@if $hidden-use-four-step-grid {
|
|
@media screen and (max-width: $hidden-small-breakpoint - 1px) {
|
|
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: $hidden-medium-breakpoint - 1px) {
|
|
.#{$hidden-prefix}-#{$hidden-small-suffix} {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
@media screen and (max-width: $hidden-medium-breakpoint - 1px) {
|
|
.#{$hidden-prefix}-#{$hidden-small-suffix} {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: $hidden-large-breakpoint - 1px) {
|
|
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$hidden-large-breakpoint}) {
|
|
.#{$hidden-prefix}-#{$hidden-large-suffix} {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Responsive visually hidden elements mixin. ATTENTION: Uses !important.
|
|
// Variables:
|
|
// - $visually-hidden-prefix : The prefix for the name of the class used for the responsive visual hiding.
|
|
// - $visually-hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive visual hiding. Defaults to `768px`.
|
|
// - $visually-hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive visual hiding. Defaults to `1280px`.
|
|
// - $visually-hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'sm'.
|
|
// - $visually-hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'md'.
|
|
// - $visually-hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'lg'.
|
|
// - $visually-hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
|
// - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
|
|
// - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
|
|
@mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
|
|
$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
|
|
$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
|
|
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
|
|
@if $visually-hidden-use-four-step-grid {
|
|
@media screen and (max-width: $visually-hidden-small-breakpoint - 1px) {
|
|
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
-webkit-clip-path: inset(100%) !important;
|
|
clip-path: inset(100%) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: $visually-hidden-medium-breakpoint - 1px) {
|
|
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
-webkit-clip-path: inset(100%) !important;
|
|
clip-path: inset(100%) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
@media screen and (max-width: $visually-hidden-medium-breakpoint - 1px) {
|
|
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
-webkit-clip-path: inset(100%) !important;
|
|
clip-path: inset(100%) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: $visually-hidden-large-breakpoint - 1px) {
|
|
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
-webkit-clip-path: inset(100%) !important;
|
|
clip-path: inset(100%) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
|
|
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
-webkit-clip-path: inset(100%) !important;
|
|
clip-path: inset(100%) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
}
|