parent
919afcbcfc
commit
e754e40622
22 changed files with 1034 additions and 184 deletions
83
packages/core/_variables.scss
Normal file
83
packages/core/_variables.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
@use "sass:color";
|
||||
|
||||
/* Using catppuccin for now, make a theme switcher later */
|
||||
@use "./themes/catppuccin/catppuccin";
|
||||
|
||||
@function getColor($color) {
|
||||
$ctp-theme: map-get(catppuccin.$palette, "macchiato");
|
||||
@return map-get($ctp-theme, $color);
|
||||
}
|
||||
|
||||
/*
|
||||
* ╭───────────────────────────────────────────────────────────╮
|
||||
* │ Mini-Strap Design Tokens │
|
||||
* ╰───────────────────────────────────────────────────────────╯
|
||||
* */
|
||||
|
||||
// ── Structure and convention ────────────────────────────────────────────
|
||||
|
||||
/*
|
||||
*
|
||||
* */
|
||||
|
||||
/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
||||
$screen-sizes: (
|
||||
"sm": 640px,
|
||||
"md": 768px,
|
||||
"lg": 1024px,
|
||||
"xl": 1280px,
|
||||
"2xl": 1536px,
|
||||
);
|
||||
|
||||
$spacings: (
|
||||
0 "--prj-spacing-0" 0,
|
||||
1 "--prj-spacing-1" 0.25rem,
|
||||
2 "--prj-spacing-2" 0.5rem,
|
||||
3 "--prj-spacing-3" 1rem,
|
||||
4 "--prj-spacing-4" 2rem,
|
||||
5 "--prj-spacing-5" 3rem
|
||||
);
|
||||
|
||||
$border-radius: 0.5rem;
|
||||
|
||||
// Native CSS Variables to allow overridings and usage in external stylesheets
|
||||
:root {
|
||||
/* Variables prefixed with prj to avoid collisions */
|
||||
|
||||
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
||||
--prj-bg: #{getColor("mantle")};
|
||||
--prj-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
|
||||
--prj-shadow: #{getColor("crust")};
|
||||
--prj-text: #{getColor("text")};
|
||||
|
||||
--prj-surface-1: #{getColor("base")};
|
||||
--prj-surface-2: #{darken(getColor("surface0"), 2%)};
|
||||
--prj-surface-3: #{getColor("surface1")};
|
||||
--prj-surface-text: #{getColor("text")};
|
||||
|
||||
--prj-link-text: #{getColor("teal")};
|
||||
|
||||
--prj-accent-bg: #{getColor("teal")};
|
||||
--prj-accent-text: #{getColor("base")};
|
||||
|
||||
--prj-primary: #{getColor("teal")};
|
||||
--prj-primary-text: #{getColor("base")};
|
||||
|
||||
--prj-secondary: #{getColor("mauve")};
|
||||
--prj-secondary-text: #{getColor("base")};
|
||||
|
||||
--prj-danger: #{getColor("red")};
|
||||
--prj-danger-text: #{getColor("base")};
|
||||
|
||||
--prj-disabled: #{getColor("red")};
|
||||
--prj-disabled-text: rgba(#{getColor("raw")}, 0.5);
|
||||
|
||||
--prj-input: #{getColor("text")};
|
||||
--prj-input-text: #{getColor("base")};
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
#{$variable}: #{$value};
|
||||
}
|
||||
|
||||
--prj-border-radius: #{$border-radius};
|
||||
}
|
||||
|
|
@ -15,3 +15,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-darker() {
|
||||
transition: filter 0.15s ease-in-out;
|
||||
filter: brightness(1);
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
187
packages/core/src/_reset.scss
Normal file
187
packages/core/src/_reset.scss
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/*
|
||||
* ╭─────────────────────────────────────────────────────────────────╮
|
||||
* │ Reset borrowed from https://github.com/kkrishguptaa/reseter.css │
|
||||
* ╰─────────────────────────────────────────────────────────────────╯
|
||||
*/
|
||||
|
||||
// ── Global ──────────────────────────────────────────────────────────────
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
background-clip: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:where(:root) {
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
line-height: 1.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
:where(main) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:where(h1) {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
:where(p + p) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
// ── Forms ───────────────────────────────────────────────────────────────
|
||||
:where(button, input, optgroup, select, textarea) {
|
||||
line-height: inherit;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
:where(button, [type="button"], [type="reset"], [type="submit"]) {
|
||||
-webkit-appearance: button;
|
||||
padding: 1px 6px;
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:where(input) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:where(input, textarea) {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
:where(fieldset) {
|
||||
border: 1px solid currentColor;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
:where(legend) {
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
:where(progress) {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:where(select) {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
:where([type="search"]) {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
:where([type="color"]) {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration,
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// ── Text ────────────────────────────────────────────────────────────────
|
||||
|
||||
:where(a) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:where(abbr[title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
:where(code, kbd, samp, pre) {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
:where(sub, sup) {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:where(sub) {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
:where(sup) {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// ── Other ───────────────────────────────────────────────────────────────
|
||||
|
||||
:where(a) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:where(abbr[title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
:where(code, kbd, samp, pre) {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
:where(sub, sup) {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:where(sub) {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
:where(sup) {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
|
@ -44,44 +44,58 @@ $spacings: (
|
|||
|
||||
$border-radius: 0.5rem;
|
||||
|
||||
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
||||
$msp-colors: (
|
||||
"--msp-color-bg": #{getColor("mantle")},
|
||||
"--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
|
||||
"--msp-color-bg-surface-1": #{getColor("base")},
|
||||
"--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
|
||||
"--msp-color-bg-surface-3": #{getColor("surface1")},
|
||||
|
||||
"--msp-color-bg-accent": #{getColor("teal")},
|
||||
"--msp-color-bg-primary": #{getColor("teal")},
|
||||
"--msp-color-bg-secondary": #{getColor("mauve")},
|
||||
"--msp-color-bg-danger": #{getColor("red")},
|
||||
"--msp-color-bg-disabled": #{getColor("red")},
|
||||
"--msp-color-bg-input": #{getColor("text")},
|
||||
"--msp-color-bg-checkbox": #{getColor("teal")},
|
||||
"--msp-color-bg-range": #{getColor("surface1")},
|
||||
"--msp-color-bg-btn": #{getColor("teal")},
|
||||
|
||||
"--msp-color-text": #{getColor("text")},
|
||||
"--msp-color-text-surface": #{getColor("text")},
|
||||
"--msp-color-text-link": #{getColor("teal")},
|
||||
"--msp-color-text-accent": #{getColor("base")},
|
||||
"--msp-color-text-primary": #{getColor("base")},
|
||||
"--msp-color-text-secondary": #{getColor("base")},
|
||||
"--msp-color-text-danger": #{getColor("base")},
|
||||
"--msp-color-text-disabled": #{color.scale(getColor("text"), $alpha: -30%)},
|
||||
"--msp-color-text-input": #{getColor("base")},
|
||||
"--msp-color-text-input-disabled": #{color.scale(
|
||||
getColor("base"),
|
||||
$alpha: -30%
|
||||
)},
|
||||
"--msp-color-text-checkbox": #{getColor("surface1")},
|
||||
"--msp-color-text-range": #{getColor("teal")},
|
||||
"--msp-color-text-btn": #{getColor("base")},
|
||||
|
||||
"--msp-color-shadow": #{getColor("crust")},
|
||||
"--msp-color-transparent": transparent,
|
||||
);
|
||||
|
||||
// Native CSS Variables to allow overridings and usage in external stylesheets
|
||||
:root {
|
||||
/* Variables prefixed with prj to avoid collisions */
|
||||
|
||||
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
||||
--msp-bg: #{getColor("mantle")};
|
||||
--msp-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
|
||||
--msp-shadow: #{getColor("crust")};
|
||||
--msp-text: #{getColor("text")};
|
||||
|
||||
--msp-surface-1: #{getColor("base")};
|
||||
--msp-surface-2: #{darken(getColor("surface0"), 2%)};
|
||||
--msp-surface-3: #{getColor("surface1")};
|
||||
--msp-surface-text: #{getColor("text")};
|
||||
|
||||
--msp-link-text: #{getColor("teal")};
|
||||
|
||||
--msp-accent-bg: #{getColor("teal")};
|
||||
--msp-accent-text: #{getColor("base")};
|
||||
|
||||
--msp-primary: #{getColor("teal")};
|
||||
--msp-primary-text: #{getColor("base")};
|
||||
|
||||
--msp-secondary: #{getColor("mauve")};
|
||||
--msp-secondary-text: #{getColor("base")};
|
||||
|
||||
--msp-danger: #{getColor("red")};
|
||||
--msp-danger-text: #{getColor("base")};
|
||||
|
||||
--msp-disabled: #{getColor("red")};
|
||||
--msp-disabled-text: rgba(#{getColor("raw")}, 0.5);
|
||||
|
||||
--msp-input: #{getColor("text")};
|
||||
--msp-input-text: #{getColor("base")};
|
||||
@each $variable, $value in $msp-colors {
|
||||
#{$variable}: #{$value};
|
||||
}
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
#{$variable}: #{$value};
|
||||
}
|
||||
|
||||
--msp-border-radius: #{$border-radius};
|
||||
// ── Borders ─────────────────────────────────────────────────────────────
|
||||
--msp-border-width: 1px;
|
||||
--msp-border-color: var(--msp-color-bg-transparent);
|
||||
--msp-border-style: solid;
|
||||
--msp-border-radius: 0.2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
@use "./tokens" as *;
|
||||
@use "./mixins";
|
||||
|
||||
.position-fixed {
|
||||
.msp-position-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.position-sticky {
|
||||
.msp-position-sticky {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
.msp-d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
.msp-d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
.msp-d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
.msp-visually-hidden {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
|
|
@ -35,46 +35,46 @@
|
|||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.d-#{$breakpoint}-none {
|
||||
.msp-d-#{$breakpoint}-none {
|
||||
display: none;
|
||||
}
|
||||
.d-#{$breakpoint}-block {
|
||||
.msp-d-#{$breakpoint}-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-#{$breakpoint}-flex {
|
||||
.msp-d-#{$breakpoint}-flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
.msp-flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
.msp-flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row {
|
||||
.msp-flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-column {
|
||||
.msp-flex-#{$breakpoint}-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-#{$breakpoint}-row {
|
||||
.msp-flex-#{$breakpoint}-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hstack {
|
||||
.msp-hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hstack-reverse {
|
||||
.msp-hstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
|
|
@ -82,63 +82,63 @@
|
|||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
.msp-vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vstack-reverse {
|
||||
.msp-vstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
.msp-flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
.msp-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-nowrap {
|
||||
.msp-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-wrap {
|
||||
.msp-flex-#{$breakpoint}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-#{$breakpoint}-nowrap {
|
||||
.msp-flex-#{$breakpoint}-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
.msp-flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
.msp-justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
.msp-justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
.msp-justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
.msp-align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.msp-grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
--prj-min-col-width: 150px;
|
||||
|
|
@ -152,81 +152,81 @@
|
|||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} {
|
||||
.msp-grid-cols-#{$i} {
|
||||
@include grid-cols($i);
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(1, 12) using ($breakpoint, $index) {
|
||||
.grid-#{$breakpoint}-cols-#{$index} {
|
||||
.msp-grid-#{$breakpoint}-cols-#{$index} {
|
||||
@include grid-cols($index);
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyle {
|
||||
.msp-list-unstyle {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
.msp-text-justify {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
.msp-text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
.msp-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
.msp-text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
.msp-align-start {
|
||||
vertical-align: start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
.msp-align-center {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
.msp-align-end {
|
||||
vertical-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
.msp-overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-scroll {
|
||||
.msp-overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.overflow-y-scroll {
|
||||
.msp-overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
.msp-w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.h-auto {
|
||||
.msp-h-auto {
|
||||
height: auto;
|
||||
}
|
||||
@for $i from 0 through 100 {
|
||||
.w-#{$i} {
|
||||
.msp-w-#{$i} {
|
||||
width: percentage(calc($i / 100));
|
||||
}
|
||||
.h-#{$i} {
|
||||
.msp-h-#{$i} {
|
||||
height: percentage(calc($i / 100));
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
|
||||
.w-#{$breakpoint}-#{$index} {
|
||||
.msp-w-#{$breakpoint}-#{$index} {
|
||||
width: percentage(calc($index / 100));
|
||||
}
|
||||
|
||||
.h-#{$breakpoint}-#{$index} {
|
||||
.msp-h-#{$breakpoint}-#{$index} {
|
||||
height: percentage(calc($index / 100));
|
||||
}
|
||||
}
|
||||
|
|
@ -236,54 +236,54 @@
|
|||
$name: "#{$breakpoint}-#{$name}";
|
||||
}
|
||||
|
||||
.m-#{$name} {
|
||||
.msp-m-#{$name} {
|
||||
margin: $value !important;
|
||||
}
|
||||
.mx-#{$name} {
|
||||
.msp-mx-#{$name} {
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.my-#{$name} {
|
||||
.msp-my-#{$name} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.mt-#{$name} {
|
||||
.msp-mt-#{$name} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
.mb-#{$name} {
|
||||
.msp-mb-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.ml-#{$name} {
|
||||
.msp-ml-#{$name} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.mr-#{$name} {
|
||||
.msp-mr-#{$name} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.p-#{$name} {
|
||||
.msp-p-#{$name} {
|
||||
padding: $value !important;
|
||||
}
|
||||
.px-#{$name} {
|
||||
.msp-px-#{$name} {
|
||||
padding-left: $value !important;
|
||||
padding-right: $value !important;
|
||||
}
|
||||
.py-#{$name} {
|
||||
.msp-py-#{$name} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pt-#{$name} {
|
||||
.msp-pt-#{$name} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
.pb-#{$name} {
|
||||
.msp-pb-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pl-#{$name} {
|
||||
.msp-pl-#{$name} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.pr-#{$name} {
|
||||
.msp-pr-#{$name} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.gap-#{$name} {
|
||||
.msp-gap-#{$name} {
|
||||
--prj-gap: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
@ -300,30 +300,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.shadow-0 {
|
||||
.msp-shadow-0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shadow-1 {
|
||||
.msp-shadow-1 {
|
||||
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
.msp-border-radius {
|
||||
border-radius: var(--prj-border-radius);
|
||||
}
|
||||
|
||||
.text-none {
|
||||
.msp-text-none {
|
||||
text-transform: none;
|
||||
}
|
||||
.text-capitalize {
|
||||
.msp-text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.text-uppercase {
|
||||
.msp-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
.msp-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-lowercase {
|
||||
.msp-text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
|
|||
217
packages/core/src/components/form.scss
Normal file
217
packages/core/src/components/form.scss
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
@use "../tokens" as *;
|
||||
@use "../mixins";
|
||||
@use "sass:color";
|
||||
@use "sass:string";
|
||||
|
||||
fieldset:not(.msp-fieldset-border) {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
fieldset.msp-fieldset-border {
|
||||
padding: var(--msp-spacing-2);
|
||||
margin: 0;
|
||||
border-radius: var(--msp-border-radius);
|
||||
border: var(--msp-border-width) var(--msp-border-style) var(--msp-color-text);
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
select,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(
|
||||
[type="range"]
|
||||
) {
|
||||
display: block;
|
||||
border-radius: var(--msp-border-radius);
|
||||
border: var(--msp-border-width) var(--msp-border-style)
|
||||
var(--msp-border-color);
|
||||
width: 100%;
|
||||
background-color: var(--msp-color-bg-input);
|
||||
color: var(--msp-color-text-input);
|
||||
|
||||
padding: var(--msp-spacing-1);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
display: inline-block;
|
||||
margin-bottom: initial;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
float: left;
|
||||
background-color: var(--msp-color-bg-input);
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
border-radius: var(--msp-border-radius);
|
||||
border: var(--msp-border-width) var(--msp-border-style)
|
||||
var(--msp-border-bg-input);
|
||||
background-color: var(--msp-color-bg-input);
|
||||
background-image: var(--msp-form-check-bg-image);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
$size: 0.75rem;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
margin-top: 0.425rem;
|
||||
margin-right: var(--msp-spacing-1);
|
||||
|
||||
&:checked {
|
||||
background-color: var(--msp-color-bg-checkbox);
|
||||
border-color: var(--msp-color-bg-checkbox);
|
||||
|
||||
$stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
|
||||
--msp-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
float: left;
|
||||
background-color: var(--msp-color-bg-input);
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
border-radius: 50%;
|
||||
border: var(--msp-border-width) var(--msp-border-style)
|
||||
var(--msp-border-bg-input);
|
||||
background-color: var(--msp-color-bg-input);
|
||||
background-image: var(--msp-form-check-bg-image);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
$size: 0.75rem;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
margin-top: 0.425rem;
|
||||
margin-right: var(--msp-spacing-1);
|
||||
|
||||
&:checked {
|
||||
background-color: var(--msp-color-bg-checkbox);
|
||||
border-color: var(--msp-color-bg-checkbox);
|
||||
|
||||
$fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
|
||||
--msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
border-radius: var(--msp-border-radius);
|
||||
border: var(--msp-border-width) var(--msp-border-style)
|
||||
var(--msp-color-bg-input);
|
||||
padding: var(--msp-spacing-1);
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
background-color: var(--msp-color-bg-input);
|
||||
|
||||
&::-moz-color-swatch {
|
||||
padding: var(--msp-spacing-1);
|
||||
border-radius: var(--msp-border-radius);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
background-color: transparent;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
// color: var(--msp-color-text-input);
|
||||
|
||||
border-color: transparent;
|
||||
&::-moz-range-thumb {
|
||||
background-color: var(--msp-color-text-range);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
background-color: var(--msp-color-bg-range);
|
||||
color: transparent;
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--msp-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
input:disabled::placeholder,
|
||||
input::placeholder,
|
||||
select:disabled,
|
||||
option:disabled {
|
||||
opacity: 1;
|
||||
color: var(--msp-color-text-input-disabled);
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background: var(--msp-color-bg-disabled);
|
||||
}
|
||||
|
||||
.form-control[type="file"] {
|
||||
&:not(:disabled):not([readonly]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@include mixins.hover-darker;
|
||||
|
||||
&.form-control::file-selector-button {
|
||||
background-color: inherit;
|
||||
padding-right: var(--msp-spacing-2);
|
||||
margin-right: var(--msp-spacing-2);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: var(--msp-border-width);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-form-text-help {
|
||||
margin-top: var(--msp-spacing-1);
|
||||
font-size: 0.875em;
|
||||
color: var(--msp-color-text-disabled);
|
||||
}
|
||||
|
||||
[type="submit"]:not(:disabled),
|
||||
button:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: var(--msp-spacing-1) var(--msp-spacing-2);
|
||||
background: var(--msp-color-bg-btn);
|
||||
font-size: 1rem;
|
||||
color: var(--msp-color-text-btn);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: var(--msp-border-width) var(--msp-border-style)
|
||||
var(--msp-color-bg-btn);
|
||||
border-radius: var(--msp-border-radius);
|
||||
|
||||
@include mixins.hover-darker;
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
@use "./reset";
|
||||
@use "./tokens.scss" as *;
|
||||
@use "./utils.scss";
|
||||
@use "./animations.scss";
|
||||
@use "./mixins";
|
||||
|
||||
@use "./components/form";
|
||||
|
||||
// SASS variables are imported without namespace, but try to always use native
|
||||
// CSS variables when possible so they can be overrwritten by custom styles
|
||||
|
||||
html {
|
||||
background-color: var(--msp-bg);
|
||||
color: var(--msp-text);
|
||||
background-color: var(--msp-color-bg);
|
||||
color: var(--msp-color-text);
|
||||
|
||||
/* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
|
||||
font-size: calc(15px + 0.390625vw);
|
||||
|
|
@ -23,8 +25,8 @@ body > main {
|
|||
section:not(.clean) {
|
||||
/* outline: 1px solid var(--msp-accent-bg); */
|
||||
padding: var(--msp-spacing-3);
|
||||
background-color: var(--msp-surface-1);
|
||||
box-shadow: 10px 10px 5px 0px var(--msp-shadow);
|
||||
background-color: var(--msp-color-bg-surface-1);
|
||||
box-shadow: 10px 10px 5px 0px var(--msp-color-shadow);
|
||||
border-radius: var(--msp-border-radius);
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +87,7 @@ p:last-child {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--msp-link-text);
|
||||
color: var(--msp-color-text-link);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -123,49 +125,3 @@ video.respect-height {
|
|||
li:not(:last-child) {
|
||||
margin-bottom: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--msp--primary-bg);
|
||||
color: var(--msp--primary-text);
|
||||
}
|
||||
|
||||
/* Lightgallery iframe fix */
|
||||
.lg-has-iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.lg-object {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
|
||||
var(--bg-image);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--msp-text);
|
||||
|
||||
padding: var(--msp-spacing-3);
|
||||
|
||||
.text {
|
||||
padding: var(--msp-spacing-2);
|
||||
background-color: var(--msp-bg-transparent);
|
||||
|
||||
border-radius: var(--msp-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: text-shadow 0.2s;
|
||||
--anim-shadow-color: var(--msp-accent-bg);
|
||||
|
||||
&:not(.clean):hover {
|
||||
text-shadow: 1px 1px 8px var(--anim-shadow-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue