Utility module
This commit is contained in:
Angelos Chalaris
parent
41dafb96a5
commit
a5bccd0792
6 changed files with 319 additions and 1 deletions
137
dist/mini-default.css
vendored
137
dist/mini-default.css
vendored
|
|
@ -1928,3 +1928,140 @@ progress.tertiary {
|
|||
.spinner.tertiary {
|
||||
--spinner-fore-color: #308732;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for utilities and helper classes.
|
||||
*/
|
||||
/* Utility module CSS variable definitions */
|
||||
:root {
|
||||
--generic-border-color: rgba(0, 0, 0, 0.3);
|
||||
--generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
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;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 0.0625rem solid var(--generic-border-color) !important;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: var(--universal-border-radius) !important;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.shadowed {
|
||||
box-shadow: var(--generic-box-shadow) !important;
|
||||
}
|
||||
|
||||
.responsive-margin {
|
||||
margin: calc(var(--universal-margin) / 4) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.responsive-margin {
|
||||
margin: calc(var(--universal-margin) / 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.responsive-margin {
|
||||
margin: var(--universal-margin) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.responsive-padding {
|
||||
padding: calc(var(--universal-padding) / 4) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.responsive-padding {
|
||||
padding: calc(var(--universal-padding) / 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.responsive-padding {
|
||||
padding: var(--universal-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1279px) {
|
||||
.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.visually-hidden-sm {
|
||||
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: 768px) and (max-width: 1279px) {
|
||||
.visually-hidden-md {
|
||||
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: 1280px) {
|
||||
.visually-hidden-lg {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -275,3 +275,12 @@
|
|||
- Updated menus to not include a dead `blog` link no more. Sorry, **hugging cat**!
|
||||
- Updated tag for `v3.0.0-alpha.2`.
|
||||
- Released the new alpha.
|
||||
|
||||
# v3.0.0-alpha.3
|
||||
|
||||
## 20180116
|
||||
|
||||
- Started working on `utility` module.
|
||||
- Moved all old mixins from `utility_mixins` to the base `utility` module.
|
||||
- Removed `close`, `breadcrumbs` and legacy utility helper classes.
|
||||
- Everything including `utility` module, but no icons is `6.75KB`, which is quite good, considering everything.
|
||||
|
|
|
|||
|
|
@ -133,3 +133,5 @@ $spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for second
|
|||
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
|
||||
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
|
||||
|
||||
@import '../mini/utility';
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@ $spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spi
|
|||
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
|
||||
|
||||
@import '../mini/utility';
|
||||
|
||||
// Custom elements for his flavor.
|
||||
|
||||
|
|
|
|||
169
src/mini/_utility.scss
Normal file
169
src/mini/_utility.scss
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
/*
|
||||
Definitions for utilities and helper classes.
|
||||
*/
|
||||
$hidden-name: 'hidden' !default; // Class name for hidden elements.
|
||||
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
|
||||
$border-generic-name: 'bordered' !default; // Class name for bordered elements.
|
||||
$border-generic-color: rgba(0,0,0, 0.3) !default; // Border color for bordered elements.
|
||||
$border-rounded-name: 'rounded' !default; // Class name for rounded-border elements.
|
||||
$border-circular-name: 'circular' !default; // Class name for circular-border elements.
|
||||
$box-shadow-generic-name:'shadowed' !default; // Class name for box-shadow elements.
|
||||
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0, 0, 0, 0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0, 0, 0, 0.25);
|
||||
$responsive-margin-name: 'responsive-margin' !default; //Class name for responsive margin elements.
|
||||
$responsive-margin-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive margin elements.
|
||||
$responsive-margin-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive margin elements.
|
||||
$responsive-padding-name: 'responsive-padding' !default; //Class name for responsive padding elements.
|
||||
$responsive-padding-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive padding elements.
|
||||
$responsive-padding-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive padding elements.
|
||||
$hidden-prefix: 'hidden' !default; // Class prefix for responsive hidden elements.
|
||||
$hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
|
||||
$hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive hidden elements.
|
||||
$hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
|
||||
$hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive hidden elements.
|
||||
$hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
|
||||
$visually-hidden-prefix: 'visually-hidden' !default; // Class prefix for responsive visually hidden elements.
|
||||
$visually-hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
|
||||
$visually-hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive visually hidden elements.
|
||||
$visually-hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
|
||||
$visually-hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive visually hidden elements.
|
||||
$visually-hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$border-generic-color-var: '--generic-border-color' !default;
|
||||
$box-shadow-generic-var: '--generic-box-shadow' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Utility module CSS variable definitions */
|
||||
:root {
|
||||
#{$border-generic-color-var}: $border-generic-color;
|
||||
#{$box-shadow-generic-var}: $box-shadow-generic;
|
||||
}
|
||||
// Hidden elements class. NOTE: Uses !important.
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
// Visually hidden elements class. NOTE: Uses !important.
|
||||
.#{$visually-hidden-name} {
|
||||
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;
|
||||
}
|
||||
// Generic bordered element class. NOTE: Uses !important.
|
||||
.#{$border-generic-name} {
|
||||
border: $__1px solid var(#{$border-generic-color-var}) !important;
|
||||
}
|
||||
// Generic rounded-border element class. NOTE: Uses !important.
|
||||
.#{$border-rounded-name} {
|
||||
border-radius: var(#{$universal-border-radius-var}) !important;
|
||||
}
|
||||
// Generic circular-border element class. NOTE: Uses !important.
|
||||
.#{$border-circular-name} {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
// Generic box-shadow element class. NOTE: Uses !important.
|
||||
.#{$box-shadow-generic-name} {
|
||||
box-shadow: var(#{$box-shadow-generic-var}) !important;
|
||||
}
|
||||
// Responsive margin class. NOTE: Uses !important.
|
||||
.#{$responsive-margin-name} {
|
||||
margin: calc(var(#{$universal-margin-var}) / 4) !important;
|
||||
@media screen and (min-width: #{$responsive-margin-medium-breakpoint}) {
|
||||
margin: calc(var(#{$universal-margin-var}) / 2) !important;
|
||||
}
|
||||
@media screen and (min-width: #{$responsive-margin-large-breakpoint}) {
|
||||
margin: var(#{$universal-margin-var}) !important;
|
||||
}
|
||||
}
|
||||
// Responsive padding class. NOTE: Uses !important.
|
||||
.#{$responsive-padding-name} {
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) !important;
|
||||
@media screen and (min-width: #{$responsive-padding-medium-breakpoint}) {
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) !important;
|
||||
}
|
||||
@media screen and (min-width: #{$responsive-padding-large-breakpoint}) {
|
||||
padding: var(#{$universal-padding-var}) !important;
|
||||
}
|
||||
}
|
||||
// Responsive hidden element class. NOTE: Uses !important.
|
||||
@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 element class. NOTE: Uses !important.
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue