Init
This commit is contained in:
edsea
815
rss/css/main.scss
Normal file
815
rss/css/main.scss
Normal file
@@ -0,0 +1,815 @@
|
||||
@import 'variables';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Orbitron:wght@400..900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
|
||||
|
||||
/* Reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Typography utilities */
|
||||
body {
|
||||
font-family: $font-family-base;
|
||||
// font-family: "Roboto", sans-serif;
|
||||
|
||||
font-size: map-get($font-sizes, base);
|
||||
line-height: map-get($line-heights, normal);
|
||||
color: map-get($colors, dark);
|
||||
background-color: #{map-get($colors, white)};
|
||||
}
|
||||
|
||||
a{
|
||||
all: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-weight: #{map-get($font-weights, 'light')};
|
||||
// font-size: #{map-get($font-sizes, 'heading')};
|
||||
line-height: #{map-get($line-heights, 'normal')};
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
h5 { font-size: 1.25rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
|
||||
p{
|
||||
font-weight: #{map-get($font-weights, 'light')};
|
||||
font-size: #{map-get($font-sizes, 'normal')};
|
||||
line-height: #{map-get($line-heights, 'normal')};
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@each $name, $size in $font-sizes {
|
||||
.text-#{$name} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $weight in $font-weights {
|
||||
.fw-#{$name} {
|
||||
font-weight: $weight;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $lh in $line-heights {
|
||||
.lh-#{$name} {
|
||||
line-height: $lh;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: map-get($font-sizes, xxl); line-height: map-get($line-heights, heading); }
|
||||
h2, .h2 { font-size: map-get($font-sizes, xl); line-height: map-get($line-heights, heading); }
|
||||
h3, .h3 { font-size: map-get($font-sizes, lg); line-height: map-get($line-heights, heading); }
|
||||
h4, .h4 { font-size: map-get($font-sizes, base); line-height: map-get($line-heights, heading); }
|
||||
h5, .h5 { font-size: map-get($font-sizes, sm); line-height: map-get($line-heights, heading); }
|
||||
h6, .h6 { font-size: map-get($font-sizes, xs); line-height: map-get($line-heights, heading); }
|
||||
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Display utilities */
|
||||
@each $type in $display-types {
|
||||
.d-#{$type} {
|
||||
display: $type;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color utilities */
|
||||
@each $name, $color in $colors {
|
||||
.text-#{$name} { color: $color !important; }
|
||||
.bg-#{$name} { background-color: $color !important; }
|
||||
}
|
||||
|
||||
/* Margin and padding utilities */
|
||||
@for $i from 0 through length($spacing-scale) - 1 {
|
||||
$value: nth($spacing-scale, $i + 1);
|
||||
|
||||
.m-#{$i} { margin: $value !important; }
|
||||
.p-#{$i} { padding: $value !important; }
|
||||
|
||||
.mt-#{$i} { margin-top: $value !important; }
|
||||
.mb-#{$i} { margin-bottom: $value !important; }
|
||||
.ml-#{$i} { margin-left: $value !important; }
|
||||
.mr-#{$i} { margin-right: $value !important; }
|
||||
|
||||
.pt-#{$i} { padding-top: $value !important; }
|
||||
.pb-#{$i} { padding-bottom: $value !important; }
|
||||
.pl-#{$i} { padding-left: $value !important; }
|
||||
.pr-#{$i} { padding-right: $value !important; }
|
||||
}
|
||||
|
||||
/* Grid system */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -$container-padding;
|
||||
margin-left: -$container-padding;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1 0 0%;
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint, $breakpoint-width in $breakpoints {
|
||||
@media (min-width: $breakpoint-width) {
|
||||
.col-#{$breakpoint} {
|
||||
flex: 1 0 0%;
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
|
||||
.col-#{$breakpoint}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Gutter utilities with .g-X */
|
||||
.row {
|
||||
margin-right: -#{map-get($gutters, 3)}; /* Default 1rem gutter */
|
||||
margin-left: -#{map-get($gutters, 3)};
|
||||
margin-top: -#{map-get($gutters, 3)}; /* Vertical gutter */
|
||||
margin-bottom: -#{map-get($gutters, 3)};
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-right: #{map-get($gutters, 3)}; /* Default 1rem padding */
|
||||
padding-left: #{map-get($gutters, 3)};
|
||||
padding-top: #{map-get($gutters, 3)}; /* Vertical padding */
|
||||
padding-bottom: #{map-get($gutters, 3)};
|
||||
}
|
||||
|
||||
/* Variable gutter classes */
|
||||
@for $i from 0 through length($gutters) - 1 {
|
||||
$gutter-value: map-get($gutters, $i);
|
||||
.g-#{$i} {
|
||||
margin-right: -$gutter-value;
|
||||
margin-left: -$gutter-value;
|
||||
margin-top: -$gutter-value;
|
||||
margin-bottom: -$gutter-value;
|
||||
}
|
||||
.col {
|
||||
&.g-#{$i} {
|
||||
padding-right: $gutter-value;
|
||||
padding-left: $gutter-value;
|
||||
padding-top: $gutter-value;
|
||||
padding-bottom: $gutter-value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive gutter classes */
|
||||
@each $breakpoint, $breakpoint-width in $breakpoints {
|
||||
@media (min-width: $breakpoint-width) {
|
||||
@for $i from 0 through length($gutters) - 1 {
|
||||
$gutter-value: map-get($gutters, $i);
|
||||
.#{$breakpoint}-g-#{$i} {
|
||||
margin-right: -$gutter-value;
|
||||
margin-left: -$gutter-value;
|
||||
margin-top: -$gutter-value;
|
||||
margin-bottom: -$gutter-value;
|
||||
}
|
||||
.#{$breakpoint}-col {
|
||||
&.g-#{$i} {
|
||||
padding-right: $gutter-value;
|
||||
padding-left: $gutter-value;
|
||||
padding-top: $gutter-value;
|
||||
padding-bottom: $gutter-value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
@each $key, $shadow in $shadows {
|
||||
.shadow-#{$key} {
|
||||
box-shadow: #{$shadow} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $shadow in $drop-shadows {
|
||||
.drop-shadow-#{$key} {
|
||||
box-shadow: #{$shadow};
|
||||
}
|
||||
}
|
||||
|
||||
/* Flex utilities */
|
||||
@each $key, $value in $flex-directions {
|
||||
.flex-#{$key} {
|
||||
display: flex;
|
||||
flex-direction: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $value in $justify-content-values {
|
||||
.justify-#{$key} {
|
||||
display: flex;
|
||||
justify-content: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $value in $align-items-values {
|
||||
.align-#{$key} {
|
||||
display: flex;
|
||||
align-items: $value;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card component */
|
||||
.card {
|
||||
background-color: map-get($colors, white);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: map-get($shadows, 3);
|
||||
transition: box-shadow 0.3s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.card-header{
|
||||
padding: 0.4rem;
|
||||
|
||||
&.theme-header{
|
||||
background-color: #{map-get($colors, 'dark')} !important;
|
||||
color: #{map-get($colors, primary-alt)};
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&.card-hover{
|
||||
&:hover {
|
||||
box-shadow: map-get($shadows, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button base */
|
||||
.btn {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.45rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
box-shadow 0.25s ease,
|
||||
transform 0.1s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
line-height: 1.2;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid transparent;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Flat variant
|
||||
&.flat {
|
||||
box-shadow: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
// Background color variants
|
||||
&.primary {
|
||||
background-color: map-get($colors, primary);
|
||||
color: map-get($colors, white);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: darken(map-get($colors, primary), 7%);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: map-get($colors, secondary);
|
||||
color: map-get($colors, white);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: darken(map-get($colors, secondary), 7%);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: map-get($colors, danger);
|
||||
color: map-get($colors, white);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: darken(map-get($colors, danger), 7%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Filled buttons */
|
||||
@each $name, $color in $colors {
|
||||
.btn-#{$name} {
|
||||
background-color: $color;
|
||||
color: if(lightness($color) > 60%, #212529, #fff);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color, 8%);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Outline buttons */
|
||||
@each $name, $color in $colors {
|
||||
.btn-outline-#{$name} {
|
||||
background-color: transparent;
|
||||
border: 2px solid $color;
|
||||
color: $color;
|
||||
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
color: if(lightness($color) > 60%, #212529, #fff);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Ghost buttons */
|
||||
@each $name, $color in $colors {
|
||||
.btn-ghost-#{$name} {
|
||||
background-color: transparent;
|
||||
color: $color;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Borders
|
||||
@each $key, $width in $border-widths {
|
||||
.border-#{$key} {
|
||||
border: #{$width} solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.border-top { border-top: 1px solid currentColor; }
|
||||
.border-bottom { border-bottom: 1px solid currentColor; }
|
||||
.border-left { border-left: 1px solid currentColor; }
|
||||
.border-right { border-right: 1px solid currentColor; }
|
||||
|
||||
// Border radius
|
||||
@each $key, $radius in $border-radius-sizes {
|
||||
.rounded-#{$key} {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded { border-radius: 0.25rem; } // default
|
||||
.rounded-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
|
||||
.rounded-bottom{ border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
|
||||
.rounded-left { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
|
||||
.rounded-right { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
|
||||
|
||||
|
||||
// Margin utilities for all directions
|
||||
@for $i from 0 through length($spacing-scale) - 1 {
|
||||
$value: nth($spacing-scale, $i + 1);
|
||||
|
||||
.ms-#{$i} { margin-left: $value; }
|
||||
.me-#{$i} { margin-right: $value; }
|
||||
.mt-#{$i} { margin-top: $value; }
|
||||
.mb-#{$i} { margin-bottom: $value; }
|
||||
|
||||
.mx-#{$i} { margin-left: $value; margin-right: $value; }
|
||||
.my-#{$i} { margin-top: $value; margin-bottom: $value; }
|
||||
}
|
||||
|
||||
// Padding utilities for all directions
|
||||
@for $i from 0 through length($spacing-scale) - 1 {
|
||||
$value: nth($spacing-scale, $i + 1);
|
||||
|
||||
.ps-#{$i} { padding-left: $value; }
|
||||
.pe-#{$i} { padding-right: $value; }
|
||||
.pt-#{$i} { padding-top: $value; }
|
||||
.pb-#{$i} { padding-bottom: $value; }
|
||||
|
||||
.px-#{$i} { padding-left: $value; padding-right: $value; }
|
||||
.py-#{$i} { padding-top: $value; padding-bottom: $value; }
|
||||
}
|
||||
|
||||
// Responsive Margin and Padding
|
||||
@each $breakpoint, $breakpoint-width in $breakpoints {
|
||||
@media (min-width: $breakpoint-width) {
|
||||
@for $i from 0 through length($spacing-scale) - 1 {
|
||||
$value: nth($spacing-scale, $i + 1);
|
||||
|
||||
.#{$breakpoint}-ms-#{$i} { margin-left: $value; }
|
||||
.#{$breakpoint}-me-#{$i} { margin-right: $value; }
|
||||
.#{$breakpoint}-mt-#{$i} { margin-top: $value; }
|
||||
.#{$breakpoint}-mb-#{$i} { margin-bottom: $value; }
|
||||
|
||||
.#{$breakpoint}-mx-#{$i} { margin-left: $value; margin-right: $value; }
|
||||
.#{$breakpoint}-my-#{$i} { margin-top: $value; margin-bottom: $value; }
|
||||
|
||||
.#{$breakpoint}-ps-#{$i} { padding-left: $value; }
|
||||
.#{$breakpoint}-pe-#{$i} { padding-right: $value; }
|
||||
.#{$breakpoint}-pt-#{$i} { padding-top: $value; }
|
||||
.#{$breakpoint}-pb-#{$i} { padding-bottom: $value; }
|
||||
|
||||
.#{$breakpoint}-px-#{$i} { padding-left: $value; padding-right: $value; }
|
||||
.#{$breakpoint}-py-#{$i} { padding-top: $value; padding-bottom: $value; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text alignment utilities
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
// Text transformation utilities
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
.text-capitalize { text-transform: capitalize; }
|
||||
|
||||
// Font weight utilities
|
||||
.font-weight-light { font-weight: 300; }
|
||||
.font-weight-normal { font-weight: 400; }
|
||||
.font-weight-bold { font-weight: 700; }
|
||||
.font-weight-heavy { font-weight: 900; }
|
||||
|
||||
// Text decoration utilities
|
||||
.text-underline { text-decoration: underline; }
|
||||
.text-line-through { text-decoration: line-through; }
|
||||
.text-no-decoration { text-decoration: none; }
|
||||
|
||||
// Image sizing utilities
|
||||
.img-w-100 { width: 100%; }
|
||||
.img-w-auto { width: auto; }
|
||||
.img-w-50 { width: 50%; }
|
||||
.img-w-75 { width: 75%; }
|
||||
.img-w-25 { width: 25%; }
|
||||
|
||||
.img-h-100 { height: 100%; }
|
||||
.img-h-auto { height: auto; }
|
||||
.img-h-50 { height: 50%; }
|
||||
.img-h-75 { height: 75%; }
|
||||
|
||||
.img-max-w-100 { max-width: 100%; }
|
||||
.img-max-w-50 { max-width: 50%; }
|
||||
.img-max-h-100 { max-height: 100%; }
|
||||
.img-max-h-50 { max-height: 50%; }
|
||||
|
||||
.image-container{
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width:100%;
|
||||
flex: 1;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// Aspect ratio utilities (for common ratios)
|
||||
.img-aspect-ratio-16-9 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; // 16:9 aspect ratio
|
||||
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.img-aspect-ratio-4-3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%; // 4:3 aspect ratio
|
||||
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.img-aspect-ratio-1-1 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%; // 1:1 aspect ratio (square)
|
||||
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Image border radius utilities
|
||||
.img-rounded { border-radius: 0.25rem; }
|
||||
.img-rounded-sm { border-radius: 0.125rem; }
|
||||
.img-rounded-md { border-radius: 0.375rem; }
|
||||
.img-rounded-lg { border-radius: 2rem; }
|
||||
.img-rounded-full { border-radius: 50%; }
|
||||
|
||||
// Image border utilities
|
||||
.img-border { border: 1px solid #ddd; }
|
||||
.img-border-2 { border: 2px solid #ddd; }
|
||||
.img-border-3 { border: 3px solid #ddd; }
|
||||
.img-border-0 { border: none; }
|
||||
|
||||
// Image filters
|
||||
.img-filter-blur {
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.img-filter-grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.img-filter-brightness {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.img-filter-contrast {
|
||||
filter: contrast(1.5);
|
||||
}
|
||||
|
||||
.img-filter-sepia {
|
||||
filter: sepia(1);
|
||||
}
|
||||
|
||||
.img-filter-invert {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.img-filter-saturate {
|
||||
filter: saturate(2);
|
||||
}
|
||||
|
||||
// Image alignment utilities
|
||||
.img-align-left { display: block; margin-right: auto; }
|
||||
.img-align-right { display: block; margin-left: auto; }
|
||||
.img-align-center { display: block; margin-left: auto; margin-right: auto; }
|
||||
|
||||
.img-align-start { align-self: flex-start; }
|
||||
.img-align-end { align-self: flex-end; }
|
||||
.img-align-center-flex { align-self: center; }
|
||||
|
||||
// Responsive images with max-width and auto height
|
||||
.img-responsive {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Form Inputs */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="number"] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
border: 1px solid;
|
||||
outline: none;
|
||||
border-color: map-get($colors, muted);
|
||||
color: map-get($colors, secondary);
|
||||
background-color: #fdfdfd;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: map-get($colors, primary);
|
||||
box-shadow: 0 0 0 3px rgba(map-get($colors, primary), 0.2);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: map-get($colors, light);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: map-get($colors, gray);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sm-reverse{
|
||||
@media (max-width: map-get($breakpoints, "md")) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.rel{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.full-height{
|
||||
height: calc(100vh - 52px);
|
||||
}
|
||||
|
||||
.no-wrap{
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.no-click{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert {
|
||||
border-radius: #{map-get($border-radius-sizes, md)};
|
||||
padding: #{map-get($spacing, "2")};
|
||||
|
||||
&.success {
|
||||
background-color: lighten(map-get($colors, success), 25%);
|
||||
color: #{map-get($colors, success)};
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: lighten(map-get($colors, warning), 25%);
|
||||
color: #{map-get($colors, warning)};
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: lighten(map-get($colors, danger), 25%);
|
||||
color: #{map-get($colors, danger)};
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: lighten(map-get($colors, info), 25%);
|
||||
color: #{map-get($colors, info)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Misc tools */
|
||||
.spinner {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: 2px solid #{map-get($colors, dark)};
|
||||
border-left-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: 1s linear infinite spinner;
|
||||
|
||||
&.primary {
|
||||
border: 2px solid #{map-get($colors, primary)};
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
border: 2px solid #{map-get($colors, secondary)};
|
||||
}
|
||||
|
||||
&.accent {
|
||||
border: 2px solid #{map-get($colors, accent)};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user