From 8fada0e81e4defd92ca4a80e8176d97a44717e64 Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Fri, 2 Sep 2022 07:34:31 +0000
Subject: [PATCH] migrate less to sass, closes #1488
Closes #1488
Merge request studip/studip!927
---
.../assets/stylesheets/less/dashboard.less | 196 -----------------
.../assets/stylesheets/less/messages.less | 112 ----------
.../assets/stylesheets/less/schedule.less | 2 +-
.../assets/stylesheets/mixins/studip.scss | 16 ++
.../{less/ajax.less => scss/ajax.scss} | 11 +-
.../{less/article.less => scss/article.scss} | 17 +-
.../css_tree.less => scss/css_tree.scss} | 34 +--
.../assets/stylesheets/scss/dashboard.scss | 198 ++++++++++++++++++
.../{less/i18n.less => scss/i18n.scss} | 14 +-
.../{less/lists.less => scss/lists.scss} | 37 +---
.../assets/stylesheets/scss/messages.scss | 123 +++++++++++
.../{less/plus.less => scss/plus.scss} | 13 +-
.../questionnaire.scss} | 79 ++++---
.../quicksearch.scss} | 29 ++-
.../assets/stylesheets/scss/visibility.scss | 16 +-
resources/assets/stylesheets/studip.less | 10 -
resources/assets/stylesheets/studip.scss | 21 +-
17 files changed, 479 insertions(+), 449 deletions(-)
delete mode 100644 resources/assets/stylesheets/less/dashboard.less
delete mode 100644 resources/assets/stylesheets/less/messages.less
rename resources/assets/stylesheets/{less/ajax.less => scss/ajax.scss} (72%)
rename resources/assets/stylesheets/{less/article.less => scss/article.scss} (87%)
rename resources/assets/stylesheets/{less/css_tree.less => scss/css_tree.scss} (72%)
create mode 100644 resources/assets/stylesheets/scss/dashboard.scss
rename resources/assets/stylesheets/{less/i18n.less => scss/i18n.scss} (68%)
rename resources/assets/stylesheets/{less/lists.less => scss/lists.scss} (71%)
create mode 100644 resources/assets/stylesheets/scss/messages.scss
rename resources/assets/stylesheets/{less/plus.less => scss/plus.scss} (80%)
rename resources/assets/stylesheets/{less/questionnaire.less => scss/questionnaire.scss} (78%)
rename resources/assets/stylesheets/{less/quicksearch.less => scss/quicksearch.scss} (82%)
diff --git a/resources/assets/stylesheets/less/dashboard.less b/resources/assets/stylesheets/less/dashboard.less
deleted file mode 100644
index e7699295395..00000000000
--- a/resources/assets/stylesheets/less/dashboard.less
+++ /dev/null
@@ -1,196 +0,0 @@
-.dashboard-documents-compact {
- list-style: none;
- padding-left: 0;
-
- > li {
- padding: .5em 0;
- display: flex;
- }
-
- > li:nth-child(n+2) {
- border-top: 1px solid #d4dbe5;
- }
-}
-
-.document-icon {
- padding-right: 0.5em;
- align-self: center;
-}
-
-.document-data {
- flex: 1;
- display: flex;
- flex-wrap: wrap;
-
- span {
- border-right: 1px solid #d4dbe5;
- margin-right: 0.3em;
- padding-right: 0.4em;
- }
-
- span:not(.document-name) {
- color: @dark-gray-color-75;
- }
-
- .document-name, span:last-child {
- border: none;
- margin-right: 0;
- padding-right: 0;
- }
-}
-
-.document-name {
- flex: 1 1 100%;
-}
-
-.document-chdate {
- white-space: nowrap;
-}
-
-.document-range {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-// tiny
-.document-range, .document-size {
- display: none;
-
- .media-breakpoint-medium-up({ display: inline; });
-}
-
-// small: nur volle breite
-.media-breakpoint-small-up({
-.grid-stack-one-column-mode {
- .document-range, .document-size {
- display: inline;
- }
-}
-});
-
-.files-search-active-filters {
-
- font-size: 0.8em;
- padding-bottom: 1em;
-
- ul {
- .list-inline();
-
- img {
- margin-left: 0.25em;
- vertical-align: text-bottom;
- }
-
- .files-search-active-filter {
- background-color: @light-gray-color-20;
- padding: 0.25em 0.25em 0.25em 0.6em;
- font-size: 0.9em;
- margin-bottom: 1px;
- }
- }
-
- /* not within a caption */
- form.files-search-search + & {
- font-size: calc(1.4em * 0.8);
- }
-}
-
-.files-search-results {
-
- .files-search-actions {
- min-width: 3em;
- text-align: right;
- }
-
- a.files-search-more {
- font-size: 1.1em;
- }
-}
-
-#files_dashboard-index,
-#files_dashboard-search {
- form {
- label, .input-group {
- margin-top: 0;
- }
- }
-}
-
-form div.files-search {
- &.input-group {
- display: flex;
- align-items: stretch;
- width: 100%;
- margin-top: 1ex;
- margin-bottom: 15px;
-
- input[type="text"] {
- flex: 1 1 auto;
- display: block;
- width: 1%;
- line-height: 1.5;
- padding: .375rem .75rem;
- margin: 0;
- }
-
- .input-group-append {
- align-items: stretch;
- display: flex;
-
- .button {
- margin: 0;
- line-height: 1.5;
- background-color: @content-color-20;
- color: @brand-color-dark;
- min-width:auto;
- border: 1px solid @light-gray-color-40;
- border-left: none;
- }
-
- img {
- vertical-align: middle;
- }
- }
- }
-
- .input-group-append a.button.reset {
- .button-with-icon("refresh", "clickable", "clickable");
- .hide-text();
- top: 2px;
- }
-}
-
-.media-breakpoint-tiny-down({
-
-.files-search-search {
- margin-bottom: 0;
-}
-
-.files-search-active-filters {
- padding-bottom: 0;
-}
-});
-
-
-.files-search-active-filters {
- li:first-child {
- .hidden-tiny-down();
- }
-}
-
-.files-search-results {
- caption span {
- .hidden-tiny-down();
- }
-
- th:nth-child(3), td:nth-child(3) {
- .hidden-tiny-down();
- }
-
- th:nth-child(1), td:nth-child(1),
- th:nth-child(5), td:nth-child(5),
- th:nth-child(6), td:nth-child(6) {
- .hidden-small-down();
- }
-}
diff --git a/resources/assets/stylesheets/less/messages.less b/resources/assets/stylesheets/less/messages.less
deleted file mode 100644
index b22aefd6131..00000000000
--- a/resources/assets/stylesheets/less/messages.less
+++ /dev/null
@@ -1,112 +0,0 @@
-#reloader.more {
- display: none;
-}
-.unread {
- font-weight: bold;
-}
-.dropping {
- background-color: @content-color;
- a {
- color: white;
- }
-}
-a.message-tag {
- white-space: nowrap;
- .icon('before', 'tag', 'clickable');
-}
-
-#message-move-handle {
- background-color: rgba(255, 255, 255, 0.3);
- padding: 3px;
- border-radius: 5px;
- border: thin solid #000;
-
- .icon('before', 'mail', 'clickable', 20, 2px);
-}
-#messages-tags.dragging .sidebar-widget-content {
- background-color: @activity-color-20;
-}
-
-#statusbar_container {
- > .statusbar {
- border: thin solid lightgrey;
- min-width: 100%;
- max-width: 100%;
- background-color: @content-color-40;
- > .progress {
- background-color: @content-color;
- width: 100%;
- min-width: 0%;
- max-width: 0%;
- height: 20px;
- line-height: 20px;
- &.progress-error {
- background-color: @red;
- }
- }
- > .progresstext {
- margin-top: -20px;
- text-align: center;
- color: white;
- height: 20px;
- line-height: 20px;
- }
- }
-}
-
-#message_metadata tr {
- vertical-align: top;
-}
-
-#adressees {
- max-height: 120px;
- overflow: auto;
- li.adressee {
- white-space: nowrap;
- }
-}
-
-.message_body {
- background-color: @content-color-20;
- margin: 3px;
- padding: 10px;
-}
-
-.responsive_author {
- margin: 0;
- font-size: 0.8em;
- color: @base-gray;
-}
-
-.message-search-wrapper {
- display: flex;
- justify-content: flex-start;
- margin-top: 1ex;
-
- > * {
- margin-right: 1em;
- }
-}
-ul.message-options {
- list-style: none;
- margin: 1em 0 0;
- padding: 0;
- text-align: center;
-
- > li {
- display: inline-block;
- min-width: 70px;
- }
-}
-
-#messages {
- td.title {
- > a {
- display: block;
- > div.message-indicators {
- float:right;
- margin-right: 5px;
- }
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/schedule.less b/resources/assets/stylesheets/less/schedule.less
index 9eb01e82f46..6f57e2b5376 100644
--- a/resources/assets/stylesheets/less/schedule.less
+++ b/resources/assets/stylesheets/less/schedule.less
@@ -1,6 +1,6 @@
/* --- ablaufplan / dates --------------------------------------------------- */
.dates_items th, .dates_items td {
- border-bottom: 3px solid #fff;
+ border-bottom: 3px solid @white;
}
.dates_opened td {
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 407608f14c7..8e93f7f8000 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -225,3 +225,19 @@
@content;
}
}
+
+@mixin list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
+
+@mixin list-inline {
+ @include list-unstyled();
+ margin-left: -5px;
+
+ > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
diff --git a/resources/assets/stylesheets/less/ajax.less b/resources/assets/stylesheets/scss/ajax.scss
similarity index 72%
rename from resources/assets/stylesheets/less/ajax.less
rename to resources/assets/stylesheets/scss/ajax.scss
index 0826be4cc20..19adf7db70d 100644
--- a/resources/assets/stylesheets/less/ajax.less
+++ b/resources/assets/stylesheets/scss/ajax.scss
@@ -2,7 +2,7 @@
#ajax_notification {
background-color: #7387ac;
bottom: 0;
- color: #fff;
+ color: $white;
display: none;
font-size: 1.3em;
font-weight: bold;
@@ -20,7 +20,7 @@
position: relative;
.notification {
- background: rgba(255, 255, 255, 0.5) url("@{image-path}/ajax_indicator_small.gif") center center no-repeat;
+ background: rgba(255, 255, 255, 0.5) url("#{$image-path}/ajax_indicator_small.gif") center center no-repeat;
border: 1px solid #ccc;
border-radius: 8px;
display: inline-block;
@@ -33,11 +33,10 @@
}
.ajaxing {
- background: url("@{image-path}/ajax_indicator_small.gif") center no-repeat;
+ background: url("#{$image-path}/ajax_indicator_small.gif") center no-repeat;
display: inline-block;
- .size(16px, 16px);
- .hide-text;
+ @include size(16px, 16px);
+ @include hide-text();
img, image, svg { display: none; }
}
-
diff --git a/resources/assets/stylesheets/less/article.less b/resources/assets/stylesheets/scss/article.scss
similarity index 87%
rename from resources/assets/stylesheets/less/article.less
rename to resources/assets/stylesheets/scss/article.scss
index deba2a1deb5..f773e769ba4 100644
--- a/resources/assets/stylesheets/less/article.less
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -1,5 +1,5 @@
article.studip {
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
@@ -17,7 +17,7 @@ article.studip {
flex-wrap: wrap;
padding: 2px;
- background-color: @content-color-20;
+ background-color: $content-color-20;
margin: -10px;
margin-bottom: 10px;
@@ -34,13 +34,13 @@ article.studip {
h1 {
padding: 5px;
margin: 0;
- color: @base-color;
+ color: $base-color;
border-bottom: none;
font-size: medium;
> a {
display: flex;
- align-items: top;
+ align-items: flex-start;
}
&,
@@ -59,7 +59,7 @@ article.studip {
padding: 2px;
> * {
- border-right: 1px solid @content-color;
+ border-right: 1px solid $content-color;
padding-right: 4px;
margin-right: 4px;
@@ -80,11 +80,10 @@ article.studip {
&.toggle {
> header {
h1 > a {
- .icon('before', 'arr_1right', 'clickable');
+ @include icon(before, arr_1right, clickable);
&::before {
flex: 0 0 auto;
margin-right: 5px;
-// margin-top: 2px;
transition: all 200ms ease 0s;
}
width: 100%;
@@ -113,7 +112,7 @@ article.studip {
> footer {
text-align: center;
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-top-style: solid;
border-width: 1px;
margin: -10px;
@@ -142,7 +141,7 @@ article.new {
&.toggle {
> header {
h1 > a {
- .icon('before', 'arr_1right', 'new');
+ @include icon(before, arr_1right, new);
&::before {
margin-right: 5px;
}
diff --git a/resources/assets/stylesheets/less/css_tree.less b/resources/assets/stylesheets/scss/css_tree.scss
similarity index 72%
rename from resources/assets/stylesheets/less/css_tree.less
rename to resources/assets/stylesheets/scss/css_tree.scss
index a4551bef339..3689488a685 100644
--- a/resources/assets/stylesheets/less/css_tree.less
+++ b/resources/assets/stylesheets/scss/css_tree.scss
@@ -1,6 +1,6 @@
-@css-tree-delay: 300ms;
-@css-tree-distance: 8px;
-@css-tree-border: 1px solid @light-gray-color-80;
+$css-tree-delay: 300ms;
+$css-tree-distance: 8px;
+$css-tree-border: 1px solid $light-gray-color-80;
.css-tree {
&, ul {
@@ -9,11 +9,11 @@
padding: 0;
}
ul {
- margin-left: @css-tree-distance;
+ margin-left: $css-tree-distance;
position: relative;
&:before {
- border-left: @css-tree-border;
+ border-left: $css-tree-border;
content: '';
display: block;
position: absolute;
@@ -25,7 +25,7 @@
}
li {
overflow: hidden;
- padding-left: (@css-tree-distance + 2px);
+ padding-left: ($css-tree-distance + 2px);
position: relative;
&.css-tree-hidden {
@@ -36,14 +36,14 @@
content: '';
display: block;
height: 0;
- width: @css-tree-distance;
+ width: $css-tree-distance;
position: absolute;
- border-top: @css-tree-border;
+ border-top: $css-tree-border;
left: 0;
- top: @css-tree-distance;
+ top: $css-tree-distance;
}
ul li:last-child:before {
- background: #fff;
+ background: $white;
height: auto;
top: 10px;
bottom: 0;
@@ -53,11 +53,11 @@
input[type=checkbox] {
display: none;
+ label {
- .icon('before', 'arr_1right', 'clickable');
+ @include icon(before, arr_1right, clickable);
cursor: pointer;
&:before {
- transition: transform @css-tree-delay;
+ transition: transform $css-tree-delay;
vertical-align: baseline;
}
}
@@ -65,7 +65,7 @@
max-height: 0;
opacity: 0;
- transition: all @css-tree-delay;
+ transition: all $css-tree-delay;
}
~ input[type=radio] + label {
margin-left: 0;
@@ -85,7 +85,7 @@
.css-tree.selectable {
input[type=checkbox] {
+ label {
- .hide-text();
+ @include hide-text();
}
~ input[type=radio] + label {
margin-left: 0;
@@ -96,7 +96,7 @@
display: none;
+ label {
- color: @brand-color-dark;
+ color: $brand-color-dark;
border-radius: 2px;
cursor: pointer;
padding: 0 3px;
@@ -105,11 +105,11 @@
&:checked + label {
font-weight: bold;
- background: @content-color-40;
+ background: $content-color-40;
}
&[disabled] + label {
- color: #888;
+ color: $dark-gray-color-20;
}
}
}
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
new file mode 100644
index 00000000000..9f2b547419e
--- /dev/null
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -0,0 +1,198 @@
+.dashboard-documents-compact {
+ list-style: none;
+ padding-left: 0;
+
+ > li {
+ padding: .5em 0;
+ display: flex;
+ }
+
+ > li:nth-child(n+2) {
+ border-top: 1px solid #d4dbe5;
+ }
+}
+
+.document-icon {
+ padding-right: 0.5em;
+ align-self: center;
+}
+
+.document-data {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+
+ span {
+ border-right: 1px solid #d4dbe5;
+ margin-right: 0.3em;
+ padding-right: 0.4em;
+ }
+
+ span:not(.document-name) {
+ color: $dark-gray-color-75;
+ }
+
+ .document-name, span:last-child {
+ border: none;
+ margin-right: 0;
+ padding-right: 0;
+ }
+}
+
+.document-name {
+ flex: 1 1 100%;
+}
+
+.document-chdate {
+ white-space: nowrap;
+}
+
+.document-range {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+// tiny
+.document-range, .document-size {
+ display: none;
+
+ @include media-breakpoint-medium-up() {
+ display: inline;
+ }
+}
+
+// small: nur volle breite
+@include media-breakpoint-small-up() {
+ .grid-stack-one-column-mode {
+ .document-range, .document-size {
+ display: inline;
+ }
+ }
+}
+
+.files-search-active-filters {
+
+ font-size: 0.8em;
+ padding-bottom: 1em;
+
+ ul {
+ @include list-inline();
+
+ img {
+ margin-left: 0.25em;
+ vertical-align: text-bottom;
+ }
+
+ .files-search-active-filter {
+ background-color: $light-gray-color-20;
+ padding: 0.25em 0.25em 0.25em 0.6em;
+ font-size: 0.9em;
+ margin-bottom: 1px;
+ }
+ }
+
+ /* not within a caption */
+ form.files-search-search + & {
+ font-size: calc(1.4em * 0.8);
+ }
+}
+
+.files-search-results {
+
+ .files-search-actions {
+ min-width: 3em;
+ text-align: right;
+ }
+
+ a.files-search-more {
+ font-size: 1.1em;
+ }
+}
+
+#files_dashboard-index,
+#files_dashboard-search {
+ form {
+ label, .input-group {
+ margin-top: 0;
+ }
+ }
+}
+
+form div.files-search {
+ &.input-group {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ margin-top: 1ex;
+ margin-bottom: 15px;
+
+ input[type="text"] {
+ flex: 1 1 auto;
+ display: block;
+ width: 1%;
+ line-height: 1.5;
+ padding: .375rem .75rem;
+ margin: 0;
+ }
+
+ .input-group-append {
+ align-items: stretch;
+ display: flex;
+
+ .button {
+ margin: 0;
+ line-height: 1.5;
+ background-color: $content-color-20;
+ color: $brand-color-dark;
+ min-width: auto;
+ border: 1px solid $light-gray-color-40;
+ border-left: none;
+ }
+
+ img {
+ vertical-align: middle;
+ }
+ }
+ }
+
+ .input-group-append a.button.reset {
+ @include button-with-icon(refresh, clickable, clickable);
+ @include hide-text();
+ top: 2px;
+ }
+}
+
+@include media-breakpoint-tiny-down() {
+
+ .files-search-search {
+ margin-bottom: 0;
+ }
+
+ .files-search-active-filters {
+ padding-bottom: 0;
+ }
+}
+
+
+.files-search-active-filters {
+ li:first-child {
+ @include hidden-tiny-down();
+ }
+}
+
+.files-search-results {
+ caption span {
+ @include hidden-tiny-down();
+ }
+
+ th:nth-child(3), td:nth-child(3) {
+ @include hidden-tiny-down();
+ }
+
+ th:nth-child(1), td:nth-child(1),
+ th:nth-child(5), td:nth-child(5),
+ th:nth-child(6), td:nth-child(6) {
+ @include hidden-small-down();
+ }
+}
diff --git a/resources/assets/stylesheets/less/i18n.less b/resources/assets/stylesheets/scss/i18n.scss
similarity index 68%
rename from resources/assets/stylesheets/less/i18n.less
rename to resources/assets/stylesheets/scss/i18n.scss
index b2c59d6e62f..70136a109b1 100644
--- a/resources/assets/stylesheets/less/i18n.less
+++ b/resources/assets/stylesheets/scss/i18n.scss
@@ -1,11 +1,11 @@
div.i18n_group {
- @max-width: 28px;
+ $max-width: 28px;
position: relative;
> select.i18n {
border: 0;
- border-right: 1px solid @light-gray-color-40;
- border-bottom: 1px solid @light-gray-color-40;
+ border-right: 1px solid $light-gray-color-40;
+ border-bottom: 1px solid $light-gray-color-40;
border-radius: 0;
box-sizing: border-box;
margin: 0 !important;
@@ -14,15 +14,15 @@ div.i18n_group {
left: 1px;
height: 31px;
overflow: hidden;
- max-width: @max-width;
- z-index: 2; // stay above ckeditor toolbar
+ max-width: $max-width;
+ z-index: 2;
appearance: none;
background-position: left 4px center;
background-repeat: no-repeat;
background-size: 20px auto;
- padding: 0px 2px 0px 28px !important;
+ padding: 0 2px 0 28px !important;
> option {
background-position: left 1px center;
@@ -33,7 +33,7 @@ div.i18n_group {
> div.i18n {
input[type=text], > textarea, .editor_toolbar .buttons, .ck-toolbar {
- padding-left: (@max-width + 6px) !important;
+ padding-left: ($max-width + 6px) !important;
}
}
}
diff --git a/resources/assets/stylesheets/less/lists.less b/resources/assets/stylesheets/scss/lists.scss
similarity index 71%
rename from resources/assets/stylesheets/less/lists.less
rename to resources/assets/stylesheets/scss/lists.scss
index 20ed99425be..11c9d965d7b 100644
--- a/resources/assets/stylesheets/less/lists.less
+++ b/resources/assets/stylesheets/scss/lists.scss
@@ -1,41 +1,18 @@
-// Lists
-// -------------------------
-
// Unordered and Ordered lists
ul,
ol {
margin-top: 0;
margin-bottom: 0;
+
ul,
ol {
margin-bottom: 0;
}
}
-
-// List options
-
-// Unstyled keeps list items block level, just removes default browser padding and list-style
-.list-unstyled {
- padding-left: 0;
- list-style: none;
-}
-
-// Inline turns list items into inline-block
-.list-inline {
- .list-unstyled();
- margin-left: -5px;
-
- > li {
- display: inline-block;
- padding-left: 5px;
- padding-right: 5px;
- }
-}
-
//comma separated
.list-csv {
- .list-inline();
+ @include list-inline();
margin-left: 0;
> li {
@@ -44,6 +21,7 @@ ol {
&::after {
content: ",";
}
+
&:last-child::after {
content: "";
}
@@ -55,12 +33,14 @@ ol {
}
}
}
+
.list-pipe-separated {
- .list-inline();
+ @include list-inline();
display: flex; // Prevents the mystery gap between elements
> li {
- border-right: 1px solid @dark-gray-color;
+ border-right: 1px solid $dark-gray-color;
+
&:last-child {
border-right: 0;
}
@@ -94,6 +74,7 @@ ul.default {
li:only-child {
list-style: none;
}
+
li:not(:last-child) {
margin-bottom: 0.25em;
}
@@ -103,10 +84,12 @@ dl.default {
display: grid;
grid-column-gap: 1ex;
grid-template-columns: max-content auto;
+
dt {
font-weight: normal;
grid-column-start: 1;
}
+
dd {
grid-column-start: 2;
}
diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss
new file mode 100644
index 00000000000..f8d7660f0d7
--- /dev/null
+++ b/resources/assets/stylesheets/scss/messages.scss
@@ -0,0 +1,123 @@
+#reloader.more {
+ display: none;
+}
+
+.unread {
+ font-weight: bold;
+}
+
+.dropping {
+ background-color: $content-color;
+
+ a {
+ color: $white;
+ }
+}
+
+a.message-tag {
+ $white-space: nowrap;
+ @include icon(before, tag, clickable);
+}
+
+#message-move-handle {
+ background-color: rgba(255, 255, 255, 0.3);
+ padding: 3px;
+ border-radius: 5px;
+ border: thin solid $black;
+
+ @include icon(before, mail, clickable, 20px, 2px);
+}
+
+#messages-tags.dragging .sidebar-widget-content {
+ background-color: $activity-color-20;
+}
+
+#statusbar_container {
+ > .statusbar {
+ border: thin solid $light-gray-color;
+ min-width: 100%;
+ max-width: 100%;
+ background-color: $content-color-40;
+
+ > .progress {
+ background-color: $content-color;
+ width: 100%;
+ min-width: 0;
+ max-width: 0;
+ height: 20px;
+ line-height: 20px;
+
+ &.progress-error {
+ background-color: $red;
+ }
+ }
+
+ > .progresstext {
+ margin-top: -20px;
+ text-align: center;
+ color: $white;
+ height: 20px;
+ line-height: 20px;
+ }
+ }
+}
+
+#message_metadata tr {
+ vertical-align: top;
+}
+
+#adressees {
+ max-height: 120px;
+ overflow: auto;
+
+ li.adressee {
+ $white-space: nowrap;
+ }
+}
+
+.message_body {
+ background-color: $content-color-20;
+ margin: 3px;
+ padding: 10px;
+}
+
+.responsive_author {
+ margin: 0;
+ font-size: 0.8em;
+ color: $base-gray;
+}
+
+.message-search-wrapper {
+ display: flex;
+ justify-content: flex-start;
+ margin-top: 1ex;
+
+ > * {
+ margin-right: 1em;
+ }
+}
+
+ul.message-options {
+ list-style: none;
+ margin: 1em 0 0;
+ padding: 0;
+ text-align: center;
+
+ > li {
+ display: inline-block;
+ min-width: 70px;
+ }
+}
+
+#messages {
+ td.title {
+ > a {
+ display: block;
+
+ > div.message-indicators {
+ float: right;
+ margin-right: 5px;
+ }
+ }
+ }
+}
diff --git a/resources/assets/stylesheets/less/plus.less b/resources/assets/stylesheets/scss/plus.scss
similarity index 80%
rename from resources/assets/stylesheets/less/plus.less
rename to resources/assets/stylesheets/scss/plus.scss
index 0d090beb923..ea0b7b35f14 100644
--- a/resources/assets/stylesheets/less/plus.less
+++ b/resources/assets/stylesheets/scss/plus.scss
@@ -1,9 +1,4 @@
.plus {
-
- td.element {
- padding-bottom: 2em;
- }
-
.element_header {
display: inline-block;
width: 250px;
@@ -54,9 +49,9 @@
.thumb_holder {
width: 250px;
text-align: center;
- background-color: @content-color-20;
- border-top: 1px solid fadeout(@brand-color-lighter, 80%);
- border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
+ background-color: $content-color-20;
+ border-top: 1px solid mix($brand-color-lighter, $white, 80%);
+ border-bottom: 1px solid mix($brand-color-lighter, $white, 80%);
}
.descriptionbox {
@@ -79,6 +74,6 @@
}
article.studip > section:not(:last-child) {
- border-bottom: 1px solid @table-header-color;
+ border-bottom: 1px solid $table-header-color;
}
}
diff --git a/resources/assets/stylesheets/less/questionnaire.less b/resources/assets/stylesheets/scss/questionnaire.scss
similarity index 78%
rename from resources/assets/stylesheets/less/questionnaire.less
rename to resources/assets/stylesheets/scss/questionnaire.scss
index 3b26c550096..da2a64c03b1 100644
--- a/resources/assets/stylesheets/less/questionnaire.less
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -1,66 +1,80 @@
.questionnaire_edit {
section {
- border: thin solid black;
+ border: thin solid $black;
margin: 3px;
}
+
.options {
- padding: 0px;
+ padding: 0;
list-style-type: none;
+
> li {
margin-top: 5px;
margin-bottom: 5px;
+
> .move {
cursor: move;
display: inline-block;
vertical-align: middle;
}
+
> input {
display: inline-block;
vertical-align: middle;
}
+
> input[type=text] {
- width: calc(~"100% - 70px");
+ width: calc(100% - 70px);
}
+
.delete {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
+
.add {
display: none;
vertical-align: middle;
cursor: pointer;
}
}
+
> li:last-child .delete {
display: none;
}
+
> li:last-child .add {
display: inline-block;
}
+
> li:only-child .move {
display: none;
}
}
+
.all_questions {
.question:first-child .move_up {
display: none;
}
+
.question:last-child .move_down {
display: none;
}
}
+
.add_questions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
- border: thin dashed @content-color-40;
+ border: thin dashed $content-color-40;
+
> a {
background-color: transparent;
margin: 10px;
- border: thin solid @content-color-20;
+ border: thin solid $content-color-20;
padding: 5px;
width: 100px;
min-width: 100px;
@@ -74,12 +88,14 @@
justify-content: space-around;
align-items: center;
text-align: center;
+
> img {
margin-left: auto;
margin-right: auto;
}
}
}
+
.questionnaire_metadata {
margin-top: 10px;
}
@@ -88,40 +104,43 @@
.questionnaire_results {
> article {
padding: 7px;
+
> :first-child {
- margin-top: 0px;
+ margin-top: 0;
}
}
+
.ct-label {
color: rgba(0, 0, 0, 0.8);
- text-shadow: -1px 0px white, 0px 1px white, 1px 0px white, 0px -1px white;
+ text-shadow: -1px 0px $white, 0px 1px $white, 1px 0px $white, 0px -1px $white;
font-size: 1rem;
- fill: black;
+ fill: $black;
}
+
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
//Balkenfarbe
- stroke: @red;
+ stroke: $red;
}
- //Tortenst�cke:
+
+ //Tortenstücke:
.ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
- fill: @red;
+ fill: $red;
}
+
.ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
- fill: @brand-color-dark;
- }
- .ct-series-b .ct-label, .ct-series-a .ct-label {
- //color: white;
- //text-shadow: -1px 0 @light-gray-color, 0 1px @light-gray-color, 1px 0 @light-gray-color, 0 -1px @light-gray-color;
- //fill: white;
+ fill: $brand-color-dark;
}
+
.ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
- fill: @activity-color;
+ fill: $activity-color;
}
+
.ct-series-d .ct-area, .ct-series-d .ct-slice-pie {
- fill: @content-color;
+ fill: $content-color;
}
+
.ct-series-e .ct-area, .ct-series-e .ct-slice-pie {
- fill: @orange;
+ fill: $orange;
}
table tbody tr:last-child td {
@@ -133,12 +152,14 @@
.questionnaire_answer > article {
padding: 7px;
border: none;
- border-top: 1px solid @content-color-40;
+ border-top: 1px solid $content-color-40;
+
> :first-child {
margin-top: 0px;
}
+
.invalidation_notice {
- color: @red;
+ color: $red;
}
}
@@ -147,6 +168,7 @@
.statusgroupselector {
> li > label {
cursor: pointer;
+
> input:checked + span {
text-decoration: line-through;
}
@@ -155,38 +177,41 @@
.questionnaire .terms, .questionnaire_results .terms {
text-align: center;
- border-top: thin solid @content-color-40;
- color: @light-gray-color;
+ border-top: thin solid $content-color-40;
+ color: $light-gray-color;
margin: 0 -10px;
}
#qr_code {
display: none;
- background-color: white;
+ background-color: $white;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: space-around;
align-items: center;
- color: #444444;
+ color: $dark-gray-color;
+
.code > div {
margin-left: auto;
margin-right: auto;
text-align: center;
}
+
.code img {
width: 70vh;
height: 70vh;
}
.header {
- background-image: url("@{image-path}/logos/logoklein.png");
+ background-image: url("#{$image-path}/logos/logoklein.png");
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
}
}
+
#qr_code:fullscreen {
display: flex;
}
diff --git a/resources/assets/stylesheets/less/quicksearch.less b/resources/assets/stylesheets/scss/quicksearch.scss
similarity index 82%
rename from resources/assets/stylesheets/less/quicksearch.less
rename to resources/assets/stylesheets/scss/quicksearch.scss
index 35d7ae72c72..8a80b8ada31 100644
--- a/resources/assets/stylesheets/less/quicksearch.less
+++ b/resources/assets/stylesheets/scss/quicksearch.scss
@@ -5,9 +5,9 @@ form#search_sem_quick_search_frame {
}
input.quicksearchbox {
- background-color: @dark-gray-color-10;
- border: 1px solid @dark-gray-color-40;
- color: @base-color;
+ background-color: $dark-gray-color-10;
+ border: 1px solid $dark-gray-color-40;
+ color: $base-color;
font-size: 14px;
width: 250px;
height: 19px;
@@ -21,14 +21,14 @@ div.quicksearch_frame {
box-sizing: border-box;
border-width: 1px 30px 1px 1px;
border-style: solid;
- border-color: @base-color-60;
+ border-color: $base-color-60;
border-image: none;
display: inline-block !important;
}
input[name=course_search_button] {
margin-left: -34px !important;
- margin-top: 0px !important;
+ margin-top: 0 !important;
}
input[type=submit] {
@@ -39,7 +39,7 @@ div.quicksearch_frame {
border: 0;
width: 29px;
height: 24px;
- .background-icon('search', 'info_alt');
+ @include background-icon(search, info_alt);
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
@@ -83,9 +83,9 @@ div.quicksearch_frame {
+ input[type=submit] {
float: none;
- margin-left: 0px;
+ margin-left: 0;
height: 30px;
- background-color: #7E92B0;
+ background-color: $base-color-60;
background-position: center center;
}
}
@@ -96,8 +96,8 @@ div.quicksearch_frame {
width: 100%;
.dropdownmenu {
- max-width: 0px;
- max-height: 0px;
+ max-width: 0;
+ max-height: 0;
overflow: visible;
position: relative;
top: 31px;
@@ -105,10 +105,9 @@ div.quicksearch_frame {
.autocomplete__results {
list-style-type: none;
padding: 1px;
- border: 1px solid @light-gray-color-40;
- background-color: white;
+ border: 1px solid $light-gray-color-40;
+ background-color: $white;
z-index: 99999;
- width: 200px;
max-height: 275px;
width: 600px;
overflow-x: auto;
@@ -121,8 +120,8 @@ div.quicksearch_frame {
align-items: flex-start;
&:hover, &.autocomplete__result--selected {
- background-color: @base-color;
- color: white;
+ background-color: $base-color;
+ color: $white;
}
img {
diff --git a/resources/assets/stylesheets/scss/visibility.scss b/resources/assets/stylesheets/scss/visibility.scss
index 130d7838dda..02004d21dc4 100644
--- a/resources/assets/stylesheets/scss/visibility.scss
+++ b/resources/assets/stylesheets/scss/visibility.scss
@@ -37,45 +37,45 @@
}
-.hidden-large-down {
+@mixin hidden-large-down {
@include media-breakpoint-large-down() {
display: none !important;
}
}
-.hidden-large-up {
+@mixin hidden-large-up {
@include media-breakpoint-large-up() {
display: none !important;
}
}
-.hidden-medium-down {
+@mixin hidden-medium-down {
@include media-breakpoint-medium-down() {
display: none !important;
}
}
-.hidden-medium-up {
+@mixin hidden-medium-up {
@include media-breakpoint-medium-up() {
display: none !important;
}
}
-.hidden-small-down {
+@mixin hidden-small-down {
@include media-breakpoint-small-down() {
display: none !important;
}
}
-.hidden-small-up {
+@mixin hidden-small-up {
@include media-breakpoint-small-up() {
display: none !important;
}
}
-.hidden-tiny-down {
+@mixin hidden-tiny-down {
@include media-breakpoint-tiny-down() {
display: none !important;
}
}
-.hidden-tiny-up {
+@mixin hidden-tiny-up {
@include media-breakpoint-tiny-up() {
display: none !important;
}
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index d521c36d894..c66e5094f18 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -14,7 +14,6 @@
@import "less/tables.less";
@import "less/forms.less";
@import "less/content.less";
-@import "less/css_tree.less";
@import "less/layouts.less";
@import "less/header.less";
@@ -26,25 +25,19 @@
@import "less/content_box.less";
@import "less/badges.less";
@import "less/studip-selection.less";
-@import "less/article.less";
@import "less/comments.less";
-@import "less/ajax.less";
@import "less/autocomplete.less";
@import "less/avatar.less";
@import "less/buttons.less";
@import "less/messagebox.less";
-@import "less/messages.less";
-@import "less/quicksearch.less";
@import "less/search.less";
@import "less/tabs.less";
-@import "less/questionnaire.less";
@import "less/copyable-links.less";
@import "less/calendar.less";
@import "less/contacts.less";
@import "less/cronjobs.less";
-@import "less/dashboard.less";
@import "less/documents.less";
@import "less/files.less";
@import "less/evaluation.less";
@@ -62,13 +55,10 @@
@import "less/enrolment.less";
@import "less/dialog.less";
@import "less/studip-overlay.less";
-@import "less/lists.less";
@import "less/selects.less";
-@import "less/plus.less";
@import "less/coursewizard.less";
@import "less/smileys.less";
@import "less/big-image-handler.less";
-@import "less/i18n.less";
@import "less/globalsearch.less";
@import "less/gradebook.less";
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 4b8ae99f6fa..9e0d1f88b1a 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -12,40 +12,51 @@
@import "scss/admin";
@import "scss/admin-courses";
@import "scss/admission";
+@import "scss/article";
+@import "scss/ajax";
@import "scss/avatar";
@import "scss/blubber";
+@import "scss/buttons";
@import "scss/contentbar";
@import "scss/contents";
@import "scss/courseware";
+@import "scss/css_tree";
@import "scss/dates";
+@import "scss/dashboard";
@import "scss/files";
@import "scss/forum";
+@import "scss/grid";
+@import "scss/i18n";
@import "scss/fullscreen";
-@import "scss/progress_indicator.scss";
@import "scss/links";
+@import "scss/lists";
+@import "scss/messages";
@import "scss/my_courses";
@import "scss/mvv";
@import "scss/oer";
@import "scss/qrcode";
+@import "scss/questionnaire";
+@import "scss/quicksearch";
@import "scss/oauth2";
@import "scss/pagination";
+@import "scss/plus";
+@import "scss/progress_indicator.scss";
@import "scss/profile";
@import "scss/raumzeit";
@import "scss/report";
@import "scss/resources";
@import "scss/sidebar";
-@import "scss/tooltip";
-@import "scss/table_of_contents";
-@import "scss/wiki";
@import "scss/select";
@import "scss/skiplinks";
@import "scss/start";
@import "scss/scroll-to-top";
@import "scss/studygroup";
+@import "scss/table_of_contents";
+@import "scss/tooltip";
@import "scss/tfa";
@import "scss/tour";
+@import "scss/wiki";
-@import "scss/grid";
// Class for DOM elements that should only be visible to Screen readers
.sr-only {
--
GitLab