davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Switch to sassc for CSS building

Browse Source 
Because https://github.com/Kronuz/pyScss/pull/426 is not yet in a
release, also just look at the diffstat!
This commit is contained in:
Kim Alvefur
2023-08-02 22:31:13 +02:00
parent 0f74b1b8f2
commit 7a4b56914c
4 changed files with 8 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile
View File

@@ -6,6 +6,7 @@ RUN set -eu; \
apt-get install -y --no-install-recommends \
python3 python3-pip python3-setuptools python3-wheel \
libpython3-dev \
sassc \
make build-essential;
COPY requirements.txt /opt/snikket-web-portal/requirements.txt

4
Makefile
View File

@@ -6,7 +6,7 @@ translation_basepath = snikket_web/translations
pot_file = $(translation_basepath)/messages.pot
PYTHON3 ?= python3
SCSSC ?= $(PYTHON3) -m scss --load-path snikket_web/scss/
SCSSC ?= sassc --load-path snikket_web/scss/
all: build_css compile_translations
@@ -14,7 +14,7 @@ build_css: $(generated_css_files)
$(generated_css_files): snikket_web/static/css/%.css: snikket_web/scss/%.scss $(scss_files) $(scss_includes)
mkdir -p snikket_web/static/css/
$(SCSSC) -o "$@" "$<"
$(SCSSC) "$<" "$@"
clean:
rm -f $(generated_css_files)

1
build-requirements.txt
View File

@@ -1,4 +1,3 @@
pyscss~=1.3
mypy
python-dotenv~=0.15
types-toml

73
snikket_web/scss/app.scss
View File

@@ -275,22 +275,22 @@ div.form.layout-expanded {
}
@each $type in $text-entry-inputs {
input[type=$type] {
input[type=#{$type}] {
width: 100%;
border: none;
border-bottom: $w-s4 solid $primary-500;
margin-bottom: -$w-s4;
}
input[type=$type].has-error {
input[type=#{$type}].has-error {
border-right: $w-s4 solid $alert-500;
}
input[type=$type]:hover {
input[type=#{$type}]:hover {
border-bottom-color: $primary-700;
}
input[type=$type]:focus {
input[type=#{$type}]:focus {
border-bottom-color: $primary-800;
}
}
@@ -646,69 +646,6 @@ input[type="submit"], button, .button {
/* button, .button {
margin: 0 $w-s2;
}
button.lv-primary, .button.lv-primary {
background-color: $gray-500;
color: $gray-900;
border-radius: $w-s4;
border: $w-s4 solid $gray-400;
@each $type, $values in $colours {
&.c-#{$type} {
border-color: nth($values, 4);
background-color: nth($values, 5);
color: nth($values, 9);
}
&.c-#{$type}:hover {
background-color: nth($values, 4);
}
}
}
button.lv-secondary, .button.lv-secondary {
background-color: $gray-700;
color: $gray-100;
border-radius: $w-s4;
@each $type, $values in $colours {
&.c-#{$type} {
background-color: nth($values, 7);
color: nth($values, 1);
}
}
}
button.lv-tertiary, .button.lv-tertiary {
background-color: inherit;
color: $gray-300;
border-radius: $w-s4;
text-decoration: underline;
@each $type, $values in $colours {
&.c-#{$type} {
color: nth($values, 3);
}
}
}
*/
/*
button.lv-secondary.c-#{$type}, .button.lv-secondary.c-#{$type} {
background-color: nth($values, 7);
color: nth($values, 1);
}
button.lv-tertiary.c-#{$type}, .button.lv-tertiary.c-#{$type} {
color: nth($values, 3);
text-decoration: underline;
background-color: transparent;
}
}*/
/* boxes */
.box {
@@ -1121,7 +1058,7 @@ pre.guru-meditation {
}
@each $type in $text-entry-inputs {
input[type=$type] {
input[type=#{$type}] {
background-color: black;
}