From f8ed858fc6306f753a828316c8ebdea7f292ded8 Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Fri, 2 Sep 2022 12:47:46 +0000
Subject: [PATCH] migrate less to scss, closes #1529
Closes #1529
Merge request studip/studip!948
---
.../assets/stylesheets/less/autocomplete.less | 31 -------
resources/assets/stylesheets/less/news.less | 93 -------------------
.../{less/badges.less => scss/badges.scss} | 14 +--
.../comments.less => scss/comments.scss} | 11 +--
.../enrolment.less => scss/enrolment.scss} | 33 +++----
.../feedback.less => scss/feedback.scss} | 11 +--
.../{less/index.less => scss/index.scss} | 37 ++------
.../overlapping.scss} | 42 +++++----
.../{less/search.less => scss/search.scss} | 67 ++++++-------
resources/assets/stylesheets/studip.less | 10 --
resources/assets/stylesheets/studip.scss | 7 ++
11 files changed, 108 insertions(+), 248 deletions(-)
delete mode 100644 resources/assets/stylesheets/less/autocomplete.less
delete mode 100644 resources/assets/stylesheets/less/news.less
rename resources/assets/stylesheets/{less/badges.less => scss/badges.scss} (75%)
rename resources/assets/stylesheets/{less/comments.less => scss/comments.scss} (66%)
rename resources/assets/stylesheets/{less/enrolment.less => scss/enrolment.scss} (76%)
rename resources/assets/stylesheets/{less/feedback.less => scss/feedback.scss} (90%)
rename resources/assets/stylesheets/{less/index.less => scss/index.scss} (76%)
rename resources/assets/stylesheets/{less/overlapping.less => scss/overlapping.scss} (64%)
rename resources/assets/stylesheets/{less/search.less => scss/search.scss} (75%)
diff --git a/resources/assets/stylesheets/less/autocomplete.less b/resources/assets/stylesheets/less/autocomplete.less
deleted file mode 100644
index 2d0df4202eb..00000000000
--- a/resources/assets/stylesheets/less/autocomplete.less
+++ /dev/null
@@ -1,31 +0,0 @@
-/* --- Autocompleter -------------------------------------------------------- */
-div.autocomplete { position: absolute; }
-
-.ac_odd { background-color: #eee; }
-.ac_over { background-color: #ffb; }
-
-.ac_results {
- background-color: white;
- border: 1px solid #888;
- margin: 0;
- padding: 0;
- position: absolute;
- z-index: 99999;
-
- ul {
- list-style: none outside none;
- margin: 0;
- padding: 0;
- width: 100%;
- }
- li {
- list-style-type: none;
- cursor: pointer;
- display: block;
- font-size: 0.75em;
- margin: 0;
- min-height: 2em;
- padding: 2px;
- text-align: left;
- }
-}
diff --git a/resources/assets/stylesheets/less/news.less b/resources/assets/stylesheets/less/news.less
deleted file mode 100644
index c8e52523061..00000000000
--- a/resources/assets/stylesheets/less/news.less
+++ /dev/null
@@ -1,93 +0,0 @@
-/* --- news --------------------------------------------------- */
-#news_dialog_content {
- overflow-y: auto;
- padding-right: 15px;
- padding-top: 10px
-}
-
-.news_dialog_content {
- button {
- vertical-align:middle;
- }
-
- select {
- width: 45%;
- }
-
- option {
- height: 16px;
- }
-}
-
-.news_admin {
- button {
- vertical-align:middle;
- }
-}
-
-.news_reset_filter {
- float: right;
-}
-
-img.news_area_icon {
- vertical-align: middle;
-}
-
-div.news_area_title {
- display: inline;
- height: 32px;
- vertical-align: middle;
-}
-input.news_topic {
- width: 90%;
-}
-
-textarea.news_body {
- resize: vertical;
- width: 90%;
- font-size: 10pt;
-}
-
-select.news_area_options {
- min-width: 200px;
- width: 100%;
- height: 116px;
-}
-
-optgroup.news_area_title {
- text-indent: 26px;
- background-repeat: no-repeat;
-
- option {
- text-indent: 6px;
- }
-}
-
-input.news_search_term {
- width: 45%;
-}
-
-div.news_area_selectable {
- display: inline-block;
- float: left;
- width: 45%;
- height: 100%;
-}
-
-div.news_area_actions {
- display: inline-block;
- width: 8%;
- text-align: center;
-}
-
-div.news_area_selected {
- display: inline-block;
- float: right;
- width: 45%;
- height: 100%;
-}
-
-div.news_dialog_buttons {
- margin-right: 15px;
- border-top: 1px solid #d1d1d1;
-}
diff --git a/resources/assets/stylesheets/less/badges.less b/resources/assets/stylesheets/scss/badges.scss
similarity index 75%
rename from resources/assets/stylesheets/less/badges.less
rename to resources/assets/stylesheets/scss/badges.scss
index 897f51ae012..90095cadf57 100644
--- a/resources/assets/stylesheets/less/badges.less
+++ b/resources/assets/stylesheets/scss/badges.scss
@@ -2,22 +2,22 @@
.badge {
position: relative;
}
+
.badge:after {
content: attr(data-badge-number);
position: absolute;
- top: 0px;
+ top: 0;
right: 15px;
display: inline-block;
max-width: 30px;
width: auto;
overflow: hidden;
- margin: 0px;
+ margin: 0;
padding: 1px 5px;
- /* border: 2px solid white; */
- background-color: #D60000;
- color: white;
+ background-color: $red;
+ color: $white;
font-size: 10px;
font-weight: bold;
@@ -28,6 +28,6 @@
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
border-radius: 9px;
- box-shadow: black 0px 1px 3px;
- }
+ box-shadow: $black 0 1px 3px;
+ }
}
diff --git a/resources/assets/stylesheets/less/comments.less b/resources/assets/stylesheets/scss/comments.scss
similarity index 66%
rename from resources/assets/stylesheets/less/comments.less
rename to resources/assets/stylesheets/scss/comments.scss
index a336763f670..44bd4dc107c 100644
--- a/resources/assets/stylesheets/less/comments.less
+++ b/resources/assets/stylesheets/scss/comments.scss
@@ -1,9 +1,9 @@
section.comments {
text-align: left;
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-top-style: none;
border-width: 1px;
- background-color: white;
+ background-color: $white;
padding: 5px;
h1 {
@@ -14,19 +14,18 @@ section.comments {
}
article.comment {
border: 0;
- border-top: 1px solid @light-gray-color-40;
+ border-top: 1px solid $light-gray-color-40;
max-width: 1260px;
- margin: auto;
margin-bottom: 4px;
h1 {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
time {
float: right;
font-size: 0.8em;
- color: @light-gray-color-40;
+ color: $light-gray-color-40;
}
}
}
diff --git a/resources/assets/stylesheets/less/enrolment.less b/resources/assets/stylesheets/scss/enrolment.scss
similarity index 76%
rename from resources/assets/stylesheets/less/enrolment.less
rename to resources/assets/stylesheets/scss/enrolment.scss
index 9aae6d2e64f..417cd55f8f7 100644
--- a/resources/assets/stylesheets/less/enrolment.less
+++ b/resources/assets/stylesheets/scss/enrolment.scss
@@ -1,17 +1,16 @@
#enrollment {
ul {
- border-top: 1px solid @base-color;
+ border-top: 1px solid $base-color;
list-style: none inside;
- margin: 0px;
+ margin: 0;
overflow-x: auto;
- padding: 0px;
+ padding: 0;
- .media-breakpoint-medium-up({
+ @include media-breakpoint-medium-up() {
max-height: 200px;
- });
-
+ }
li {
- border-bottom: 1px solid @base-color;
+ border-bottom: 1px solid $base-color;
padding: 5px;
&.ui-draggable.ui-draggable-handle {
@@ -43,14 +42,14 @@
#available-courses li.visible,
#selected-courses li {
&:hover {
- background-color: @base-color-20;
+ background-color: $base-color-20;
}
}
#available-courses li.ui-draggable.ui-draggable-dragging,
#selected-courses li.ui-sortable-helper {
- background-color: @base-color-20;
- border: 1px solid @base-color;
+ background-color: $base-color-20;
+ border: 1px solid $base-color;
list-style: none inside;
padding: 5px;
width: auto;
@@ -69,12 +68,12 @@
}
&.ui-sortable-placeholder {
- background-color: @yellow-20;
+ background-color: $yellow-20;
}
}
.ui-sortable-helper .delete {
- display:none;
+ display: none;
}
input[name="filter"] {
@@ -82,7 +81,7 @@
}
.ui-state-highlight {
- background: @red;
+ background: $red;
border: 0;
height: 30px;
padding: 10px;
@@ -99,17 +98,13 @@
.selected {
flex: 1;
}
+
.available {
margin-right: 0.5em;
}
+
.selected {
margin-left: 0.5em;
}
- //
- // .available #available-courses,
- // .selected #selected-courses {
- // position: sticky;
- // top: 0;
- // }
}
}
diff --git a/resources/assets/stylesheets/less/feedback.less b/resources/assets/stylesheets/scss/feedback.scss
similarity index 90%
rename from resources/assets/stylesheets/less/feedback.less
rename to resources/assets/stylesheets/scss/feedback.scss
index f8c297d8d8a..14fdb403ecd 100644
--- a/resources/assets/stylesheets/less/feedback.less
+++ b/resources/assets/stylesheets/scss/feedback.scss
@@ -44,9 +44,8 @@ article.studip.feedback-stream {
.feedback-entry {
margin-top: 10px;
padding: 5px;
- background-color: @content-color-10;
- border: 1px solid @content-color-40;
- border-width: 1px 0;
+ background-color: $content-color-10;
+ border: 1px solid $content-color-40;
header {
background: transparent;
@@ -71,7 +70,7 @@ article.studip.feedback-stream {
}
}
.date {
- color: #999;
+ color: $base-gray;
text-align: right;
font-size: 12px;
}
@@ -99,7 +98,7 @@ table.feedback {
.percentage-bar {
margin-left: -5px;
padding: 0 5px;
- color: @content-color-10;
- background-color: @base-color;
+ color: $content-color-10;
+ background-color: $base-color;
min-width: 20px;
}
diff --git a/resources/assets/stylesheets/less/index.less b/resources/assets/stylesheets/scss/index.scss
similarity index 76%
rename from resources/assets/stylesheets/less/index.less
rename to resources/assets/stylesheets/scss/index.scss
index 6f6cf125c1c..ffa3221234d 100644
--- a/resources/assets/stylesheets/less/index.less
+++ b/resources/assets/stylesheets/scss/index.scss
@@ -1,9 +1,9 @@
div.index_container {
margin: 0 0;
top: 111px;
- bottom: 0px;
+ bottom: 0;
width: 100%;
- height: ~"calc(100% - 110px)";
+ height: calc(100% - 110px);
ul#tabs {
display: none;
@@ -31,7 +31,7 @@ div.index_container {
div.index_main {
background-color: rgba(255, 255, 255, 0.8);
- box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
margin-left: 50px;
margin-top: 50px;
width: 500px;
@@ -42,7 +42,6 @@ div.index_container {
form {
padding: 20px;
- padding-bottom: 0;
}
footer {
@@ -50,7 +49,7 @@ div.index_container {
padding: 20px;
div#languages {
- border-top: 1px solid @light-gray-color;
+ border-top: 1px solid $light-gray-color;
font-size: 0.9em;
padding: 10px;
@@ -63,23 +62,23 @@ div.index_container {
display: flex;
align-items: center;
gap: 5px;
- border-top: 1px solid @light-gray-color;
+ border-top: 1px solid $light-gray-color;
font-size: 0.9em;
padding: 10px;
a {
text-decoration: underline;
- color: @contrast-blue;
+ color: $base-color;
&:hover, &:focus {
font-size: 1em;
- color: @red;
+ color: $red;
}
}
}
div.login_info {
- border-top: 1px solid @light-gray-color;
+ border-top: 1px solid $light-gray-color;
font-size: 0.8em;
div {
text-align: right;
@@ -97,7 +96,7 @@ div.index_container {
}
nav {
h1 {
- border-bottom: 0px;
+ border-bottom: 0;
}
padding: 10px;
margin-left: 20px;
@@ -113,7 +112,7 @@ div.index_container {
font-size: 1.5em;
p {
font-size: 0.5em;
- color: @black;
+ color: $black;
}
}
}
@@ -128,19 +127,3 @@ div.index_container {
margin-bottom: -25px;
}
}
-
-@-moz-document url-prefix() {
- div.index_container {
- height: calc(100% - 145px);
- }
-
- #index,
- #login {
- height: calc(100% - 34px);
-
- #layout_footer {
- position: inherit;
- top: 0;
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/overlapping.less b/resources/assets/stylesheets/scss/overlapping.scss
similarity index 64%
rename from resources/assets/stylesheets/less/overlapping.less
rename to resources/assets/stylesheets/scss/overlapping.scss
index 5b567584c08..05520b84f58 100644
--- a/resources/assets/stylesheets/less/overlapping.less
+++ b/resources/assets/stylesheets/scss/overlapping.scss
@@ -1,32 +1,29 @@
-div.mvv-ovl-modulteil {
- position: absolute;
- top: 0px;
- left: 30px;
- right: 230px;
- border-bottom: solid 1px @light-gray-color-40;
-}
.mvv-ovl-selection {
margin-bottom: 25px;
}
+
.mvv-ovl-base-abschnitt {
position: relative;
width: 100%;
height: 30px;
margin-bottom: 5px;
- color: @dark-gray-color;
+ color: $dark-gray-color;
font-weight: 700;
font-size: 16px;
- border-bottom: 1px solid @light-gray-color-40;
+ border-bottom: 1px solid $light-gray-color-40;
+
h2 {
position: absolute;
left: 5px;
border: none;
- margin: 7px 0px;
+ margin: 7px 0;
}
+
& > div {
position: absolute;
left: unset;
- right: 0px;
+ right: 0;
+
div {
display: inline-block;
width: 25px;
@@ -34,21 +31,25 @@ div.mvv-ovl-modulteil {
}
}
}
+
ul.mvv-ovl-conflict {
width: 100%;
+
.mvv-ovl-base-modulteil, .mvv-ovl-comp-modulteil {
> div {
position: absolute;
- top: 0px;
- right: 0px;
+ top: 0;
+ right: 0;
text-align: right;
- border-bottom: solid 1px @light-gray-color-40;
+ border-bottom: solid 1px $light-gray-color-40;
+
&:first-of-type {
left: 30px;
width: auto;
text-align: left;
- border-bottom: solid 1px @light-gray-color-40;
+ border-bottom: solid 1px $light-gray-color-40;
}
+
& > div {
display: inline-block;
width: 25px;
@@ -56,26 +57,31 @@ ul.mvv-ovl-conflict {
}
}
}
+
.mvv-ovl-version {
font-size: 1.2em;
}
}
+
.mvv-ovl-base-course {
position: absolute;
width: 5px;
- color: red;
+ color: $red;
left: 10px;
+
~ label {
padding-left: 4px;
}
}
+
.mvv-overlapping-exclude {
cursor: pointer;
width: 16px;
height: 16px;
position: absolute;
- background: rgba(255, 255, 255, 0.5) url("@{image-path}/icons/blue/visibility-visible.svg") center center no-repeat;
+ background: rgba(255, 255, 255, 0.5) url("#{$image-path}/icons/blue/visibility-visible.svg") center center no-repeat;
+
&.mvv-overlapping-invisible {
- background: rgba(255, 255, 255, 0.5) url("@{image-path}/icons/blue/visibility-invisible.svg") center center no-repeat;
+ background: rgba(255, 255, 255, 0.5) url("#{$image-path}/icons/blue/visibility-invisible.svg") center center no-repeat;
}
}
diff --git a/resources/assets/stylesheets/less/search.less b/resources/assets/stylesheets/scss/search.scss
similarity index 75%
rename from resources/assets/stylesheets/less/search.less
rename to resources/assets/stylesheets/scss/search.scss
index 12319dc7fba..6f8eee156b4 100644
--- a/resources/assets/stylesheets/less/search.less
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -1,27 +1,28 @@
+$icon-size: 32px;
label.inactive-settings-category {
- color:red;
+ color: $red;
}
#search {
// "Searching..." info
#searching-gif {
- @icon-size: 32px;
-
- color: @dark-gray-color-45;
+ color: $dark-gray-color-45;
display: none;
text-align: center;
- background-image: url("@{image-path}/ajax-indicator-black.svg");
+ background-image: url("#{$image-path}/ajax-indicator-black.svg");
background-position: center bottom;
background-repeat: no-repeat;
- background-size: @icon-size;
+ background-size: $icon-size;
margin-bottom: 10px;
- padding-bottom: (@icon-size + 5px);
+ padding-bottom: ($icon-size + 5px);
}
+
&.is-searching {
#searching-gif {
display: block;
}
+
#search-results {
display: none;
}
@@ -41,13 +42,13 @@ label.inactive-settings-category {
}
article {
- border: 1px solid @content-color-40;
+ border: 1px solid $content-color-40;
margin-bottom: 8px;
margin-top: 8px;
> header {
- background-color: @content-color-20;
- color: @base-color;
+ background-color: $content-color-20;
+ color: $base-color;
display: flex;
flex-direction: row;
@@ -61,9 +62,9 @@ label.inactive-settings-category {
}
div.search-more-results {
- font-size: @font-size-base;
+ font-size: $font-size-base;
font-weight: normal;
- line-height: @font-size-h3;
+ line-height: $font-size-h3;
margin-bottom: auto;
margin-top: auto;
margin-right: 5px;
@@ -77,18 +78,18 @@ label.inactive-settings-category {
flex-wrap: nowrap;
padding: 8px;
- transition: background-color @transition-duration;
+ transition: background-color $transition-duration;
&.search-is-subcourse {
padding-left: 30px;
}
&:not(:first-child) {
- border-top: 1px solid @content-color-40;
+ border-top: 1px solid $content-color-40;
}
&:hover {
- background-color: fadeout(@light-gray-color, 80%);
+ background-color: mix($light-gray-color, $white, 80%);
}
&.search-extended-result {
@@ -109,7 +110,7 @@ label.inactive-settings-category {
margin-right: 8px;
img {
- .square(36px);
+ @include square(36px);
vertical-align: middle;
}
}
@@ -125,13 +126,13 @@ label.inactive-settings-category {
}
.search-result-title {
- font-size: @font-size-base;
+ font-size: $font-size-base;
font-weight: bold;
}
.search-result-details {
- color: @dark-gray-color-80;
- font-size: @font-size-small;
+ color: $dark-gray-color-80;
+ font-size: $font-size-small;
}
}
@@ -144,16 +145,16 @@ label.inactive-settings-category {
.search-result-time {
- color: @dark-gray-color-80;
+ color: $dark-gray-color-80;
flex: 1;
- font-size: @font-size-small;
+ font-size: $font-size-small;
text-align: right;
white-space: nowrap;
}
.search-result-additional {
- color: @dark-gray-color-80;
- font-size: @font-size-small;
+ color: $dark-gray-color-80;
+ font-size: $font-size-small;
text-align: right;
}
@@ -168,8 +169,8 @@ label.inactive-settings-category {
margin: 20px 0 0 -32px;
a {
- .background-icon('arr_1right', 'clickable', 24);
- .square(24px);
+ @include background-icon(arr_1right, clickable, 24);
+ @include square(24px);
display: inline-block;
}
}
@@ -179,10 +180,11 @@ label.inactive-settings-category {
}
a.no-result {
- color: grey;
+ color: $base-gray;
pointer-events: none;
cursor: default;
}
+
div#div-search-input {
margin-top: 0;
margin-bottom: 16px;
@@ -201,29 +203,32 @@ div#div-search-input {
flex-direction: row;
align-items: baseline;
margin: 10px 0;
+
h5 {
margin-right: 10px;
}
+
.filter-items {
.button {
- background-color: @content-color-20;
- color: @brand-color-dark;
- min-width:auto;
+ background-color: $content-color-20;
+ color: $brand-color-dark;
+ min-width: auto;
border: 0;
white-space: nowrap;
padding: 8px;
margin: 0 5px;
+
&::before {
background-repeat: no-repeat;
content: " ";
float: right;
height: 16px;
width: 16px;
- .background-icon('trash', 'clickable');
+ @include background-icon(trash, clickable);
}
&:hover::before {
- .background-icon('trash', 'attention');
+ @include background-icon(trash, clickable);
}
}
}
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index c66e5094f18..2a8024fa64a 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -23,15 +23,11 @@
@import "less/clipboard.less";
@import "less/helpbar.less";
@import "less/content_box.less";
-@import "less/badges.less";
@import "less/studip-selection.less";
-@import "less/comments.less";
-@import "less/autocomplete.less";
@import "less/avatar.less";
@import "less/buttons.less";
@import "less/messagebox.less";
-@import "less/search.less";
@import "less/tabs.less";
@import "less/copyable-links.less";
@@ -41,8 +37,6 @@
@import "less/documents.less";
@import "less/files.less";
@import "less/evaluation.less";
-@import "less/index.less";
-@import "less/news.less";
@import "less/schedule.less";
@import "less/study-area-selection.less";
@import "less/ilias-interface.less";
@@ -52,7 +46,6 @@
@import "less/activityfeed.less";
@import "less/mobile.less";
-@import "less/enrolment.less";
@import "less/dialog.less";
@import "less/studip-overlay.less";
@import "less/selects.less";
@@ -67,9 +60,6 @@
@import "less/deprecated.less";
-@import "less/overlapping.less";
-
-@import "less/feedback.less";
/* --- Standardvorgaben ----------------------------------------------------- */
//TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!!
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 9e0d1f88b1a..86e324356c1 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -15,18 +15,23 @@
@import "scss/article";
@import "scss/ajax";
@import "scss/avatar";
+@import "scss/badges";
@import "scss/blubber";
@import "scss/buttons";
@import "scss/contentbar";
@import "scss/contents";
+@import "scss/comments";
@import "scss/courseware";
@import "scss/css_tree";
@import "scss/dates";
@import "scss/dashboard";
+@import "scss/enrolment";
@import "scss/files";
+@import "scss/feedback";
@import "scss/forum";
@import "scss/grid";
@import "scss/i18n";
+@import "scss/index";
@import "scss/fullscreen";
@import "scss/links";
@import "scss/lists";
@@ -34,6 +39,7 @@
@import "scss/my_courses";
@import "scss/mvv";
@import "scss/oer";
+@import "scss/overlapping";
@import "scss/qrcode";
@import "scss/questionnaire";
@import "scss/quicksearch";
@@ -47,6 +53,7 @@
@import "scss/resources";
@import "scss/sidebar";
@import "scss/select";
+@import "scss/search";
@import "scss/skiplinks";
@import "scss/start";
@import "scss/scroll-to-top";
--
GitLab