am35a/s4

S4 - this repo is used as a researching for UI system based on Svelte/TS/SASS

s4's Issues

Need to color html/css code in the `pre`

"src/components/Precode.svelte"

Styling the range element

https://codepen.io/thebabydino/pen/qVQLzm

$track-w: 12.5em;
$track-h: .25em;
$thumb-d: 1.5em;

@mixin track() {
	box-sizing: border-box;
	border: none;
	width: $track-w; height: $track-h;
	background: #ccc;
}

@mixin thumb() {
	box-sizing: border-box;
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: #f90;
}

[type='range'] {
	&, &::-webkit-slider-thumb {
		-webkit-appearance: none;
	}
	
	margin: 0;
	padding: 0;
	width: $track-w; height: $thumb-d;
	background: transparent;
	font: 1em/1 arial, sans-serif;
	
	&::-webkit-slider-runnable-track {
		@include track
	}
	&::-moz-range-track { @include track }
	&::-ms-track { @include track }
	
	&::-webkit-slider-thumb {
		margin-top: .5*($track-h - $thumb-d);
		@include thumb
	}
	&::-moz-range-thumb { @include thumb }
	&::-ms-thumb {
		margin-top: 0;
		@include thumb
	}
	
	&::-ms-tooltip { display: none }
}

add custom transparency

controversial decision for transparency
--positive-color: 0 0% 100%
background-color: hsl(var(--positive-color) / var(--bgc-alfa, 1)) !important

Make to short names of utilities

key-name: value = kn-v

align = va
align-content = ac
align-items = ai
align-self = as
justify-content = jc
justify-items = ji
justify-self = js

-positive = -po
-negative = -ne
-primary = -pr
-secondary = -se
-info = -in
-success = -sг
-warning = -wa
-error = -er

border = s (stroke) / b
padding = p
margin = m

-left = -l
-top = -t
-right = -r
-bottom = -b

rounded = radius = r (a, o)

-circle = -c
-pill = -p

custom imput + pills

Font size and the ability to change it

--key-size + --fs-offset

--fs-h1: --key-size * --h1 + --fs-offset

from --fs-xxs to --fs-h1

Need to experiments with transparent button types

.btn-transparent {
// try to invert default background and font color
}

:empty

have to add display: none for :empty elements

:hover

need for elements which have to recolor
hover:bgc-...

add import and screen for desktop resolutions

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
@import url("narrow.css") supports(display: flex) screen and (max-width: 400px);

redesign theme sets

all auto css params make as default

example:
.w-auto { width: auto !important; }
to
.w { width: var(--w, auto) !important; }