CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-09 15:54:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace SCSS compilation with CSS variables (#4191)

Browse Source 
* Replace SCSS compilation with CSS variables

* Update tests

* Update src/pretix/presale/style.py

Co-authored-by: Mira <weller@rami.io>

* Update src/pretix/presale/context.py

Co-authored-by: Mira <weller@rami.io>

* Update src/pretix/presale/views/widget.py

Co-authored-by: Mira <weller@rami.io>

* Update src/pretix/presale/context.py

Co-authored-by: Mira <weller@rami.io>

* Update src/pretix/static/pretixbase/scss/_variables.scss

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Last minor changes

* Rename file

---------

Co-authored-by: Mira <weller@rami.io>
Co-authored-by: Richard Schreiber <schreiber@rami.io>
This commit is contained in:
Raphael Michel
2024-06-25 13:01:20 +02:00
committed by GitHub
parent 7672e6274d
commit f0a06cd9fe
72 changed files with 867 additions and 1600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/pretix/static/pretixpresale/scss/_calendar.scss
View File

@@ -14,11 +14,11 @@
}
a.event {
display: block;
background: lighten($brand-primary, 48%);
background: var(--pretix-brand-primary-lighten-48);
color: $brand-primary;
border-radius: $border-radius-base;
border-style: solid;
border-color: lighten($brand-primary, 30%);
border-color: var(--pretix-brand-primary-lighten-30);
border-width: 1px 1px 1px 12px;
border-left-color: inherit;
@@ -29,7 +29,7 @@
text-decoration: none;
&:hover {
background: lighten($brand-primary, 50%);
background: var(--pretix-brand-primary-lighten-50);
border-color: $brand-primary;
}
&:focus {
@@ -48,28 +48,28 @@
}
&.soon {
background: lighten($brand-primary, 53%);
border-color: lighten($brand-primary, 40%);
border-left-color: lighten($brand-primary, 20%);
color: lighten($brand-primary, 5%);
background: var(--brand-primary-lighten-53);
border-color: var(--brand-primary-lighten-40);
border-left-color: var(--brand-primary-lighten-20);
color: var(--brand-primary-lighten-5);
&:hover {
background: lighten($brand-primary, 55%);
border-color: lighten($brand-primary, 20%);
background: var(--brand-primary-lighten-55);
border-color: var(--brand-primary-lighten-20);
}
}
&.available {
background: lighten($brand-success, 48%);
border-color: lighten($brand-success, 30%);
background: var(--brand-success-lighten-48);
border-color: var(--brand-success-lighten-30);
border-left-color: $brand-success;
color: darken($brand-success, 12%);
color: var(--brand-success-darken-12);
&.low {
border-left-color: lighten($brand-warning, 12%);
border-left-color: var(--brand-warning-lighten-12);
}
&:hover {
background: lighten($brand-success, 50%);
background: var(--brand-success-lighten-50);
border-color: $brand-success;
&.low {
@@ -79,26 +79,26 @@
}
&.waitinglist {
background: lighten($brand-warning, 41%);
border-color: lighten($brand-warning, 30%);
border-left-color: lighten($brand-warning, 12%);
background: var(--brand-warning-lighten-41);
border-color: var(--brand-warning-lighten-31);
border-left-color: var(--brand-warning-lighten-12);
color: #963;
&:hover {
background: lighten($brand-warning, 43%);
background: var(--brand-warning-lighten-43);
border-color: $brand-warning;
}
}
&.reserved, &.soldout, {
background: lighten($brand-danger, 43%);
border-color: lighten($brand-danger, 30%);
border-left-color: lighten($brand-danger, 30%);
color: darken($brand-danger, 5%);
background: var(--brand-danger-lighten-43);
border-color: var(--brand-danger-lighten-30);
border-left-color: var(--brand-danger-lighten-30);
color: var(--brand-danger-darken-5);
&:hover {
background: lighten($brand-danger, 45%);
border-color: lighten($brand-danger, 25%);
background: var(--brand-danger-lighten-45);
border-color: var(--brand-danger-lighten-25);
}
}
@@ -481,7 +481,7 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
color: white;
}
.table-calendar td.day.has-events:hover {
background: darken($brand-primary, 15%);
background: var(--brand-primary-darken-15);
}
}
#monthselform .row {

2
src/pretix/static/pretixpresale/scss/_event.scss
View File

@@ -282,7 +282,7 @@ h2.subevent-head {
background: $brand-success;
}
.slider-handle {
@include slider_background-image($brand-success, darken($brand-success, 5%), mix($brand-success, darken($brand-success, 5%)));
@include slider_background-image($brand-success, var(--pretix-brand-success-darken-5), $brand-success);
}
.slider-tick-container {

4
src/pretix/static/pretixpresale/scss/_forms.scss
View File

@@ -64,8 +64,8 @@ a.btn, button.btn {
border-color: $state-danger-text;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
&:focus, &.is-focused {
border-color: darken($state-danger-text, 10%);
$shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($state-danger-text, 20%);
border-color: $state-danger-text-hover;
$shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--pretix-brand-danger-lighten-5);
@include box-shadow($shadow);
}
}

8
src/pretix/static/pretixpresale/scss/_theme.scss
View File

@@ -1,5 +1,3 @@
@import "../../pretixbase/scss/_contrast.scss";
h1, .h1,
h2, .h2,
h3, .h3 {
@@ -38,10 +36,10 @@ h3, .h3 {
padding-top: 15px;
a:link, a:visited {
color: choose-contrast-color($body-bg, white, $link-color);
color: var(--pretix-link-contrast-color);
}
a:active, a:hover, a:focus {
color: choose-contrast-color($body-bg, white, $link-hover-color);
color: var(--pretix-link-hover-contrast-color);
}
}
@@ -130,7 +128,7 @@ footer {
}
.label-success-warning {
@include label-variant($label-success-bg);
@include label-variant($label-success-bg, $label-success-bg-hover);
padding-left: 2.5em;
position: relative;

13
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -1,8 +1,9 @@
/* before variables.scss because it only affects presale, not control */
// before variables.scss because it only affects presale, not control
$body-bg: #f5f5f5 !default;
/* imports */
@import "../../pretixbase/scss/_variables.scss";
@import "../../pretixbase/scss/_theme_variables.scss";
@import "../../pretixbase/scss/bootstrap_vars.scss";
@import "../../bootstrap/scss/_bootstrap_reduced.scss";
@import "../../pretixbase/scss/_theme.scss";
@import "../../lightbox/css/lightbox.scss";
@@ -111,8 +112,8 @@ footer nav .btn-link {
font-size: 40px;
}
a:hover .panel-primary > .panel-heading {
background-color: darken($btn-primary-bg, 10%);
border-color: darken($btn-primary-border, 12%);
background-color: var(--pretix-brand-primary-darken-10);
border-color: var(--pretix-brand-primary-darken-17);
}
.thank-you {
@@ -394,7 +395,7 @@ details.details-open .panel-title::before {
}
.panel-primary .panel-title a[data-toggle="collapse"]:hover {
background-color: darken($btn-primary-bg, 10%);
background-color: var(--pretix-brand-primary-darken-10);
}
.panel-title a.h6 {
@@ -496,7 +497,7 @@ h2 .label {
text-align: center;
}
&.availability .progress-bar-success {
background: lighten($brand-success, 20%);
background: var(--brand-success-lighten-20);
}
}

3
src/pretix/static/pretixpresale/scss/waiting.scss
View File

@@ -1,4 +1,5 @@
@import "../../pretixbase/scss/_variables.scss";
@import "../../pretixbase/scss/_theme_variables.scss";
@import "../../pretixbase/scss/_bootstrap_vars.scss";
@import "../../bootstrap/scss/_bootstrap.scss";
@import "../../pretixbase/scss/_theme.scss";
@import "../../fontawesome/scss/font-awesome.scss";

9
src/pretix/static/pretixpresale/scss/widget.scss
View File

@@ -1,4 +1,5 @@
@import "../../pretixbase/scss/_variables.scss";
// not included, will be dynamically prepended @import "../../pretixbase/scss/_theme_variables.scss";
@import "../../pretixbase/scss/_bootstrap_vars.scss";
@import "../../bootstrap/scss/bootstrap/variables";
@import "../../bootstrap/scss/bootstrap/mixins";
@@ -47,7 +48,7 @@
text-decoration: none;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
@include user-select(none);
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border, $btn-primary-background-active, $btn-primary-border-active, $btn-primary-border-hover);
&,
&:active,
@@ -66,11 +67,11 @@
@include box-shadow(none);
}
&.pretix-widget-btn-default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border, darken($btn-default-bg, 10%), darken($btn-default-border, 25%), darken($btn-default-border, 12%));
}
}
label.pretix-widget-btn-checkbox {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border, darken($btn-default-bg, 10%), darken($btn-default-border, 25%), darken($btn-default-border, 12%));
border-width: 1px;
border-style: solid;
position: relative;