app/javascript/themes/current/stylesheets/utilities.scss
// =========== Mixins ===========
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
.bg-success-light {
background-color: #e7faf2;
}
// =========== Opacity ===========
.opacity-0 {
opacity: 0 !important;
}
.opacity-10 {
opacity: 0.1 !important;
}
.opacity-20 {
opacity: 0.2 !important;
}
.opacity-30 {
opacity: 0.3 !important;
}
.opacity-40 {
opacity: 0.4 !important;
}
.opacity-50 {
opacity: 0.5 !important;
}
.opacity-60 {
opacity: 0.6 !important;
}
.opacity-70 {
opacity: 0.7 !important;
}
.opacity-80 {
opacity: 0.8 !important;
}
.opacity-90 {
opacity: 0.9 !important;
}
.opacity-100 {
opacity: 1 !important;
}
// =========== Cursor ===========
.cursor-pointer {
cursor: pointer !important;
}
// =========== Sizing ===========
@each $size in (10, 20, 30, 40, 50, 60, 70, 80, 90) {
.min-height-lg-#{$size}vh {
min-height: #{$size}vh;
}
}
// =========== Text ===========
@each $opacity in (10, 20, 30, 40, 50, 60, 70, 80, 90) {
.text-black-#{$opacity} {
color: rgba(0, 0, 0, ($opacity/100));
}
}
.code {
font-family: monospace;
color: $code-text-color;
word-break: break-word;
font-size: 1.25em;
}
.leading-relaxed {
line-height: 1.625 !important;
}
.leading-loose {
line-height: 2 !important;
}
// =========== Grid ===========
.grid {
display: grid;
grid-gap: 10px;
}
.grid-tcolumns-400 {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.grid-tcolumns-300 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-trows-200 {
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}
// =========== Buttons ===========
@include media-breakpoint-down(sm) {
.btn-block-sm-only {
display: block;
width: 100%;
}
}