Skip to content

Instantly share code, notes, and snippets.

@overtrue overtrue/_utils.scss
Last active Mar 2, 2019

Embed
What would you like to do?
scss utils.
// Mobile project scss utils.
// https://gist.github.com/overtrue/56561fd4b124b9ffe5048ef06752d4bf
// Space
//
$spacer: 12px !default;
@each $prop, $abbrev in (margin: m, padding: p) {
@for $size from 0 to 10 {
$value: #{$size * $spacer};
.#{$abbrev}-#{$size} { #{$prop}: $value $value !important; }
.#{$abbrev}t-#{$size} { #{$prop}-top: $value !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $value !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $value !important; }
.#{$abbrev}l-#{$size} { #{$prop}-left: $value !important; }
.#{$abbrev}x-#{$size} {
#{$prop}-right: $value !important;
#{$prop}-left: $value !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $value !important;
#{$prop}-bottom: $value !important;
}
}
}
// Float
//
.float-left,.pull-left { float:left; }
.float-right,.pull-right { float:right; }
// Position
//
.position-relative { position: relative; }
.position-static { position: static; }
.position-absolute { position: absolute; }
.position-sticky { position: sticky; }
// Alignment
//
.align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }
// Text
//
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-thin { font-weight: 300; }
.text-truncate { display: block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-mini { font-size: 0.8em; }
// Display size
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: 1.2 !default;
// Type display classes
.display-1 {font-size: $display1-size;font-weight: $display1-weight;line-height: $display-line-height; }
.display-2 {font-size: $display2-size;font-weight: $display2-weight;line-height: $display-line-height; }
.display-3 {font-size: $display3-size;font-weight: $display3-weight;line-height: $display-line-height; }
.display-4 {font-size: $display4-size;font-weight: $display4-weight;line-height: $display-line-height; }
// Image
//
.img-fluid { max-width: 100%; }
//
// Border
//
$border-color: hsl(210 23%, 95%) !default;
.border { border: 1px solid $border-color; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
.border-left { border-left: 1px solid $border-color; }
.border-right { border-right: 1px solid $border-color; }
.border-top { border-top: 1px solid $border-color; }
.border-bottom { border-bottom: 1px solid $border-color; }
//
// Border-radius
//
$border-radius: 3px !default;
.rounded {
border-radius: $border-radius;
}
.rounded-top {
border-top-radius: $border-radius;
}
.rounded-right {
border-right-radius: $border-radius;
}
.rounded-bottom {
border-bottom-radius: $border-radius;
}
.rounded-left {
border-left-radius: $border-radius;
}
.rounded-circle {
border-radius: 50%;
}
.rounded-0 {
border-radius: 0;
}
// Display
//
@each $display in (none, inline, inline-block, block, table, table-cell, flex, inline-flex) {
.d-#{$display} { display: $display !important; }
}
// Margin
//
.ml-auto {
margin-left: auto!important;
}
.mr-auto {
margin-right: auto!important;
}
// Positioning
//
$zindex-fixed: 99 !default;
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-fixed;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-fixed;
}
$zindex-sticky: 98 !default;
.sticky-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
}
// Flex
//
.order-first { order: -1; }
.order-last { order: 1; }
.order-0 { order: 0; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
// Width & height
$sizes: () !default;
$sizes: map-merge(
(
25: 25%,
30: 30%,
35: 35%,
40: 40%,
45: 45%,
50: 50%,
60: 60%,
65: 65%,
70: 70%,
75: 75%,
80: 80%,
85: 85%,
100: 100%,
auto: auto
),
$sizes
);
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes {
.#{$abbrev}-#{$size} { #{$prop}: $length !important; }
}
}
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
// Viewport additional helpers
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }
// Colors
//
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$white: #fff !default;
$light: $gray-400 !default;
$lightest: $gray-200 !default;
$muted: $gray-600 !default;
$dark: $gray-900 !default;
$gray: $gray-600 !default;
$gray-dark: $gray-800 !default;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$transparent: transparent !important;
$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
),
$grays
);
$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
(
"black": $black,
"white": $white,
"light": $light,
"lightest": $lightest,
"muted": $muted,
"dark": $dark,
"gray": $gray,
"gray-dark": $gray-dark,
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"transparent": $transparent
),
$colors
);
$primary: $blue !default;
$secondary: $gray-200 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
),
$theme-colors
);
@each $color, $value in map-merge($colors, $theme-colors) {
.bg-#{$color} { background-color: $value; }
.text-#{$color} { color: $value;}
}
// Shadows
//
$shadow-0: none !default;
$shadow-1: 0 1px 3px hsla(0,0,0,.12), 0 1px 2px hsla(0,0,0,.24) !default;
$shadow-2: 0 3px 6px hsla(0,0,0,.15), 0 2px 4px hsla(0,0,0,.12) !default;
$shadow-3: 0 10px 20px hsla(0,0,0,.15), 0 3px 6px hsla(0,0,0,.10) !default;
$shadow-4: 0 15px 25px hsla(0,0,0,.15), 0 5px 10px hsla(0,0,0,.5) !default;
$shadow-5: 0 20px 40px hsla(0,0,0,.2) !default;
$shadows: () !default;
$shadows: map-merge(
(
"0": $shadow-0,
"1": $shadow-1,
"2": $shadow-2,
"3": $shadow-3,
"4": $shadow-4,
"5": $shadow-5,
), $shadows
);
@each $depth, $shadow in $shadows {
.shadow-#{$depth} { box-shadow: $shadow; }
}
// Z indexes
//
z-1 { z-index: 1; }
z-2 { z-index: 1; }
z-3 { z-index: 1;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.