diff --git a/.stylelintrc.json b/.stylelintrc.json
index 0e5f5c42a3a49fc446cfa4bba3e972b13830bb9a..8abde042594e97ef27ad1b39bd82282624aea052 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -53,7 +53,9 @@
"scss/at-mixin-pattern": null,
"scss/dollar-variable-empty-line-before": null,
"scss/dollar-variable-pattern": null,
- "scss/double-slash-comment-empty-line-before": null
+ "scss/double-slash-comment-empty-line-before": null,
+ "scss/function-unquote-no-unquoted-strings-inside": null,
+ "scss/no-global-function-names": null
},
"ignoreFiles": [
"resource/assets/stylesheets/jquery-ui.structure.css",
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index e4d8766e7629b5b806543801e337702b207e87ad..cb6bce67e66fce8c51d6d7ba9cf516f28f0e6b69 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
// if you like, change this (your brand color)
$base-color: #28497c; // #28497c
@@ -8,28 +6,28 @@ $base-color: #28497c; // #28497c
// $base-gray: #3c454e; // #3c454e
// calculated base gray
$base-gray: hsl(
- color.hue($base-color),
- color.saturation(#3c454e),
- color.lightness(#3c454e)
+ hue($base-color),
+ saturation(#3c454e),
+ lightness(#3c454e)
);
$brand-color-dark: $base-color;
$brand-color-darker: hsl(
- color.hue($base-color),
- (color.saturation($base-color) + 5.4%),
- (color.lightness($base-color) - 4%)
+ hue($base-color),
+ (saturation($base-color) + 5.4%),
+ (lightness($base-color) - 4%)
); // #1f3f70;
$brand-color-light: hsl(
- color.hue($base-color),
- (color.saturation($base-color) - 6%),
- (color.lightness($base-color) + 6.5%)
+ hue($base-color),
+ (saturation($base-color) - 6%),
+ (lightness($base-color) + 6.5%)
); // #36598f;
$brand-color-lighter: hsl(
- (color.hue($base-color) + 2.5),
- (color.saturation($base-color) - 25.5%),
- (color.lightness($base-color) + 31%)
+ (hue($base-color) + 2.5),
+ (saturation($base-color) - 25.5%),
+ (lightness($base-color) + 31%)
); // #899ab9;
/* This code calculates another activity color in case you dont wanna stick with red
@@ -44,29 +42,29 @@ $white: #fff;
// Default studip base color
$origin-base-color: #28497c; // #28497c
-$base-color-80: color.mix($base-color, #fff, 80%); // #536d96
-$base-color-60: color.mix($base-color, #fff, 60%); // #7e92b0
-$base-color-40: color.mix($base-color, #fff, 40%); // #a9b6cb
-$base-color-20: color.mix($base-color, #fff, 20%); // #d4dbe5
+$base-color-80: mix($base-color, #fff, 80%); // #536d96
+$base-color-60: mix($base-color, #fff, 60%); // #7e92b0
+$base-color-40: mix($base-color, #fff, 40%); // #a9b6cb
+$base-color-20: mix($base-color, #fff, 20%); // #d4dbe5
$content-color: $brand-color-lighter;
-$content-color-80: color.mix($content-color, #fff, 80%); // #a1aec7
-$content-color-60: color.mix($content-color, #fff, 60%); // #b8c2d5
-$content-color-40: color.mix($content-color, #fff, 40%); // #d0d7e3
-$content-color-20: color.mix($content-color, #fff, 20%); // #e7ebf1
-$content-color-10: color.mix($content-color, #fff, 10%); // #e7ebf1
+$content-color-80: mix($content-color, #fff, 80%); // #a1aec7
+$content-color-60: mix($content-color, #fff, 60%); // #b8c2d5
+$content-color-40: mix($content-color, #fff, 40%); // #d0d7e3
+$content-color-20: mix($content-color, #fff, 20%); // #e7ebf1
+$content-color-10: mix($content-color, #fff, 10%); // #e7ebf1
$dark-gray-color: $base-gray;
-$dark-gray-color-80: color.mix($dark-gray-color, #fff, 80%); // #636a71
-$dark-gray-color-75: color.mix($dark-gray-color, #fff, 75%); // #6c737a
-$dark-gray-color-60: color.mix($dark-gray-color, #fff, 60%); // #898f94
-$dark-gray-color-45: color.mix($dark-gray-color, #fff, 45%); // #a7abaf
-$dark-gray-color-40: color.mix($dark-gray-color, #fff, 40%); // #b1b5b8
-$dark-gray-color-30: color.mix($dark-gray-color, #fff, 30%); // #c4c7c9
-$dark-gray-color-20: color.mix($dark-gray-color, #fff, 20%); // #d8dadc
-$dark-gray-color-15: color.mix($dark-gray-color, #fff, 15%); // #e1e3e4
-$dark-gray-color-10: color.mix($dark-gray-color, #fff, 10%); // #ebeced
-$dark-gray-color-5: color.mix($dark-gray-color, #fff, 5%); // #f5f5f6
+$dark-gray-color-80: mix($dark-gray-color, #fff, 80%); // #636a71
+$dark-gray-color-75: mix($dark-gray-color, #fff, 75%); // #6c737a
+$dark-gray-color-60: mix($dark-gray-color, #fff, 60%); // #898f94
+$dark-gray-color-45: mix($dark-gray-color, #fff, 45%); // #a7abaf
+$dark-gray-color-40: mix($dark-gray-color, #fff, 40%); // #b1b5b8
+$dark-gray-color-30: mix($dark-gray-color, #fff, 30%); // #c4c7c9
+$dark-gray-color-20: mix($dark-gray-color, #fff, 20%); // #d8dadc
+$dark-gray-color-15: mix($dark-gray-color, #fff, 15%); // #e1e3e4
+$dark-gray-color-10: mix($dark-gray-color, #fff, 10%); // #ebeced
+$dark-gray-color-5: mix($dark-gray-color, #fff, 5%); // #f5f5f6
$light-gray-color: $dark-gray-color-75;
$light-gray-color-80: $dark-gray-color-60;
@@ -77,58 +75,58 @@ $light-gray-color-20: $dark-gray-color-15;
// colors. a lot of.
$yellow: #ffbd33;
-$yellow-80: color.mix($yellow, #fff, 80%); // #ffca5c
-$yellow-60: color.mix($yellow, #fff, 60%); // #ffd785
-$yellow-40: color.mix($yellow, #fff, 40%); // #ffe4ad
-$yellow-20: color.mix($yellow, #fff, 20%); // #fff2d6
+$yellow-80: mix($yellow, #fff, 80%); // #ffca5c
+$yellow-60: mix($yellow, #fff, 60%); // #ffd785
+$yellow-40: mix($yellow, #fff, 40%); // #ffe4ad
+$yellow-20: mix($yellow, #fff, 20%); // #fff2d6
$orange: #f26e00;
-$orange-80: color.mix($orange, #fff, 80%); // #f58b33
-$orange-60: color.mix($orange, #fff, 60%); // #f7a866
-$orange-40: color.mix($orange, #fff, 40%); // #fac599
-$orange-20: color.mix($orange, #fff, 20%); // #fce2cc
+$orange-80: mix($orange, #fff, 80%); // #f58b33
+$orange-60: mix($orange, #fff, 60%); // #f7a866
+$orange-40: mix($orange, #fff, 40%); // #fac599
+$orange-20: mix($orange, #fff, 20%); // #fce2cc
$red: #d60000;
-$red-80: color.mix($red, #fff, 80%); // #de3333
-$red-60: color.mix($red, #fff, 60%); // #e76666
-$red-40: color.mix($red, #fff, 40%); // #ef9999
-$red-20: color.mix($red, #fff, 20%); // #f7cccc
+$red-80: mix($red, #fff, 80%); // #de3333
+$red-60: mix($red, #fff, 60%); // #e76666
+$red-40: mix($red, #fff, 40%); // #ef9999
+$red-20: mix($red, #fff, 20%); // #f7cccc
$violet: #b02e7c;
-$violet-80: color.mix($violet, #fff, 80%); // #c05896
-$violet-60: color.mix($violet, #fff, 60%); // #d082b0
-$violet-40: color.mix($violet, #fff, 40%); // #dfabcb
-$violet-20: color.mix($violet, #fff, 20%); // #efd5e5
+$violet-80: mix($violet, #fff, 80%); // #c05896
+$violet-60: mix($violet, #fff, 60%); // #d082b0
+$violet-40: mix($violet, #fff, 40%); // #dfabcb
+$violet-20: mix($violet, #fff, 20%); // #efd5e5
$dark-violet: #682c8b;
-$dark-violet-80: color.mix($dark-violet, #fff, 80%); // #8656a2
-$dark-violet-60: color.mix($dark-violet, #fff, 60%); // #a480b9
-$dark-violet-40: color.mix($dark-violet, #fff, 40%); // #c2aad0
-$dark-violet-20: color.mix($dark-violet, #fff, 20%); // #e0d4e7
+$dark-violet-80: mix($dark-violet, #fff, 80%); // #8656a2
+$dark-violet-60: mix($dark-violet, #fff, 60%); // #a480b9
+$dark-violet-40: mix($dark-violet, #fff, 40%); // #c2aad0
+$dark-violet-20: mix($dark-violet, #fff, 20%); // #e0d4e7
$green: #6ead10;
-$green-80: color.mix($green, #fff, 80%); // #8bbd40
-$green-60: color.mix($green, #fff, 60%); // #a8ce70
-$green-40: color.mix($green, #fff, 40%); // #c5dea0
-$green-20: color.mix($green, #fff, 20%); // #e2efcf
+$green-80: mix($green, #fff, 80%); // #8bbd40
+$green-60: mix($green, #fff, 60%); // #a8ce70
+$green-40: mix($green, #fff, 40%); // #c5dea0
+$green-20: mix($green, #fff, 20%); // #e2efcf
$dark-green: #008512;
-$dark-green-80: color.mix($dark-green, #fff, 80%); // #339d41
-$dark-green-60: color.mix($dark-green, #fff, 60%); // #66b570
-$dark-green-40: color.mix($dark-green, #fff, 40%); // #99cea0
-$dark-green-20: color.mix($dark-green, #fff, 20%); // #cce6cf
+$dark-green-80: mix($dark-green, #fff, 80%); // #339d41
+$dark-green-60: mix($dark-green, #fff, 60%); // #66b570
+$dark-green-40: mix($dark-green, #fff, 40%); // #99cea0
+$dark-green-20: mix($dark-green, #fff, 20%); // #cce6cf
$petrol: #0E817B; // old #129c94;
-$petrol-80: color.mix($petrol, #fff, 80%); // #41afaa
-$petrol-60: color.mix($petrol, #fff, 60%); // #70c3bf
-$petrol-40: color.mix($petrol, #fff, 40%); // #a0d7d4
-$petrol-20: color.mix($petrol, #fff, 20%); // #cfebe9
+$petrol-80: mix($petrol, #fff, 80%); // #41afaa
+$petrol-60: mix($petrol, #fff, 60%); // #70c3bf
+$petrol-40: mix($petrol, #fff, 40%); // #a0d7d4
+$petrol-20: mix($petrol, #fff, 20%); // #cfebe9
$brown: #a85d45;
-$brown-80: color.mix($brown, #fff, 80%); // #b97d6a
-$brown-60: color.mix($brown, #fff, 60%); // #ca9eaf
-$brown-40: color.mix($brown, #fff, 40%); // #dcbeb4
-$brown-20: color.mix($brown, #fff, 20%); // #edded9
+$brown-80: mix($brown, #fff, 80%); // #b97d6a
+$brown-60: mix($brown, #fff, 60%); // #ca9eaf
+$brown-40: mix($brown, #fff, 40%); // #dcbeb4
+$brown-20: mix($brown, #fff, 20%); // #edded9
// contrast colors
$contrast-content-white: text-contrast($content-color, #ffffff, #000000);
@@ -143,10 +141,10 @@ $table-footer-color: $dark-gray-color-15;
$active-color: $red;
$activity-color: $yellow;
-$activity-color-80: color.mix($activity-color, #fff, 80%); // #ffca5c
-$activity-color-60: color.mix($activity-color, #fff, 60%); // #ffd785
-$activity-color-40: color.mix($activity-color, #fff, 40%); // #ffe4ad
-$activity-color-20: color.mix($activity-color, #fff, 20%); // #fff2d6
+$activity-color-80: mix($activity-color, #fff, 80%); // #ffca5c
+$activity-color-60: mix($activity-color, #fff, 60%); // #ffd785
+$activity-color-40: mix($activity-color, #fff, 40%); // #ffe4ad
+$activity-color-20: mix($activity-color, #fff, 20%); // #fff2d6
// Group colors (for my courses grouping)
$group-color-0: $dark-violet;
@@ -316,12 +314,12 @@ $color--shadow: $color--gray-4;
$color--focus: $color--gray-4;
$color--warning: $color--red-1;
-$color--warning-alternative: color.mix($color--warning, $color--white, 20%);
+$color--warning-alternative: mix($color--warning, $color--white, 20%);
$color--attention: $color--yellow-1;
-$color--attention-alternative: color.mix($color--attention, $color--white, 20%);
+$color--attention-alternative: mix($color--attention, $color--white, 20%);
$color--good: $color--green-1;
-$color--good-alternative: color.mix($color--good, $color--white, 20%);
+$color--good-alternative: mix($color--good, $color--white, 20%);
$color--info: $color--blue-2;
-$color--info-alternative: color.mix($color--info, $color--white, 20%);
+$color--info-alternative: mix($color--info, $color--white, 20%);
$color-image-placeholder-background: $color--gray-6;
diff --git a/resources/assets/stylesheets/mixins/misc.scss b/resources/assets/stylesheets/mixins/misc.scss
index 58e68d8d995fa39e2713c456de950984c0784637..1fe9d0883aacedaaf208c7579086ce5174e290ab 100644
--- a/resources/assets/stylesheets/mixins/misc.scss
+++ b/resources/assets/stylesheets/mixins/misc.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
@@ -29,12 +27,12 @@
// https://codepen.io/kennyglenn/pen/kxqWjP
@function text-contrast($color, $dark, $light, $threshold: 51) {
- @return if(color.lightness($color) < $threshold, $light, $dark)
+ @return if(lightness($color) < $threshold, $light, $dark)
}
@mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
- background-color: color.mix($midColor, $endColor, 80%);
+ background-color: mix($midColor, $endColor, 80%);
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 2196a86ce7e638408a6f5ebe9d7d999d11e9150d..d45d9f8e5f3082057528179f248e902db80052fe 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "sass:math";
-@use "sass:string";
-
/**
* studip-mixins.less
*
@@ -49,8 +45,8 @@
}
@function icon-path($icon, $role: clickable) {
- $icon: string.unquote($icon);
- $role: string.unquote($role);
+ $icon: unquote($icon);
+ $role: unquote($role);
$color: 'blue';
@if $role == info {
@@ -71,7 +67,7 @@
}
@function icon-size($size) {
- @if math.is-unitless($size) {
+ @if unitless($size) {
@warn "Assuming icon size to be in pixels";
$size: $size * 1px;
}
@@ -184,7 +180,7 @@
background-position: calc(50% - 100px) calc(50% + 40px);
@if $background-color {
- background-color: color.mix($background-color, rgba(255, 255, 255, 0), 70%);
+ background-color: mix($background-color, rgba(255, 255, 255, 0), 70%);
}
text-align: center;
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 80101bb7e1ef090d3af808b62733415bd144605e..52420a8a8c5af42b7f377e982af8cf9de304663a 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
.blubber_panel {
display: flex;
align-items: stretch;
@@ -166,7 +164,7 @@
.empty_blubber_background {
@include empty-placeholder-image('blubber');
- background-color: color.mix($dark-gray-color-5, rgba(255, 255, 255, 0), 70%);
+ background-color: mix($dark-gray-color-5, rgba(255, 255, 255, 0), 70%);
> :first-child {
position: relative;
diff --git a/resources/assets/stylesheets/scss/calendar.scss b/resources/assets/stylesheets/scss/calendar.scss
index 8f89cef237c5c924eac24852691d20aff4a3ff13..17093e23de3c768397a5499d203bb8d175069c39 100644
--- a/resources/assets/stylesheets/scss/calendar.scss
+++ b/resources/assets/stylesheets/scss/calendar.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
.fc-body {
.fc-event {
@@ -13,10 +11,10 @@
&.course-color-0 {
border-color: $group-color-0;
- background-color: color.adjust($group-color-0, $lightness: 45%);
+ background-color: lighten($group-color-0, 45%);
&:hover {
- background-color: color.adjust($group-color-0, $lightness: 50%);
+ background-color: lighten($group-color-0, 50%);
}
.fc-time {
@@ -26,10 +24,10 @@
&.course-color-1 {
border-color: $group-color-1;
- background-color: color.adjust($group-color-1, $lightness: 45%);
+ background-color: lighten($group-color-1, 45%);
&:hover {
- background-color: color.adjust($group-color-1, $lightness: 50%);
+ background-color: lighten($group-color-1, 50%);
}
.fc-time {
@@ -39,10 +37,10 @@
&.course-color-2 {
border-color: $group-color-2;
- background-color: color.adjust($group-color-2, $lightness: 45%);;
+ background-color: lighten($group-color-2, 45%);;
&:hover {
- background-color: color.adjust($group-color-2, $lightness: 50%);;
+ background-color: lighten($group-color-2, 50%);;
}
.fc-time {
@@ -52,10 +50,10 @@
&.course-color-3 {
border-color: $group-color-3;
- background-color: color.adjust($group-color-3, $lightness: 45%);;
+ background-color: lighten($group-color-3, 45%);;
&:hover {
- background-color: color.adjust($group-color-3, $lightness: 50%);;
+ background-color: lighten($group-color-3, 50%);;
}
.fc-time {
@@ -65,10 +63,10 @@
&.course-color-4 {
border-color: $group-color-4;
- background-color: color.adjust($group-color-4, $lightness: 45%);;
+ background-color: lighten($group-color-4, 45%);;
&:hover {
- background-color: color.adjust($group-color-4, $lightness: 50%);;
+ background-color: lighten($group-color-4, 50%);;
}
.fc-time {
@@ -78,10 +76,10 @@
&.course-color-5 {
border-color: $group-color-5;
- background-color: color.adjust($group-color-5, $lightness: 45%);;
+ background-color: lighten($group-color-5, 45%);;
&:hover {
- background-color: color.adjust($group-color-5, $lightness: 50%);;
+ background-color: lighten($group-color-5, 50%);;
}
.fc-time {
@@ -91,10 +89,10 @@
&.course-color-6 {
border-color: $group-color-6;
- background-color: color.adjust($group-color-6, $lightness: 45%);;
+ background-color: lighten($group-color-6, 45%);;
&:hover {
- background-color: color.adjust($group-color-6, $lightness: 50%);;
+ background-color: lighten($group-color-6, 50%);;
}
.fc-time {
@@ -104,10 +102,10 @@
&.course-color-7 {
border-color: $group-color-7;
- background-color: color.adjust($group-color-7, $lightness: 45%);;
+ background-color: lighten($group-color-7, 45%);;
&:hover {
- background-color: color.adjust($group-color-7, $lightness: 50%);;
+ background-color: lighten($group-color-7, 50%);;
}
.fc-time {
@@ -117,10 +115,10 @@
&.course-color-8 {
border-color: $group-color-8;
- background-color: color.adjust($group-color-8, $lightness: 45%);;
+ background-color: lighten($group-color-8, 45%);;
&:hover {
- background-color: color.adjust($group-color-8, $lightness: 50%);;
+ background-color: lighten($group-color-8, 50%);;
}
.fc-time {
diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index c41c09b281fcd4da219789c79100329e67ea3c8f..46fe3dd25fe5ae9fde91ba4e046ac844bf0ebe98 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -1,5 +1,4 @@
@use '../../mixins' as *;
-@use "sass:map";
@import './variables';
#course-courseware-index,
@@ -81,53 +80,53 @@
.cw-structural-element-color {
color: var(--white);
&.black {
- background-color: map.get($tile-colors, 'black');
+ background-color: map-get($tile-colors, 'black');
}
&.charcoal {
- background-color: map.get($tile-colors, 'charcoal');
+ background-color: map-get($tile-colors, 'charcoal');
}
&.royal-purple {
- background-color: map.get($tile-colors, 'royal-purple');
+ background-color: map-get($tile-colors, 'royal-purple');
}
&.iguana-green {
- background-color: map.get($tile-colors, 'iguana-green');
+ background-color: map-get($tile-colors, 'iguana-green');
}
&.queen-blue {
- background-color: map.get($tile-colors, 'queen-blue');
+ background-color: map-get($tile-colors, 'queen-blue');
}
&.verdigris {
- background-color: map.get($tile-colors, 'verdigris');
+ background-color: map-get($tile-colors, 'verdigris');
}
&.mulberry {
- background-color: map.get($tile-colors, 'mulberry');
+ background-color: map-get($tile-colors, 'mulberry');
}
&.pumpkin {
- background-color: map.get($tile-colors, 'pumpkin');
+ background-color: map-get($tile-colors, 'pumpkin');
}
&.sunglow {
- background-color: map.get($tile-colors, 'sunglow');
+ background-color: map-get($tile-colors, 'sunglow');
}
&.apple-green {
- background-color: map.get($tile-colors, 'apple-green');
+ background-color: map-get($tile-colors, 'apple-green');
}
&.studip-blue {
- background-color: map.get($tile-colors, 'studip-blue');
+ background-color: map-get($tile-colors, 'studip-blue');
}
&.studip-lightblue {
- background-color: map.get($tile-colors, 'studip-lightblue');
+ background-color: map-get($tile-colors, 'studip-lightblue');
}
&.studip-red {
- background-color: map.get($tile-colors, 'studip-red');
+ background-color: map-get($tile-colors, 'studip-red');
}
&.studip-green {
- background-color: map.get($tile-colors, 'studip-green');
+ background-color: map-get($tile-colors, 'studip-green');
}
&.studip-yellow {
- background-color: map.get($tile-colors, 'studip-yellow');
+ background-color: map-get($tile-colors, 'studip-yellow');
}
&.studip-gray {
- background-color: map.get($tile-colors, 'studip-gray');
+ background-color: map-get($tile-colors, 'studip-gray');
}
}
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index ce16092bcac5c5347072362b451b2ee27b69fce7..0ad4a27f8d0fb05158069874bc8228af3c245661 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
#quicksearch_item {
align-self: flex-start;
}
@@ -122,7 +120,7 @@
#globalsearch-input {
background-color: var(--white);
color: var(--color--font-primary);
-
+
&::placeholder {
color: var(--color--font-primary);
}
@@ -352,7 +350,7 @@ html:not(.size-large) {
right: -1px;
bottom: -1px;
left: -1px;
- background: color.mix($base-color, rgba(255,0,0,0), 50%);
+ background: mix($base-color, rgba(255,0,0,0), 50%);
z-index: 5;
pointer-events: none;
}
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 44d1951e751e8ca7264a03563712995ab07809e5..2e6ce53609e0a853650973478cd1fe66563f69c3 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
#main-header {
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -163,7 +161,7 @@
justify-content: space-between;
background-color: var(--color--main-navigation-background);
color: var(--color--font-primary);
- min-height: math.ceil($font-size-navigation2 * 2.25); // 16px * 2.25 = 36px
+ min-height: ceil($font-size-navigation2 * 2.25); // 16px * 2.25 = 36px
border-bottom: 1px solid var(--color--main-navigation-border);
padding-left: $page-margin;
padding-right: $page-margin;
diff --git a/resources/assets/stylesheets/scss/plus.scss b/resources/assets/stylesheets/scss/plus.scss
index f12f01acb3e298ff58eabf46c2589ca1c7502891..5c032cd0e6d7981a2a68ca443dcaadc27e7ab07e 100644
--- a/resources/assets/stylesheets/scss/plus.scss
+++ b/resources/assets/stylesheets/scss/plus.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
.plus {
.element_header {
display: inline-block;
@@ -47,8 +45,8 @@
width: 250px;
text-align: center;
background-color: $content-color-20;
- border-top: 1px solid color.mix($brand-color-lighter, $white, 80%);
- border-bottom: 1px solid color.mix($brand-color-lighter, $white, 80%);
+ border-top: 1px solid mix($brand-color-lighter, $white, 80%);
+ border-bottom: 1px solid mix($brand-color-lighter, $white, 80%);
}
.descriptionbox {
diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss
index b155e3dc2399d12bbd6ef2f57561183703b9eaae..e2db2b69720f4745c16628bb5a9eacf62670b35c 100644
--- a/resources/assets/stylesheets/scss/table_of_contents.scss
+++ b/resources/assets/stylesheets/scss/table_of_contents.scss
@@ -1,6 +1,4 @@
-@use "sass:color";
-
-$base-gray-color-5: color.mix($base-gray, #fff, 5%);
+$base-gray-color-5: mix($base-gray, #fff, 5%);
ul.numberedchapters {
counter-reset: section;
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index c2fa3122b9d22cd91affc1ee4db8ffd1bb930983..2c05362995ccb2ee5acd082f8c7f329fb294fc64 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
/* --- Tabellen ------------------------------------------------------------- */
// normale Tabellenheader
@@ -338,7 +336,7 @@ tr.sortable {
}
td:first-child[colspan], .divider > th, .divider > td {
- background-color: color.adjust($brand-color-lighter, $lightness: 20%);
+ background-color: lighten($brand-color-lighter, 20%);
border-bottom: 1px solid var(--color--table-border);
border-top: 1px solid var(--color--table-border);
color: var(--black);
diff --git a/resources/assets/stylesheets/scss/tree.scss b/resources/assets/stylesheets/scss/tree.scss
index 1716eb7a4277ad292c263198b083ed028c48b0bb..1d700f92eb5d1b29b85151f055abd167e56bae47 100644
--- a/resources/assets/stylesheets/scss/tree.scss
+++ b/resources/assets/stylesheets/scss/tree.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
$tree-outline: 1px solid var(--light-gray-color-40);
.studip-tree {
@@ -36,7 +34,7 @@ $tree-outline: 1px solid var(--light-gray-color-40);
.studip-tree-navigation {
background-color: var(--white);
border: 1px solid var(--content-color-40);
- box-shadow: 2px 2px color.mix($base-gray, $white, 20%);
+ box-shadow: 2px 2px mix($base-gray, $white, 20%);
right: -20px;
padding: 10px;
position: absolute;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index a31456ea0be9e91fd4a1d2f2536cfd64049f1a8e..2941fe69e3bde60a40b421dee4d844fe63b6d9dc 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -1,4 +1,3 @@
-@use "sass:math";
@import "../mixins/misc";
@import '../mixins/colors';
@@ -8,17 +7,17 @@ $text-color: #000;
$font-family-base: "Lato", sans-serif;
$font-size-base: 14px;
-$font-size-large: math.ceil($font-size-base * 1.25); // 18px
-$font-size-small: math.ceil($font-size-base * 0.85); // 12px
+$font-size-large: ceil($font-size-base * 1.25); // 18px
+$font-size-small: ceil($font-size-base * 0.85); // 12px
-$font-size-h1: math.floor($font-size-base * 1.6); // 22px
-$font-size-h2: math.ceil($font-size-base * 1.4); // 20px
-$font-size-h3: math.ceil($font-size-base * 1.1); // 16px
+$font-size-h1: floor($font-size-base * 1.6); // 22px
+$font-size-h2: ceil($font-size-base * 1.4); // 20px
+$font-size-h3: ceil($font-size-base * 1.1); // 16px
$font-size-h4: $font-size-base;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-base;
-$font-size-navigation2: math.ceil($font-size-base * 1.1); // 16px
+$font-size-navigation2: ceil($font-size-base * 1.1); // 16px
$font-size-widget-header: $font-size-large;
$font-size-caption: $font-size-h1;
@@ -26,7 +25,7 @@ $font-size-caption: $font-size-h1;
// Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429; // 20/14
// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed: math.floor($font-size-base * $line-height-base); // ~20px
+$line-height-computed: floor($font-size-base * $line-height-base); // ~20px
// By default, this inherits from the `<body>`.
$headings-font-family: inherit;