diff --git a/resources/assets/stylesheets/less/avatar.less b/resources/assets/stylesheets/less/avatar.less
deleted file mode 100644
index 8a400688dceb956ac053e8883df464e114241b9e..0000000000000000000000000000000000000000
--- a/resources/assets/stylesheets/less/avatar.less
+++ /dev/null
@@ -1,116 +0,0 @@
-@import (inline) "../../../../node_modules/cropperjs/dist/cropper.css";
-
-/* --- Avatars of users, courses and institutes ----------------------------- */
-.avatar-small {
- vertical-align: middle;
- .size(@avatar-small, @avatar-small);
-}
-.avatar-medium {
- max-width: @avatar-medium;
- height: @avatar-medium;
-}
-.avatar-normal {
- max-width: @avatar-normal;
- height: @avatar-normal;
-}
-
-.course-avatar-small {
- vertical-align: middle;
- max-width: 25px;
- height: 25px;
-}
-.course-avatar-medium {
- max-width: 180px;
- height: 60px;
-}
-
-.license-avatar-normal {
- max-height: 100px;
- width: 300px;
-}
-.license-avatar-medium {
- height: 40px;
- max-width: 120px;
-}
-.license-avatar-small {
- max-height: 20px;
- width: 60px;
-}
-
-
-#custom_avatar label {
- display: block;
- font-weight: bold;
-}
-
-div#avatar {
- img {
- max-width: 100%;
- }
-}
-
-form.settings-avatar {
-
- .avatar-normal {
- display: block;
- margin-left: auto;
- margin-right: auto;
- padding: 2em;
- }
-
- .file-upload {
- flex: 1 1 auto;
- position: relative;
- top: 2em;
- }
-
- .form-text {
- color: initial;
- }
-
- .media-breakpoint-small-up({ .form-group {
- display: flex;
- align-items: normal;
- } });
-
- .media-breakpoint-small-down({
- .file-upload {
- position: initial;
- left: 0;
- top: 0;
- }
- .form-group {
- display: initial;
- }
- });
-
- .cropper-container {
- margin-left: auto;
- margin-right: auto;
-
- .cropper-view-box {
- outline: 1px solid @base-color-80;
- }
-
- .cropper-line, .cropper-point {
- background-color: @base-color-80;
- }
- }
-
- #avatar-buttons {
- padding-left: 5px;
- padding-right: 5px;
- text-align: left;
- width: 150px;
-
- a {
- align-items: center;
- display: flex;
- margin-bottom: 10px;
-
- img {
- padding-right: 5px;
- }
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/copyable-links.less b/resources/assets/stylesheets/less/copyable-links.less
deleted file mode 100644
index 0084128e4d0f5bbb0930635bbc2c99f5ced90ca3..0000000000000000000000000000000000000000
--- a/resources/assets/stylesheets/less/copyable-links.less
+++ /dev/null
@@ -1,61 +0,0 @@
-// Defines a css animation keyframes specific for this section with stop points
-// at 1/3 and 2/3. This way, the animation runs for a third of the allocated
-// time, shows the desired state for a third of the time and reverts for - you
-// guessed it - a third of the time.
-.keyframes(@name, @rules-inital, @rules-target) {
- @keyframes @name {
- 0% { @rules-inital(); }
- 33% { @rules-target(); }
- 66% { @rules-target(); }
- 100% { @rules-inital(); }
- }
-}
-
-.copyable-link-animation {
- @animation-name: copyable-links-confirmation;
- @animation-duration: 2s;
-
- // Position confirmation message above the link
- position: relative;
-
- div {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- text-align: center;
-
- .icon('before', 'check-circle', 'status-green', 16px, 5px);
- }
-
- // Flip the link and confirmation message along the x axis
- a,
- div {
- backface-visibility: hidden;
- pointer-events: none;
- }
-
- a {
- .keyframes(~"@{animation-name}-front", {
- opacity: 1;
- transform: rotateX(0);
- }, {
- opacity: 0;
- transform: rotateX(180deg);
- });
- animation: ~"@{animation-name}-front" @animation-duration linear;
- }
-
- div {
- .keyframes(~"@{animation-name}-back", {
- opacity: 0;
- transform: rotateX(180deg);
- }, {
- opacity: 1;
- transform: rotateX(0);
- });
- animation: ~"@{animation-name}-back" @animation-duration linear;
- }
-}
diff --git a/resources/assets/stylesheets/less/deprecated.less b/resources/assets/stylesheets/less/deprecated.less
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/resources/assets/stylesheets/less/navigation-hoverborder.less b/resources/assets/stylesheets/less/navigation-hoverborder.less
deleted file mode 100644
index d6a1a66dcfbc1d78fb8ccd6dee773ac2c7ed7dff..0000000000000000000000000000000000000000
--- a/resources/assets/stylesheets/less/navigation-hoverborder.less
+++ /dev/null
@@ -1,80 +0,0 @@
-@transition-duration: 300ms;
-.border-beneath(@color, @margin: 2px, @height: 3px) when (@color = 'dark') {
- .border-beneath(@dark-gray-color-80, @height, @margin);
-}
-.border-beneath(@color, @margin: 2px, @height: 3px) when (@color = 'light') {
- .border-beneath(@dark-gray-color-40, @height, @margin);
-}
-.border-beneath(@color, @margin: 2px, @height: 3px) {
- border-bottom: 0;
- padding-bottom: 0;
- position: relative;
-
- &::after {
- position: absolute;
- top: 100%;
- left: 0;
- right: 0;
- opacity: 1;
- content: '';
- display: block;
- background-color: @color;
- height: @height;
- margin-top: @margin;
-
- @media not (prefers-reduced-motion) {
- transition: left @transition-duration,
- right @transition-duration,
- opacity @transition-duration;
- }
- }
-}
-.border-shrink() {
- left: 50%;
- right: 50%;
- opacity: 0;
-}
-
-body:not(.fixed) #barTopMenu {
- > li.active {
- .border-beneath('dark');
- }
- > li:not(.active) {
- .border-beneath('light');
- &:not(:hover)::after {
- .border-shrink();
- }
- }
-
- &:hover > li:not(:hover)::after {
- .border-shrink();
- }
-
- .action-menu-icon {
- transform: rotate(-90deg);
- }
-
- .overflow li:hover {
- .border-beneath('light', 2px, 3px);
- &::after {
- transform: translate(0, -4px);
- }
- }
-}
-
-#tabs {
- > li {
- &, &.current, &:hover {
- line-height: 25px;
- }
- &.current {
- .border-beneath('dark', -2px, 3px);
- }
- &:not(.current) {
- .border-beneath('light', -2px, 3px);
- &:not(:hover)::after {
- .border-shrink();
- }
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/typography.less b/resources/assets/stylesheets/less/typography.less
deleted file mode 100644
index c74b88502b031b70716e563f9aa5f4aef46f014f..0000000000000000000000000000000000000000
--- a/resources/assets/stylesheets/less/typography.less
+++ /dev/null
@@ -1,90 +0,0 @@
-// Body reset
-
-html {
- font-size: 62.5%;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-body {
- font-family: @font-family-base;
- font-size: @font-size-base;
- line-height: @line-height-base;
- color: @text-color;
-}
-
-// Reset fonts for relevant elements
-
-input,
-button,
-select,
-textarea {
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
-}
-
-//
-// Typography
-// --------------------------------------------------
-
-
-// Headings
-// -------------------------
-
-h1, h2, h3, h4, h5, h6 {
- font-family: @headings-font-family;
- font-weight: @headings-font-weight;
- line-height: @headings-line-height;
- color: @headings-color;
-}
-
-h1,
-h2,
-h3 {
- margin-top: @line-height-computed;
- margin-bottom: (@line-height-computed / 2);
-}
-
-h4,
-h5,
-h6, {
- margin-top: (@line-height-computed / 2);
- margin-bottom: (@line-height-computed / 2);
-}
-
-h1 { font-size: @font-size-h1; }
-h2 { font-size: @font-size-h2; }
-h3 { font-size: @font-size-h3; }
-h4 { font-size: @font-size-h4; }
-h5 { font-size: @font-size-h5; }
-h6 { font-size: @font-size-h6; }
-
-
-// Headings with borders
-// -------------------------
-
-h1, h2 {
- font-size: 1.3em;
-}
-
-
-h1 {
- margin-top: 0px;
- span {
- display: block;
- font-size: (@font-size-h1 * 0.75);
- font-weight: (@headings-font-weight / 7);
- padding: (@line-height-computed / 4) 0;
- }
-}
-
-// Body text
-// -------------------------
-
-p {
- margin: 0 0 (@line-height-computed / 2);
-}
-
-.text-center {
- text-align: center;
-}
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index b843a7e52803aedf9133cc5425108b0f2a5352ca..2073450a538be2565a26c3d8a15f864ebb9d3115 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -205,7 +205,7 @@
background-attachment: local, local, scroll, scroll;
}
-%scrollbox-horizontal {
+@mixin scrollbox-horizontal {
overflow: auto;
background:
diff --git a/resources/assets/stylesheets/scss/avatar.scss b/resources/assets/stylesheets/scss/avatar.scss
index 7eb3a401656b25b48b4e189e968299daf18fbf67..f8629e96ec6d4bb3850cc58a4575e819fd3eba18 100644
--- a/resources/assets/stylesheets/scss/avatar.scss
+++ b/resources/assets/stylesheets/scss/avatar.scss
@@ -43,3 +43,127 @@ div.avatar-widget {
}
}
}
+
+@import "../../../../node_modules/cropperjs/dist/cropper";
+
+/* --- Avatars of users, courses and institutes ----------------------------- */
+.avatar-small {
+ vertical-align: middle;
+ @include size($avatar-small, $avatar-small);
+}
+
+.avatar-medium {
+ max-width: $avatar-medium;
+ height: $avatar-medium;
+}
+
+.avatar-normal {
+ max-width: $avatar-normal;
+ height: $avatar-normal;
+}
+
+.course-avatar-small {
+ vertical-align: middle;
+ max-width: 25px;
+ height: 25px;
+}
+
+.course-avatar-medium {
+ max-width: 180px;
+ height: 60px;
+}
+
+.license-avatar-normal {
+ max-height: 100px;
+ width: 300px;
+}
+
+.license-avatar-medium {
+ height: 40px;
+ max-width: 120px;
+}
+
+.license-avatar-small {
+ max-height: 20px;
+ width: 60px;
+}
+
+
+#custom_avatar label {
+ display: block;
+ font-weight: bold;
+}
+
+div#avatar {
+ img {
+ max-width: 100%;
+ }
+}
+
+form.settings-avatar {
+
+ .avatar-normal {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 2em;
+ }
+
+ .file-upload {
+ flex: 1 1 auto;
+ position: relative;
+ top: 2em;
+ }
+
+ .form-text {
+ color: initial;
+ }
+
+ @include media-breakpoint-small-up() {
+ .form-group {
+ display: flex;
+ align-items: normal;
+ }
+ }
+
+ @include media-breakpoint-small-down() {
+ .file-upload {
+ position: initial;
+ left: 0;
+ top: 0;
+ }
+ .form-group {
+ display: initial;
+ }
+ }
+
+ .cropper-container {
+ margin-left: auto;
+ margin-right: auto;
+
+ .cropper-view-box {
+ outline: 1px solid $base-color-80;
+ }
+
+ .cropper-line, .cropper-point {
+ background-color: $base-color-80;
+ }
+ }
+
+ #avatar-buttons {
+ padding-left: 5px;
+ padding-right: 5px;
+ text-align: left;
+ width: 150px;
+
+ a {
+ align-items: center;
+ display: flex;
+ margin-bottom: 10px;
+
+ img {
+ padding-right: 5px;
+ }
+ }
+ }
+}
diff --git a/resources/assets/stylesheets/less/clipboard.less b/resources/assets/stylesheets/scss/clipboard.scss
similarity index 79%
rename from resources/assets/stylesheets/less/clipboard.less
rename to resources/assets/stylesheets/scss/clipboard.scss
index 4026c5bf1c6e1f47c719c96cefcf7ef4abe9d17d..dc4d4be2710d688077ad4b1a08b0f29ead7006e2 100644
--- a/resources/assets/stylesheets/less/clipboard.less
+++ b/resources/assets/stylesheets/scss/clipboard.scss
@@ -18,12 +18,12 @@
.dragged-clipboard-item {
position: fixed;
- z-index: @drag_and_drop_z_index;
- border: @drag_and_drop_border;
- color: @base-color;
+ z-index: $drag_and_drop_z_index;
+ border: $drag_and_drop_border;
+ color: $base-color;
font-weight: bold;
- font-size: @font-size-large;
- background-color: @white;
+ font-size: $font-size-large;
+ background-color: $white;
}
div.clipboard-area-container {
@@ -34,7 +34,7 @@ div.clipboard-area-container {
table.clipboard-area {
width: 100%;
- border: 1px solid @content-color-40;
+ border: 1px solid $content-color-40;
height: 8em;
padding: 0.25em;
}
@@ -66,10 +66,10 @@ table.clipboard-area tr.empty-clipboard-message > td {
@keyframes drop-animation {
0% {
- background-color: @yellow-60;
+ background-color: $yellow-60;
}
100% {
- background-color: @white;
+ background-color: $white;
}
}
diff --git a/resources/assets/stylesheets/less/contacts.less b/resources/assets/stylesheets/scss/contacts.scss
similarity index 97%
rename from resources/assets/stylesheets/less/contacts.less
rename to resources/assets/stylesheets/scss/contacts.scss
index cb04db02749e8c1aa0a2cfbc840387ad4552ec91..95effd48281aa97e7bc30f3e04d22b2c8904273d 100644
--- a/resources/assets/stylesheets/less/contacts.less
+++ b/resources/assets/stylesheets/scss/contacts.scss
@@ -41,7 +41,7 @@ table.contact-header {
&:hover { background-color: #b7c2e2; }
a {
- color: #f00;
+ color: $red;
font-weight: bold;
}
}
diff --git a/resources/assets/stylesheets/less/content_box.less b/resources/assets/stylesheets/scss/content_box.scss
similarity index 82%
rename from resources/assets/stylesheets/less/content_box.less
rename to resources/assets/stylesheets/scss/content_box.scss
index 2d3482fafe81394234fc65c886991c4f320c7556..1862ddf3e5634318d9a5c57e8db601d91851ff2a 100644
--- a/resources/assets/stylesheets/less/content_box.less
+++ b/resources/assets/stylesheets/scss/content_box.scss
@@ -1,5 +1,5 @@
section.contentbox {
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
@@ -12,11 +12,11 @@ section.contentbox {
justify-content: space-between;
padding: 2px;
- background-color: @content-color-20;
+ background-color: $content-color-20;
span.title {
font-size: medium;
- color: @base-color;
+ color: $base-color;
&.no-overflow {
width: calc(100% - 1.5em);
@@ -26,7 +26,7 @@ section.contentbox {
&:after {
content: "";
width: 4em;
- background: linear-gradient(to right, transparent, @content-color-20);
+ background: linear-gradient(to right, transparent, $content-color-20);
position: absolute;
height: 1.5em;
right: 2.5em;
@@ -38,9 +38,10 @@ section.contentbox {
flex: 1 0 0;
padding: 5px;
margin: 0;
- color: @base-color;
+ color: $base-color;
border-bottom: none;
font-size: medium;
+
> a {
img, svg {
margin-right: 5px;
@@ -61,15 +62,18 @@ section.contentbox {
}
}
}
+
footer:empty {
display: none !important;
}
+
footer {
text-align: center;
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-top-style: solid;
border-width: 1px;
- background-color: white;}
+ background-color: $white;
+ }
section {
padding: 10px;
@@ -85,13 +89,13 @@ section.contentbox {
}
> article {
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-style: solid;
border-width: 1px;
margin: 10px;
> p, > section, > footer, > div {
- max-height: 0px;
+ max-height: 0;
opacity: 0;
overflow: auto;
transition: opacity 0.3s;
@@ -124,7 +128,7 @@ section.contentbox {
font-size: small;
width: 100%;
font-weight: bold;
- color: black;
+ color: $black;
}
}
@@ -141,14 +145,17 @@ section.contentbox {
header {
h1 a {
- .icon('before', "arr_1right", 'clickable');
+ @include icon(before, arr_1right, clickable);
+
&:before {
transition: all 200ms ease 0s;
margin-right: 2px;
}
+
display: flex;
align-items: center;
}
+
nav {
a, > span {
display: inline-block;
@@ -158,12 +165,14 @@ section.contentbox {
> span {
&:last-child {
border-right: none;
- padding-right: 0px;
+ padding-right: 0;
}
+
display: inline-block;
- border-right: 1px solid @content-color;
- padding: 0px 5px;
+ border-right: 1px solid $content-color;
+ padding: 0 5px;
}
+
a {
padding-left: 5px;
align-items: center;
@@ -174,36 +183,39 @@ section.contentbox {
footer {
text-align: center;
- border-color: @content-color-40;
+ border-color: $content-color-40;
border-top-style: none;
border-width: 1px;
- background-color: white;
+ background-color: $white;
+
h1 {
font-size: 1em;
font-weight: bold;
border: none;
padding: 0;
}
+
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;
+ margin: auto auto 4px;
text-align: left;
+
h1 {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
+
time {
- float:right;
+ float: right;
font-size: 0.8em;
- color: @light-gray-color-40;
+ color: $light-gray-color-40;
}
}
}
&:not(.open) header ~ * {
- max-height: 0px;
+ max-height: 0;
opacity: 0;
overflow: auto;
transition: opacity 0.3s;
@@ -227,14 +239,15 @@ section.contentbox {
&.new {
header h1 a {
- .icon('before', "arr_1right", 'new');
+ @include icon(before, arr_1right, new);
}
}
&.indented {
margin-left: calc(10px + 1em);
+
> header {
- background-color: mix(@content-color, #fff, 10%);
+ background-color: mix($content-color, $white, 10%);
}
}
}
diff --git a/resources/assets/stylesheets/scss/copyable-links.scss b/resources/assets/stylesheets/scss/copyable-links.scss
new file mode 100644
index 0000000000000000000000000000000000000000..db719e0ef97e60db6b7a77ae8ef1f0aae6914d88
--- /dev/null
+++ b/resources/assets/stylesheets/scss/copyable-links.scss
@@ -0,0 +1,69 @@
+.copyable-link-animation {
+ $animation-name: copyable-links-confirmation;
+ $animation-duration: 2s;
+
+ // Position confirmation message above the link
+ position: relative;
+
+ div {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ text-align: center;
+
+ @include icon(before, check-circle, status-green, 16px, 5px);
+ }
+
+ // Flip the link and confirmation message along the x axis
+ a, div {
+ backface-visibility: hidden;
+ pointer-events: none;
+ }
+
+ a {
+ @keyframes copyable-links-confirmation-front {
+ 0% {
+ opacity: 1;
+ transform: rotateX(0);
+ }
+ 33% {
+ opacity: 0;
+ transform: rotateX(180deg);
+ }
+ 66% {
+ opacity: 0;
+ transform: rotateX(180deg);
+ }
+ 100% {
+ opacity: 1;
+ transform: rotateX(0);
+ }
+ }
+ animation: copyable-links-confirmation-front $animation-duration linear;
+ }
+
+ div {
+ @keyframes copyable-links-confirmation-back {
+ 0% {
+ opacity: 0;
+ transform: rotateX(180deg);
+ }
+ 33% {
+ opacity: 1;
+ transform: rotateX(0);
+ }
+ 66% {
+ opacity: 1;
+ transform: rotateX(0);
+ }
+ 100% {
+ opacity: 0;
+ transform: rotateX(180deg);
+ }
+ }
+ animation: copyable-links-confirmation-back $animation-duration linear;
+ }
+}
diff --git a/resources/assets/stylesheets/less/cronjobs.less b/resources/assets/stylesheets/scss/cronjobs.scss
similarity index 87%
rename from resources/assets/stylesheets/less/cronjobs.less
rename to resources/assets/stylesheets/scss/cronjobs.scss
index d81ebd73e976b356776e860c32f78841daad842a..a022898ea80b67659197cfb143b60079940ab3ce 100644
--- a/resources/assets/stylesheets/less/cronjobs.less
+++ b/resources/assets/stylesheets/scss/cronjobs.scss
@@ -13,11 +13,11 @@
display: none;
}
.selected {
- td { background-color: fadeout(@active-color, 75%); }
+ td { background-color: $red-40; }
tr ~ tr {
display: table-row;
td {
- background-color: #fff;
+ background-color: $white;
}
td[colspan] {
background-color: inherit;
@@ -26,7 +26,7 @@
}
}
.parameters {
- border: 1px solid #888;
+ border: 1px solid $dark-gray-color;
border-bottom: 0;
border-top: 0;
padding: 0.5em;
@@ -49,7 +49,7 @@
}
}
tbody:last-child .parameters {
- border-bottom: 1px solid #888;
+ border-bottom: 1px solid $white;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
@@ -81,7 +81,7 @@
}
.inactivatible td {
- color: #888;
+ color: $dark-gray-color;
}
.cronjobs-edit {
@@ -89,7 +89,7 @@
margin: 0 0 0.5em;
}
- > table > thead > tr > th { .table_header_bold; }
+ //> table > thead > tr > th { .table_header_bold; }
> table {
margin-bottom: 1em;
}
diff --git a/resources/assets/stylesheets/less/forms.less b/resources/assets/stylesheets/scss/forms.scss
similarity index 81%
rename from resources/assets/stylesheets/less/forms.less
rename to resources/assets/stylesheets/scss/forms.scss
index abbf89c59f8c466825c146aa5ee2528b1401290b..ad39aa3655434d46e77183f28024a998e759d60e 100644
--- a/resources/assets/stylesheets/less/forms.less
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -1,38 +1,38 @@
-form.default {
- @gap: 1.5ex;
+$gap: 1.5ex;
- @max-width-s: 8em;
- @max-width-m: 48em;
- @max-width-l: 100%;
+$max-width-s: 8em;
+$max-width-m: 48em;
+$max-width-l: 100%;
+form.default {
div.select2-wrapper {
display: block ! important;
}
section {
&:not(.contentbox) {
- padding-top: @gap;
+ padding-top: $gap;
label:first-of-type {
- margin-top: 0px;
+ margin-top: 0;
}
}
}
fieldset > section:last-child {
- margin-bottom: @gap;
+ margin-bottom: $gap;
}
ol.default {
padding-left: 20px;
li {
- padding: 2px 0px;
+ padding: 2px 0;
}
}
span.empty {
- color: @light-gray-color-40;
+ color: $light-gray-color-40;
font-style: italic;
}
@@ -41,40 +41,40 @@ form.default {
textarea, select {
box-sizing: border-box;
- border: 1px solid @light-gray-color-40;
- color: @dark-gray-color;
- max-width: @max-width-m;
+ border: 1px solid $light-gray-color-40;
+ color: $dark-gray-color;
+ max-width: $max-width-m;
padding: 5px;
vertical-align: middle;
width: 100%;
transition: all 0.3s ease-out;
&:focus {
- border-color: @brand-color-dark;
+ border-color: $brand-color-dark;
}
&.size-s {
- max-width: @max-width-s;
+ max-width: $max-width-s;
}
&.size-m {
}
&.size-l {
- max-width: @max-width-l;
+ max-width: $max-width-l;
}
&[readonly] {
- background-color: @light-gray-color-20;
+ background-color: $light-gray-color-20;
}
}
.quicksearch_container {
- max-width: @max-width-m;
+ max-width: $max-width-m;
}
input[type=date], input[type=number], input[type=time], input[type=tel]:not(.size-m) {
- max-width: @max-width-s;
+ max-width: $max-width-s;
}
textarea {
@@ -83,7 +83,7 @@ form.default {
label:not(.undecorated, .ck-voice-label) {
display: block;
- margin-bottom: @gap;
+ margin-bottom: $gap;
max-width: 100%;
text-indent: 0.25ex;
vertical-align: top;
@@ -97,7 +97,7 @@ form.default {
}
.formpart {
- margin-bottom: @gap;
+ margin-bottom: $gap;
output.calculator_result {
display: block;
@@ -105,11 +105,11 @@ form.default {
}
}
.editablelist {
- margin-bottom: @gap;
+ margin-bottom: $gap;
> li {
margin-bottom: 10px;
&:last-child {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
}
}
@@ -161,17 +161,16 @@ form.default {
fieldset {
box-sizing: border-box;
- border: solid 1px @content-color-40;
+ border: solid 1px $content-color-40;
margin: 0 0 10px;
- padding: 10px;
- padding-top: @gap;
+ padding: $gap 10px 10px;
> legend {
box-sizing: border-box;
- background-color: @fieldset-header;
- border: 1px solid @content-color-40;
+ background-color: $fieldset-header;
+ border: 1px solid $content-color-40;
border-bottom: 0;
- color: @brand-color-dark;
+ color: $brand-color-dark;
font-size: 12pt;
font-weight: bold;
line-height: 2em;
@@ -186,7 +185,7 @@ form.default {
&:not(.collapsed) > label:last-child::after {
content: '';
display: block;
- margin-top: -@gap;
+ margin-top: -$gap;
}
}
@@ -196,9 +195,9 @@ form.default {
overflow:auto;
> fieldset {
- border:none;
- margin:0px;
- padding:0px;
+ border: none;
+ margin: 0;
+ padding: 0;
}
}
@@ -206,13 +205,13 @@ form.default {
font-weight: bold;
&::after {
content: "*";
- color: red;
+ color: $red;
}
}
.studiprequired {
font-weight: bold;
.asterisk {
- color: red;
+ color: $red;
}
}
@@ -221,7 +220,7 @@ form.default {
}
select[disabled] {
- background-color: @dark-gray-color-15;
+ background-color: $dark-gray-color-15;
}
.tooltip.tooltip-icon::before {
@@ -229,13 +228,11 @@ form.default {
}
footer {
- background-color: @content-color-20;
- border-top: 1px solid @brand-color-darker;
+ background-color: $content-color-20;
+ border-top: 1px solid $brand-color-darker;
clear: both;
margin-left: 0;
- padding: 10px;
- padding-top: 5px;
- padding-bottom: 5px;
+ padding: 5px 10px;
.button {
margin-bottom: 0;
@@ -246,21 +243,21 @@ form.default {
//Special inputs
label.file-upload {
- .background-icon('upload', 'clickable');
+ @include background-icon(upload, clickable);
background-repeat: no-repeat;
background-position: top left;
background-size: 20px 20px;
cursor: pointer;
padding-left: 30px;
- color: @base-color;
+ color: $base-color;
input[type=file] {
display: none;
}
.filename {
padding-left: 0.5em;
- color: @light-gray-color-80;
+ color: $light-gray-color-80;
}
}
@@ -277,25 +274,25 @@ form.default {
input[type=date], input[type=email], input[type=number],
input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel],
textarea, select {
- max-width: calc(@max-width-m - 2em);
+ max-width: calc($max-width-m - 2em);
width: calc(100% - 2em);
display: inline-block;
transition: all 0.3s ease-out;
&:focus {
- border-color: @brand-color-dark;
+ border-color: $brand-color-dark;
}
&.size-s {
- max-width: calc(@max-width-s - 2em);
+ max-width: calc($max-width-s - 2em);
}
&.size-m {
}
&.size-l {
- max-width: calc(@max-width-l - 2em);
+ max-width: calc($max-width-l - 2em);
}
}
}
@@ -304,16 +301,15 @@ form.default {
.hgroup,
.hgroup-btn {
display: flex;
- align-items: center;
flex-wrap: wrap;
align-items: flex-start;
- max-width: @max-width-m;
+ max-width: $max-width-m;
&.size-s {
- max-width: @max-width-s;
+ max-width: $max-width-s;
}
&.size-l {
- max-width: @max-width-l;
+ max-width: $max-width-l;
}
> * {
@@ -365,7 +361,7 @@ form.default {
.js &.collapsable fieldset, fieldset.collapsable {
legend {
box-sizing: border-box;
- .background-icon('arr_1down', 'clickable', 20);
+ @include background-icon(arr_1down, clickable, 20);
background-position: 6px center;
background-repeat: no-repeat;
cursor: pointer;
@@ -374,7 +370,7 @@ form.default {
&.collapsed {
legend {
- .background-icon('arr_1right', 'clickable', 20);
+ @include background-icon(arr_1right, clickable, 20);
margin-bottom: 0;
}
padding-bottom: 0;
@@ -395,7 +391,7 @@ form.default {
bottom: 100%;
right: 0;
- color: @light-gray-color;
+ color: $light-gray-color;
font-size: 0.8em;
}
@@ -426,13 +422,13 @@ form.default {
}
.invalid {
- border: 2px dotted red ! important;
+ border: 2px dotted $red ! important;
} // an invalid form entry
.invalid_message {
display: none;
font-weight: bold;
- color: red;
+ color: $red;
}
.select2-container {
@@ -479,20 +475,20 @@ form.default {
&.show_validation_hints {
:invalid, .invalid {
- .icon('before', 'exclaim-circle', 'attention', 16, 5px);
+ @include icon(before, exclaim-circle, attention, 16px, 5px);
display: inline-block;
}
textarea:invalid, input[type=text]:invalid {
- border-left: 4px solid @red;
+ border-left: 4px solid $red;
}
}
//designing vue-select in studipform:
.vs__dropdown-toggle {
- border-radius: 0px;
+ border-radius: 0;
}
.vs__selected {
- border-radius: 0px;
+ border-radius: 0;
padding: 5px;
}
@@ -502,20 +498,20 @@ form.default {
input[type=range] {
&::-moz-range-track {
height: 11px;
- border: 1px solid @content-color;
+ border: 1px solid $content-color;
background-color: transparent;
}
&::-moz-range-progress {
- background-color: @base-color;
+ background-color: $base-color;
height: 11px;
}
&::-moz-range-thumb {
- border-radius: 0px;
+ border-radius: 0;
width: 1.2em;
height: 1.2em;
}
&::-moz-range-thumb:hover {
- background-color: @content-color;
+ background-color: $content-color;
}
}
output {
@@ -529,12 +525,12 @@ form.narrow {
div.col-1, div.col-2, div.col-3, div.col-4, div.col-5,
section.col-1, section.col-2, section.col-3, section.col-4, section.col-5
{
- padding-right: 0px;
+ padding-right: 0;
}
}
// give forms some optimized styling for very narrow screen sizes
-.media-breakpoint-tiny-down({
+@include media-breakpoint-tiny-down(){
form.default {
label.col-1, div.col-1, section.col-1,
label.col-2, div.col-2, section.col-2,
@@ -544,7 +540,7 @@ form.narrow {
min-width: 100%;
}
}
-});
+}
table.hide_datafield_title {
.datafield_title {
@@ -554,8 +550,8 @@ table.hide_datafield_title {
.content-title {
background-color: transparent;
- padding-top: 0px;
- color: @base-gray;
+ padding-top: 0;
+ color: $base-gray;
font-size: 1.4em;
text-align: left;
}
diff --git a/resources/assets/stylesheets/less/globalsearch.less b/resources/assets/stylesheets/scss/globalsearch.scss
similarity index 75%
rename from resources/assets/stylesheets/less/globalsearch.less
rename to resources/assets/stylesheets/scss/globalsearch.scss
index 79ef97a9bef54f4777c9e9a3545bdc02ccc54f71..5fc1d53239f9b93fcda30245dac5487ff30e29fa 100644
--- a/resources/assets/stylesheets/less/globalsearch.less
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -2,9 +2,9 @@
align-self: flex-start;
}
#globalsearch-searchbar {
- @width: 423px;
- @hidden-width: 215px;
- @transition-duration: 300ms;
+ $width: 423px;
+ $hidden-width: 215px;
+ $transition-duration: 300ms;
position: relative;
top: 4px;
@@ -17,12 +17,12 @@
// Defines the clear icon for the input
#globalsearch-clear {
- .square(16px);
+ @include square(16px);
margin-left: -22px;
vertical-align: middle;
opacity: 0;
- transition: opacity @transition-duration;
+ transition: opacity $transition-duration;
}
&.has-value #globalsearch-clear {
opacity: 1;
@@ -32,11 +32,11 @@
#globalsearch-input {
height: 29px;
padding-left: 5px;
- width: @hidden-width;
- transition: width @transition-duration;
+ width: $hidden-width;
+ transition: width $transition-duration;
}
&.is-visible #globalsearch-input {
- width: @width;
+ width: $width;
}
// Search icon
@@ -48,10 +48,10 @@
// Hint toggle text
#globalsearch-togglehints {
- font-size: @font-size-small;
+ font-size: $font-size-small;
margin: 0;
- .icon('before', 'arr_1right', 'clickable', @font-size-small, 2px);
+ @include icon('before', 'arr_1right', 'clickable', $font-size-small, 2px);
// This is only neccessary to remove the whitespace in front of the text
// Otherwise, the text would jump when getting replaced
@@ -76,29 +76,29 @@
// List display
#globalsearch-list {
- background-color: @white;
- box-shadow: 1px 1px 1px @light-gray-color-80;
- color: @text-color;
+ background-color: $white;
+ box-shadow: 1px 1px 1px $light-gray-color-80;
+ color: $text-color;
display: none;
max-height: 90vh;
overflow: auto;
padding: 5px;
position: absolute;
- width: @width;
+ width: $width;
a {
- color: @base-color;
+ color: $base-color;
&:hover {
- color: @active-color;
+ color: $active-color;
}
}
section {
- color: @text-color;
+ color: $text-color;
header {
- color: @base-color;
+ color: $base-color;
margin: 5px;
margin-bottom: 0;
}
@@ -116,18 +116,18 @@
// "Searching..." info
#globalsearch-searching {
- @icon-size: 32px;
+ $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 {
#globalsearch-searching {
@@ -144,14 +144,14 @@
}
article {
- border: 1px solid @content-color-40;
+ border: 1px solid $content-color-40;
margin: 3px;
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;
@@ -165,9 +165,9 @@
}
div.globalsearch-more-results {
- font-size: @font-size-small;
+ font-size: $font-size-small;
font-weight: normal;
- line-height: @font-size-h3;
+ line-height: $font-size-h3;
margin-bottom: auto;
margin-top: auto;
text-align: right;
@@ -182,11 +182,11 @@
padding: 6px 6px 6px 0;
- border-top: 1px solid @content-color-40;
- transition: background-color @transition-duration;
+ border-top: 1px solid $content-color-40;
+ transition: background-color $transition-duration;
&:hover {
- background-color: fadeout(@light-gray-color, 80%);
+ background-color: $dark-gray-color-20;
}
&.globalsearch-extended-result {
@@ -207,7 +207,7 @@
margin-right: 6px;
img {
- .square(36px);
+ @include square(36px);
}
}
@@ -218,22 +218,22 @@
white-space: nowrap;
.globalsearch-result-title {
- font-size: @font-size-base;
+ font-size: $font-size-base;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
}
.globalsearch-result-details {
- color: @dark-gray-color-80;
- font-size: @font-size-small;
+ color: $dark-gray-color-80;
+ font-size: $font-size-small;
}
}
.globalsearch-result-time {
- color: @dark-gray-color-80;
+ color: $dark-gray-color-80;
flex: 0;
- font-size: @font-size-small;
+ font-size: $font-size-small;
text-align: right;
white-space: nowrap;
}
@@ -243,8 +243,8 @@
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;
}
}
@@ -277,12 +277,12 @@ html.responsive-display {
margin-left: 0;
}
#globalsearch-list {
- @padding: 5px;
+ $padding: 5px;
position: absolute;
- left: @padding;
- top: calc(@bar-bottom-container-height + @padding);
- width: calc(100vw - (2 * @padding));
+ left: $padding;
+ top: calc($bar-bottom-container-height + $padding);
+ width: calc(100vw - (2 * $padding));
}
#globalsearch-clear {
@@ -325,7 +325,7 @@ html:not(.size-large) {
right: -1px;
bottom: -1px;
left: -1px;
- background: fadeout(@base-color, 50%);
+ background: mix($base-color, rgba(255,0,0,0), 50%);
z-index: 1;
}
}
diff --git a/resources/assets/stylesheets/less/gradebook.less b/resources/assets/stylesheets/scss/gradebook.scss
similarity index 58%
rename from resources/assets/stylesheets/less/gradebook.less
rename to resources/assets/stylesheets/scss/gradebook.scss
index a71f48054f0024d4b3ddcc0d6d57835ba48fac6d..bf0a93ba359b1aaf3f4d33a57027a3ef6fb8e455 100644
--- a/resources/assets/stylesheets/less/gradebook.less
+++ b/resources/assets/stylesheets/scss/gradebook.scss
@@ -1,20 +1,23 @@
-.gradebook-student .progress {
- display: flex;
- height: 20px;
- overflow: hidden;
- font-size: 15px;
- background-color: @light-gray-color-20;
- margin: 0.5em 0;
-}
+.gradebook-student {
-.gradebook-student .progress-bar {
- display: flex;
- flex-direction: column;
- justify-content: center;
- color: white;
- text-align: center;
- white-space: nowrap;
- background-color: @base-color;
+ .progress {
+ display: flex;
+ height: 20px;
+ overflow: hidden;
+ font-size: 15px;
+ background-color: $light-gray-color-20;
+ margin: 0.5em 0;
+ }
+
+ .progress-bar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ color: $white;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $base-color;
+ }
}
.gradebook-lecturer-overview-definition {
@@ -23,7 +26,7 @@
.gradebook-lecturer-overview .gradebook-column-total,
.gradebook-lecturer-overview .gradebook-column-category {
- border-left: 1px solid @light-gray-color-20;
+ border-left: 1px solid $light-gray-color-20;
}
.gradebook-lecturer-overview .gradebook-column-category {
@@ -47,14 +50,15 @@ form.gradebook-lecturer-weights label.gradebook-weight {
}
output {
- color: @light-gray-color;
+ color: $light-gray-color;
}
output:before {
content: "~";
}
+
output:after {
- content: "Â %";
+ content: " %";
}
}
@@ -70,35 +74,38 @@ form.gradebook-lecturer-weights input[type="number"] {
font-weight: bold;
}
-article.gradebook-student h1,
-article.gradebook-student h2
-{
- border-bottom: none;
-}
+article.gradebook-student {
+ h1, h2 {
+ border-bottom: none;
+ }
+
+ > header {
+ margin-bottom: 2.5em;
+ }
-article.gradebook-student > header {
- margin-bottom: 2.5em;
}
section.gradebook-student-category {
- margin-bottom: 3em;
-}
+ > header {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 0.5em;
+ }
-section.gradebook-student-category > header {
- display: flex;
- align-items: baseline;
- margin-bottom: 0.5em;
-}
+ header {
+ &.progress {
+ flex: 1;
+ margin-left: 1em;
+ }
+ }
-section.gradebook-student-category header .progress {
- flex: 1;
- margin-left: 1em;
+ margin-bottom: 3em;
}
.gradebook-lecturer-custom-definitions .gradebook-lecturer-blank-slate {
text-align: center;
- // border-left: 1px solid @dark-gray-color-15;
- // border-bottom: 1px solid @brand-color-darker;
+ // border-left: 1px solid $dark-gray-color-15;
+ // border-bottom: 1px solid $brand-color-darker;
}
table.default .gradebook-grade-input,
@@ -111,14 +118,16 @@ table.default .gradebook-inline-actions {
white-space: nowrap;
}
-.gradebook-grade-input label {
- margin-left: 1em;
- margin-right: 1em;
- display: block;
-}
+.gradebook-grade-input {
+ label {
+ margin-left: 1em;
+ margin-right: 1em;
+ display: block;
+ }
-.gradebook-grade-input input {
- min-width: 5em;
+ input {
+ min-width: 5em;
+ }
}
.gradebook-inline-actions .action-menu-icon {
diff --git a/resources/assets/stylesheets/less/layouts.less b/resources/assets/stylesheets/scss/layouts.scss
similarity index 68%
rename from resources/assets/stylesheets/less/layouts.less
rename to resources/assets/stylesheets/scss/layouts.scss
index e5123aabd5711626576f594ca03e03af0dab091d..1a1d076e9a657df17e6f80663fcd092837677cd9 100644
--- a/resources/assets/stylesheets/less/layouts.less
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -1,16 +1,16 @@
// TODO: LESSify
-@page-margin: 15px;
+$page-margin: 15px;
-@sidebar-width: 250px;
-@sidebar-padding: 12px;
-@sidebar-border-width: 1px;
+$sidebar-width: 250px;
+$sidebar-padding: 12px;
+$sidebar-border-width: 1px;
-@content-width: 400px;
-@content-margin: 12px;
+$content-width: 400px;
+$content-margin: 12px;
-@site-width: (@page-margin * 2 + @sidebar-width + @sidebar-padding * 2 + @sidebar-border-width * 2 + @content-width + @content-margin * 2);
-@page-width: (@sidebar-width + @sidebar-padding * 2 + @sidebar-border-width * 2 + @content-width + @content-margin * 2);
+$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
+$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
/* --- Layouts -------------------------------------------------------------- */
@@ -18,15 +18,14 @@
border-radius: 0 0 2px 2px;
box-sizing: border-box;
clear: both;
- margin: @page-margin;
- background-color: #fff;
- margin: 0px;
+ margin: 0;
+ background-color: $white;
}
// for old pages without template layout
#layout_table {
- background-color: @light-gray-color-60;
- border: 20px solid #fff;
+ background-color: $light-gray-color-60;
+ border: 20px solid $white;
margin: 0;
padding: 0;
width: 100%;
@@ -35,7 +34,7 @@
}
#layout_container {
- background-color: white;
+ background-color: $white;
border-radius: 0 0 2px 2px;
/*margin: 0;*/
padding-top: 15px;
@@ -43,7 +42,7 @@
#page_title_container {
float: left;
- background-color: #fff;
+ background-color: $white;
line-height: 20px;
margin-left: 15px;
margin-right: 15px;
@@ -57,17 +56,17 @@
top: 0;
bottom: 0;
left: 0;
- width: @page-margin;
+ width: $page-margin;
}
#layout_context_title {
font-size: 1.1em;
height: 30px;
- padding-left: @page-margin;
+ padding-left: $page-margin;
max-height: 30px;
overflow: hidden;
- background: linear-gradient(to bottom, @dark-gray-color-5, @dark-gray-color-10);
+ background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10);
> .context_icon {
margin: 7px 1px 0 9px;
@@ -81,12 +80,12 @@
.contextless & {
.colorblock {
- width: 0px;
+ width: 0;
}
#layout_context_title {
color: rgba(0, 0, 0, 0);
- height: 0px;
+ height: 0;
max-height: 35px;
// text-indent: -100%;
//
@@ -96,7 +95,7 @@
}
.tabs_wrapper {
- padding-left: 0px;
+ padding-left: 0;
}
}
}
@@ -114,10 +113,10 @@
#layout_content {
box-sizing: border-box;
- .scrollbox-horizontal();
- padding: 0 @content-margin 47px @content-margin;
+ @include scrollbox-horizontal();
+ padding: 0 $content-margin 47px $content-margin;
vertical-align: top;
- min-width: @content-width;
+ min-width: $content-width;
.oversized & {
overflow: visible;
@@ -126,30 +125,29 @@
#layout_sidebar {
background: inherit;
- border-left: 1px dashed @brand-color-darker;
- max-width: @sidebar-width;
- width: @sidebar-width;
- min-width: @sidebar-width;
- padding: @sidebar-padding;
+ border-left: 1px dashed $brand-color-darker;
+ max-width: $sidebar-width;
+ width: $sidebar-width;
+ min-width: $sidebar-width;
+ padding: $sidebar-padding;
}
#layout_wrapper {
- .clearfix;
+ @include clearfix();
clear: both;
min-width: 800px; // 800px breite ist minimum
min-height: 100%;
width: 100%;
height: auto !important;
- height: 100%;
margin: 0 auto;
}
#layout_footer {
- background-color: @base-color;
- color: @contrast-content-white;
+ background-color: $base-color;
+ color: $contrast-content-white;
display: flex;
- padding: 2px 0px;
- min-width: @site-width;
+ padding: 2px 0;
+ min-width: $site-width;
width: 100%;
}
#footer {
@@ -167,7 +165,7 @@
align-items: stretch;
justify-content: flex-start;
- min-width: @site-width;
+ min-width: $site-width;
#flex-header { // first row of flex-main
display: flex;
@@ -178,13 +176,13 @@
justify-content: space-between;
width: 100%;
- min-width: @site-width;
+ min-width: $site-width;
- border-bottom: 1px solid @light-gray-color-40;
+ border-bottom: 1px solid $light-gray-color-40;
}
#barBottomContainer { // second row of flex-main
- min-width: @site-width;
+ min-width: $site-width;
z-index: 1001; // High enough so it will be above the sidebar
}
@@ -198,20 +196,20 @@
flex-grow: 1;
- min-width: @page-width;
+ min-width: $page-width;
.tabs_wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
- background-color: @dark-gray-color-10;
+ background-color: $dark-gray-color-10;
font-size: 0.9em;
- border-bottom: 1px solid @dark-gray-color-40;
+ border-bottom: 1px solid $dark-gray-color-40;
}
#tabs { // row 1 of layout_page
- padding-left: @page-margin;
+ padding-left: $page-margin;
transition: margin-left;
transition-duration: 300ms;
transition-delay: 500ms;
@@ -226,20 +224,11 @@
justify-content: flex-start;
flex-grow: 1;
- min-width: @page-width;
+ min-width: $page-width;
#layout_content { // column 1 of layout_container
flex-grow: 1;
}
}
}
-
-}
-
-@-moz-document url-prefix() {
- .flex-container {
- width: 100%;
- box-sizing: border-box;
- }
-
}
diff --git a/resources/assets/stylesheets/less/mobile.less b/resources/assets/stylesheets/scss/mobile.scss
similarity index 91%
rename from resources/assets/stylesheets/less/mobile.less
rename to resources/assets/stylesheets/scss/mobile.scss
index 2e8ca73061069f13644e87277aae36735af3bc14..2f19efcad9d29f02cfa0aac1d3cf549e73a1ca5b 100644
--- a/resources/assets/stylesheets/less/mobile.less
+++ b/resources/assets/stylesheets/scss/mobile.scss
@@ -1,4 +1,4 @@
-.media-breakpoint-small-down({
+@include media-breakpoint-small-down(){
#layout_wrapper { min-width: 0 !important; }
#login div.index_container .messagebox,
#index div.index_container .messagebox,
@@ -8,9 +8,9 @@
margin-left: auto;
margin-right: auto;
}
-});
+}
-.media-breakpoint-tiny-down({
+@include media-breakpoint-tiny-down(){
#barTopStudip img {
height: 33px;
margin-top: 5px;
@@ -47,7 +47,7 @@
padding-left: 20px;
padding-right: 20px;
position: relative;
- width: ~"calc(100% - 40px)";
+ width: calc(100% - 40px);
nav {
display: inline;
@@ -55,4 +55,4 @@
}
}
}
-});
+}
diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3b3838c5443d02e6f26ebdb2a49d554519a4050
--- /dev/null
+++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
@@ -0,0 +1,75 @@
+$transition-duration: 300ms;
+
+@mixin border-beneath($color, $margin: 2px, $height: 3px) {
+ border-bottom: 0;
+ padding-bottom: 0;
+ position: relative;
+
+ &::after {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ opacity: 1;
+ content: '';
+ display: block;
+ background-color: $color;
+ height: $height;
+ margin-top: $margin;
+
+ @media not prefers-reduced-motion {
+ transition: left $transition-duration,
+ right $transition-duration,
+ opacity $transition-duration;
+ }
+ }
+}
+@mixin border-shrink() {
+ left: 50%;
+ right: 50%;
+ opacity: 0;
+}
+
+body:not(.fixed) #barTopMenu {
+ > li.active {
+ @include border-beneath($dark-gray-color-80);
+ }
+ > li:not(.active) {
+ @include border-beneath($dark-gray-color-40);
+ &:not(:hover)::after {
+ @include border-shrink();
+ }
+ }
+
+ &:hover > li:not(:hover)::after {
+ @include border-shrink();
+ }
+
+ .action-menu-icon {
+ transform: rotate(-90deg);
+ }
+
+ .overflow li:hover {
+ @include border-beneath($dark-gray-color-40, 2px, 3px);
+ &::after {
+ transform: translate(0, -4px);
+ }
+ }
+}
+
+#tabs {
+ > li {
+ &, &.current, &:hover {
+ line-height: 25px;
+ }
+ &.current {
+ @include border-beneath($dark-gray-color-80, -2px, 3px);
+ }
+ &:not(.current) {
+ @include border-beneath($dark-gray-color-40, -2px, 3px);
+ &:not(:hover)::after {
+ @include border-shrink();
+ }
+ }
+ }
+}
diff --git a/resources/assets/stylesheets/less/navigation.less b/resources/assets/stylesheets/scss/navigation.scss
similarity index 84%
rename from resources/assets/stylesheets/less/navigation.less
rename to resources/assets/stylesheets/scss/navigation.scss
index c904d4fad17844a199e82ab595b9a9da7fccf0f1..63af7829b47c6fd3c7f2009a477e6a9f16d27141 100644
--- a/resources/assets/stylesheets/less/navigation.less
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -14,12 +14,12 @@ body:not(.fixed) #barTopMenu {
height: 55px;
padding: 0;
z-index: 2;
- font-size: @font-size-base;
+ font-size: $font-size-base;
}
a {
- color: @base-color;
+ color: $base-color;
display: block;
- padding: 0 0px;
+ padding: 0 0;
text-align: center;
line-height: 1em;
@@ -27,7 +27,7 @@ body:not(.fixed) #barTopMenu {
span {
background: no-repeat 0 0;
display: inline-block;
- .square(32px);
+ @include square(32px);
// Icon state: new
&.new {
@@ -36,8 +36,8 @@ body:not(.fixed) #barTopMenu {
}
img {
- margin: 8px 0px;
- .square(32px);
+ margin: 8px 0;
+ @include square(32px);
}
&[data-badge]:not([data-badge="0"]) {
position: relative;
@@ -48,13 +48,13 @@ body:not(.fixed) #barTopMenu {
top: 0;
margin-left: 5px;
- .square(16px);
+ @include square(16px);
background-clip: content-box;
- background-color: @red;
- border: 3px solid @dark-gray-color-5;
+ background-color: $red;
+ border: 3px solid $dark-gray-color-5;
border-radius: 50%;
- color: white;
+ color: $white;
content: attr(data-badge);
display: inline-block;
font-size: 10px;
@@ -85,7 +85,7 @@ body:not(.fixed) #barTopMenu {
// Hide all navigation item title on hover and display only the currently
// hovered one
.navtitle {
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: opacity 300ms; // Smooth change when entering
}
}
@@ -95,7 +95,7 @@ body:not(.fixed) #barTopMenu {
}
> li:hover .navtitle {
opacity: 1;
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: opacity 0ms; // Quick change when leaving
}
}
@@ -129,7 +129,7 @@ body:not(.fixed) #barTopMenu {
// Rotate icon
> label img {
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: transform 300ms;
}
transform: rotate(90deg);
@@ -137,7 +137,7 @@ body:not(.fixed) #barTopMenu {
// Define transition duration for possible badge on overflow
> label > a[data-badge]::before {
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: opacity 300ms;
}
}
@@ -169,8 +169,8 @@ body:not(.fixed) #barTopMenu {
margin: 5px 0 0;
padding: 4px 4px;
- background-color: @dark-gray-color-5;
- border: 1px solid @dark-gray-color-40;
+ background-color: $dark-gray-color-5;
+ border: 1px solid $dark-gray-color-40;
border-top: 0;
min-width: 150px;
@@ -194,7 +194,7 @@ body:not(.fixed) #barTopMenu {
}
img {
flex: 1 0 20px;
- .square(20px);
+ @include square(20px);
margin: 0 0.25em;
}
@@ -220,12 +220,12 @@ body:not(.fixed) #barTopMenu {
display: none;
}
label[for="barTopMenu-toggle"] {
- .background-icon('hamburger', 'info_alt', 16);
- background-position: 0px center;
+ @include background-icon(hamburger, info_alt, 16);
+ background-position: 0 center;
background-repeat: no-repeat;
- color: @white;
- line-height: @bar-bottom-container-height;
+ color: $white;
+ line-height: $bar-bottom-container-height;
overflow: hidden;
padding-left: (5px + 16px + 5px); // padding + icon + next padding
white-space: nowrap;
@@ -233,7 +233,7 @@ label[for="barTopMenu-toggle"] {
height: 0;
max-height: 0;
opacity: 0;
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: all 300ms;
}
@@ -250,20 +250,20 @@ html.no-touch {
body.fixed {
#flex-header {
- height: @header-height;
+ height: $header-height;
}
label[for="barTopMenu-toggle"] {
opacity: 1;
- max-height: @bar-bottom-container-height;
+ max-height: $bar-bottom-container-height;
height: auto;
}
#barTopMenu {
- background-color: @base-color;
+ background-color: $base-color;
list-style: none;
- margin: 0px 0px 0px -15px;
- padding: 0px;
+ margin: 0 0 0px -15px;
+ padding: 0;
position: absolute;
width: fit-content;
@@ -272,9 +272,7 @@ body.fixed {
display: none;
img {
- filter: contrast(0) brightness(2);
-
- .square(16px);
+ @include square(16px);
margin-right: 0.8em;
}
@@ -286,11 +284,11 @@ body.fixed {
flex-wrap: nowrap;
align-items: center;
- color: @white;
+ color: $white;
}
&:hover {
- background-color: @base-color-80;
+ background-color: $base-color-80;
}
&.overflow {
diff --git a/resources/assets/stylesheets/less/opengraph.less b/resources/assets/stylesheets/scss/opengraph.scss
similarity index 70%
rename from resources/assets/stylesheets/less/opengraph.less
rename to resources/assets/stylesheets/scss/opengraph.scss
index 23dde88ab67548070a170c346be7d2019d703d0a..62494966b97810900015ad0c4f024029a27a71a8 100644
--- a/resources/assets/stylesheets/less/opengraph.less
+++ b/resources/assets/stylesheets/scss/opengraph.scss
@@ -7,20 +7,20 @@
text-align: right;
li {
- border-top: thin solid @dark-gray-color-20;
+ border-top: thin solid $dark-gray-color-20;
display: inline-block;
padding: 5px;
&:first-child {
- border-left: thin solid @dark-gray-color-20;
+ border-left: thin solid $dark-gray-color-20;
}
&:last-child {
- border-right: thin solid @dark-gray-color-20;
+ border-right: thin solid $dark-gray-color-20;
}
}
.switch-left, .switch-right {
- .hide-text();
- .square(20px);
+ @include hide-text();
+ @include square(20px);
background-position: center;
background-repeat: no-repeat;
padding: 0;
@@ -30,15 +30,15 @@
}
}
.switch-left {
- .background-icon('arr_1left', 'clickable');
+ @include background-icon('arr_1left', 'clickable');
&[disabled] {
- .background-icon('arr_1left', 'inactive');
+ @include background-icon('arr_1left', 'inactive');
}
}
.switch-right {
- .background-icon('arr_1right', 'clickable');
+ @include background-icon('arr_1right', 'clickable');
&[disabled] {
- .background-icon('arr_1right', 'inactive');
+ @include background-icon('arr_1right', 'inactive');
}
}
}
@@ -52,15 +52,15 @@
}
.opengraph {
- @padding: 10px;
- @height: 120px;
+ $padding: 10px;
+ $height: 120px;
- .clearfix;
+ @include clearfix();
font-size: 0.8em;
- border: 1px solid @dark-gray-color-20;
- padding: @padding;
- min-height: @height;
+ border: 1px solid $dark-gray-color-20;
+ padding: $padding;
+ min-height: $height;
.flash-embedder {
display: flex;
@@ -87,20 +87,20 @@
a.info {
box-sizing: border-box;
- color: black;
+ color: $black;
display: block;
word-break: normal !important;
&:hover {
- color: black;
+ color: $black;
}
}
.image {
- .square(@height);
+ @include square($height);
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
float: left;
- margin-right: @padding;
+ margin-right: $padding;
}
}
diff --git a/resources/assets/stylesheets/less/personal-notifications.less b/resources/assets/stylesheets/scss/personal-notifications.scss
similarity index 64%
rename from resources/assets/stylesheets/less/personal-notifications.less
rename to resources/assets/stylesheets/scss/personal-notifications.scss
index 10554a395a7b4b19ca2db458824f146d346eb3bc..d6521235e7306bc5f5d409103be3c7365501599e 100644
--- a/resources/assets/stylesheets/less/personal-notifications.less
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -1,35 +1,35 @@
#notification_marker {
width: 48px;
- margin-left: 0px;
- padding-left: 0px;
- margin-right: 0px;
- padding-right: 0px;
+ margin-left: 0;
+ padding-left: 0;
+ margin-right: 0;
+ padding-right: 0;
height: 28px;
font-size: 0.8em;
- color: @base-color;
+ color: $base-color;
text-align: center;
line-height: 28px;
vertical-align: text-bottom;
- background-color: @dark-gray-color-10;
- border: 1px solid @dark-gray-color-40;
+ background-color: $dark-gray-color-10;
+ border: 1px solid $dark-gray-color-40;
&.alert {
- background-color: @red;
- color: @white;
+ background-color: $red;
+ color: $white;
}
}
#notification_container {
- @arrow-height: 10px;
+ $arrow-height: 10px;
- @list-width: 400px;
+ $list-width: 400px;
width: 49px;
height: 30px;
- /*border: thin solid @dark-gray-color-20;*/
- color: @base-color;
+ /*border: thin solid $dark-gray-color-20;*/
+ color: $base-color;
vertical-align: text-bottom;
- background-color: @base-color;
+ background-color: $base-color;
position: relative;
// Insert invisible padding on top of the arrow in order to try to
@@ -39,10 +39,10 @@
content: "";
display: block;
position: absolute;
- bottom: -@arrow-height;
- left: (-@list-width);
+ bottom: -$arrow-height;
+ left: (-$list-width);
right: 0;
- height: @arrow-height;
+ height: $arrow-height;
}
&:hover::after {
content: "";
@@ -54,7 +54,15 @@
width: 25px;
}
- .list, li&:hover .list { display: none; }
+ .list {
+ display:none;
+ }
+ li {
+ &:hover {
+ display: none;
+ }
+ }
+
&.hoverable:hover {
.list { display: block; }
}
@@ -72,62 +80,62 @@
}
.list {
// Creates an arrow pointing from the list to the triggering element
- #arrow > .top-border(10px, @white, 1px, @light-gray-color-80);
+ @include arrow-top-border(10px, $white, 1px, $light-gray-color-80);
- background-color: @white;
- border-left: thin solid @light-gray-color-60;
- border-top: thin solid @light-gray-color-60;
+ background-color: $white;
+ border-left: thin solid $light-gray-color-60;
+ border-top: thin solid $light-gray-color-60;
border-collapse: collapse;
- color: @black;
+ color: $black;
display: none;
font-size: 1em;
position: absolute;
- width: @list-width;
- max-width: @list-width;
- box-shadow: 1px 1px 1px @light-gray-color-80;
+ width: $list-width;
+ max-width: $list-width;
+ box-shadow: 1px 1px 1px $light-gray-color-80;
// Without this, buttons or message boxes would appear on top of the list
z-index: 2;
&::before,
&::after {
- left: (@list-width - 20px);
+ left: ($list-width - 30px);
}
// Positions: below or left'ish or right'ish to the triggering element
&.below {
- left: (-@list-width + 44px);
+ left: (-$list-width + 44px);
}
&.left {
- right: 0px;
+ right: 0;
&:before {
left: auto;
right: 4px;
}
}
&.right {
- left: 0px;
+ left: 0;
&:before { left: 4px; }
}
// List item
.item {
- @padding: 5px;
- border-top: thin solid @light-gray-color-60;
+ $padding: 5px;
+ border-top: thin solid $light-gray-color-60;
line-height: 20px;
display: block;
height: auto;
- padding: @padding;
+ padding: $padding;
white-space: normal;
&:hover {
- background-color: fadeout(@light-gray-color, 80%);
+ background-color: $light-gray-color-20
}
&:only-child:hover {
- #arrow > .top(10px, fadeout(@light-gray-color, 80%));
+ @include arrow-top(10px, $light-gray-color-20);
margin-top: 0;
&::before {
- left: (@list-width - 20px);
+ left: ($list-width - 30px);
z-index: 2;
}
}
@@ -142,24 +150,24 @@
flex-wrap: nowrap;
.avatar {
- @avatar-size: 40px;
+ $avatar-size: 40px;
margin-right: 10px;
- margin-left: 0px;
+ margin-left: 0;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
- width: @avatar-size;
- height: @avatar-size;
- min-width: @avatar-size;
+ width: $avatar-size;
+ height: $avatar-size;
+ min-width: $avatar-size;
}
}
}
a {
- color: @brand-color-dark;
+ color: $brand-color-dark;
display: block;
- padding: 0px;
- &:hover { color: @active-color; }
+ padding: 0;
+ &:hover { color: $active-color; }
}
.options {
@@ -177,8 +185,8 @@
a.mark-all-as-read,
a.enable-desktop-notifications {
- background-color: @dark-gray-color-15;
- border-bottom: thin solid @dark-gray-color-45;
+ background-color: $dark-gray-color-15;
+ border-bottom: thin solid $dark-gray-color-45;
max-height: 31px;
padding: 5px 5px 5px 14px;
z-index: 3;
@@ -186,19 +194,19 @@
a.mark-all-as-read {
// Creates an arrow pointing from the list to the triggering element
- #arrow > .top-border(10px, @light-gray-color-20, 1px, @light-gray-color-80);
+ @include arrow-top-border(10px, $light-gray-color-20, 1px, $light-gray-color-80);
&::before,
&::after {
- left: (@list-width - 20px);
+ left: ($list-width - 30px);
z-index: 2;
}
- .background-icon('accept', 'clickable');
+ @include background-icon('accept', 'clickable');
background-repeat: no-repeat;
background-position: right 8px center;
&:hover {
- .background-icon('accept', 'attention');
+ @include background-icon('accept', 'attention');
}
margin: 0;
@@ -216,10 +224,10 @@
+ .enable-desktop-notifications {
// Creates an arrow pointing from the list to the triggering element
- #arrow > .top-border(10px, @light-gray-color-20, 1px, @light-gray-color-80);
+ @include arrow-top-border(10px, $light-gray-color-20, 1px, $light-gray-color-80);
&::before,
&::after {
- left: (@list-width - 20px);
+ left: ($list-width - 30px);
z-index: 2;
}
margin: 0;
@@ -227,12 +235,12 @@
}
}
a.enable-desktop-notifications {
- .background-icon('notification', 'clickable');
+ @include background-icon('notification', 'clickable');
background-repeat: no-repeat;
background-position: right 8px center;
&:hover {
- .background-icon('notification', 'attention');
+ @include background-icon('notification', 'attention');
}
}
}
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index 6f8eee156b4acf0ed3d80612f7efd89e64d0f96c..5b7107ea39e68b9f9ad76b240946f6482883e2b5 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -89,7 +89,7 @@ label.inactive-settings-category {
}
&:hover {
- background-color: mix($light-gray-color, $white, 80%);
+ background-color: $light-gray-color-20;
}
&.search-extended-result {
diff --git a/resources/assets/stylesheets/less/selects.less b/resources/assets/stylesheets/scss/selects.scss
similarity index 76%
rename from resources/assets/stylesheets/less/selects.less
rename to resources/assets/stylesheets/scss/selects.scss
index 72aff7082edc4805f754af6528fc883c8a08bf9a..d080b58c8677253a87d09409a3d259245afd8b71 100644
--- a/resources/assets/stylesheets/less/selects.less
+++ b/resources/assets/stylesheets/scss/selects.scss
@@ -1,22 +1,22 @@
-@select-border: 1px solid @light-gray-color-40;
-@select-border-focus: 1px solid @brand-color-dark;
-@select-border-radius: 0;
-@select-height-default: 30px;
-@select-arrow-size: 10;
+$select-border: 1px solid $light-gray-color-40;
+$select-border-focus: 1px solid $brand-color-dark;
+$select-border-radius: 0;
+$select-height-default: 30px;
+$select-arrow-size: 10;
select {
// Reset appearance
box-sizing: border-box;
appearance: none;
- background-color: #fff;
+ background-color: $white;
font-size: 1em;
vertical-align: baseline;
&::-ms-expand {
display: none;
}
- border: @select-border;
- border-radius: @select-border-radius;
+ border: $select-border;
+ border-radius: $select-border-radius;
padding: 1px 8px 1px 8px;
position: relative;
white-space: nowrap;
@@ -26,22 +26,22 @@ select {
// to ensure the icon is always clearly visible
padding-right: 20px;
- .background-icon('arr_1down', 'clickable', @select-arrow-size);
+ @include background-icon(arr_1down, clickable, $select-arrow-size);
background-position: right 4px center;
background-repeat: no-repeat;
- height: @select-height-default;
+ height: $select-height-default;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
}
&:focus {
- border: @select-border-focus;
+ border: $select-border-focus;
}
}
-@import (inline) "~select2/dist/css/select2.css";
+@import "~select2/dist/css/select2";
// The wrapper is neccessary for the validation error messages to appear
// at the correct position
@@ -74,9 +74,9 @@ select {
.select2-container--default {
.select2-selection--single,
.select2-selection--multiple {
- border: @select-border;
- border-radius: @select-border-radius;
- min-height: @select-height-default;
+ border: $select-border;
+ border-radius: $select-border-radius;
+ min-height: $select-height-default;
.select2-selection__content {
font-weight: normal; // Reset due to form.default label = bold
@@ -84,7 +84,7 @@ select {
text-overflow: ellipsis;
}
.select2-selection__choice {
- border-radius: 0px;
+ border-radius: 0;
padding-top: 5px;
padding-bottom: 5px;
}
@@ -92,13 +92,13 @@ select {
.select2-selection--single {
.select2-selection__clear {
- .background-icon('decline', 'clickable', @select-arrow-size);
+ @include background-icon(decline, clickable, $select-arrow-size);
background-position: right center;
background-repeat: no-repeat;
color: transparent;
display: inline-block;
float: none;
- width: unit((@select-arrow-size + 5), px);
+ width: unit(($select-arrow-size + 5px));
}
.select2-selection__rendered {
@@ -118,19 +118,20 @@ select {
}
.select2-selection--multiple {
- padding-right: unit((@select-arrow-size + 5), px);
- .background-icon('arr_1down', 'clickable', @select-arrow-size);
- background-position: right 4px top unit((@select-height-default / 2 - 4), px);
+ padding-right: unit(($select-arrow-size + 5px));
+ @include background-icon('arr_1down', 'clickable', $select-arrow-size);
+ $backgroundPosition: unit(calc($select-height-default / 2) - 4px);
+ background-position: right 4px top $backgroundPosition;
background-repeat: no-repeat;
.select2-selection__choice__remove {
- .background-icon('decline', 'clickable', @select-arrow-size);
+ @include background-icon('decline', 'clickable', $select-arrow-size);
background-position: right center;
background-repeat: no-repeat;
color: transparent !important;
display: inline-block;
float: none;
- width: unit((@select-arrow-size + 5), px);
+ width: unit(($select-arrow-size + 5px));
}
.select2-selection__choice {
@@ -150,7 +151,7 @@ select {
}
.select2-selection__arrow {
- .background-icon('arr_1down', 'clickable', @select-arrow-size);
+ @include background-icon('arr_1down', 'clickable', $select-arrow-size);
background-position: right 4px center;
background-repeat: no-repeat;
@@ -173,7 +174,7 @@ select {
&.select2-container--open {
.select2-selection--single,
.select2-selection--multiple {
- border: @select-border-focus;
+ border: $select-border-focus;
}
}
diff --git a/resources/assets/stylesheets/less/smileys.less b/resources/assets/stylesheets/scss/smileys.scss
similarity index 72%
rename from resources/assets/stylesheets/less/smileys.less
rename to resources/assets/stylesheets/scss/smileys.scss
index beab53659eb54107bd66d3576409b6d6daf888af..1621b47e5d1b29b43c13cf20130052961117ca4d 100644
--- a/resources/assets/stylesheets/less/smileys.less
+++ b/resources/assets/stylesheets/scss/smileys.scss
@@ -9,9 +9,8 @@
list-style: none;
padding: 0;
}
- li {
- &:extend(#tabs li all);
+ li {
flex-grow: 1;
display: inline-block;
float: none;
@@ -19,37 +18,49 @@
white-space: nowrap;
&.favorites a {
- .icon('before', 'smiley', 'info_alt');
+ @include icon(before, smiley, info_alt);
}
+
&.favorites.current a {
- .icon('before', 'smiley', 'info');
+ @include icon(before, smiley, info);
+ }
+ &.current {
+ padding-top: 0;
+ a, span.quiet {
+ color: $base-color;
+ }
}
}
- a {
- &:extend(#tabs a all);
+ a {
display: block;
padding-left: 0;
padding-right: 0;
text-align: center;
+ color: $black
}
}
.smiley-container {
border-collapse: collapse;
width: 100%;
+
> tbody > tr > td {
padding: 0 1em 0 0;
+
&:last-child {
padding-right: 0;
}
}
}
+
.smiley-container, .smiley-column {
table-layout: fixed;
}
+
.smiley-column {
margin-right: 1em;
+
&:last-child {
margin-right: 0;
}
@@ -64,19 +75,20 @@
}
.smiley-toggle {
- .square(16px);
- .hide-text;
- .background-icon('checkbox-unchecked', 'clickable');
+ @include square(16px);
+ @include hide-text();
+ @include background-icon(checkbox-unchecked, clickable);
background-position: center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
&.favorite {
- .background-icon('checkbox-checked', 'clickable');
+ @include background-icon(checkbox-checked, clickable);
}
+
&.ajax {
- background-image: url("@{image-path}/ajax_indicator_small.gif");
+ background-image: url("#{$image-path}/ajax_indicator_small.gif");
}
}
@@ -93,6 +105,7 @@
content: ':';
}
}
+
dd {
font-weight: 700;
margin: 0;
@@ -102,6 +115,7 @@
.smiley-picker {
width: 420px;
+
.smileys {
text-align: center;
width: 100%;
@@ -114,6 +128,7 @@
vertical-align: middle;
width: 80px;
}
+
.smiley {
box-sizing: border-box;
cursor: pointer;
@@ -129,6 +144,7 @@
vertical-align: middle;
margin-right: -0.25em;
}
+
img {
vertical-align: middle;
max-height: 76px;
@@ -137,25 +153,39 @@
}
&:hover {
- background-color: fade(@active-color, 10%);
+ background-color: fade($active-color, 10%);
border-radius: 20px;
- box-shadow:0 -1px 4px fade(@active-color, 10%), 0 2px 5px #888;
+ box-shadow: 0 -1px 4px fade($active-color, 10%), 0 2px 5px #888;
}
}
.navigation {
border-collapse: collapse;
width: 100%;
- img { vertical-align: text-top; }
- td { padding: 2px; }
- &.top td { border-bottom: 1px solid @brand-color-dark; }
- &.bottom td { border-top: 1px solid @brand-color-dark; }
+
+ img {
+ vertical-align: text-top;
+ }
+
+ td {
+ padding: 2px;
+ }
+
+ &.top td {
+ border-bottom: 1px solid $brand-color-dark;
+ }
+
+ &.bottom td {
+ border-top: 1px solid $brand-color-dark;
+ }
+
.active a {
- color: @active-color;
+ color: $active-color;
font-weight: bold;
}
}
}
+
.smiley-picker-dialog {
.ui-dialog-content {
padding: 0;
diff --git a/resources/assets/stylesheets/less/study-area-selection.less b/resources/assets/stylesheets/scss/study-area-selection.scss
similarity index 93%
rename from resources/assets/stylesheets/less/study-area-selection.less
rename to resources/assets/stylesheets/scss/study-area-selection.scss
index 9af5c02ba3fe11d692716a087e4ae61f8405cbd7..44a314e553c388fd58cd352d7c2f78ac2f3a12bc 100644
--- a/resources/assets/stylesheets/less/study-area-selection.less
+++ b/resources/assets/stylesheets/scss/study-area-selection.scss
@@ -4,7 +4,7 @@
h3 { margin-top: 1em; }
.odd { background-color: #f3f5f8; }
- .even { background-color: @content-color-20; }
+ .even { background-color: $content-color-20; }
}
#study_area_selection_none,
@@ -41,4 +41,4 @@
h3 { font-weight: normal; }
}
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/less/tabs.less b/resources/assets/stylesheets/scss/tabs.scss
similarity index 72%
rename from resources/assets/stylesheets/less/tabs.less
rename to resources/assets/stylesheets/scss/tabs.scss
index 448aeaacef7308d5bda15a95fcbde3d9ef8d3543..75e658f1952b0724d524d5d8f147fb6d3fa29aec 100644
--- a/resources/assets/stylesheets/less/tabs.less
+++ b/resources/assets/stylesheets/scss/tabs.scss
@@ -19,46 +19,41 @@ div.clear
}
li { float: left; }
a {
- color: #000;
+ color: $black;
}
}
// Main tab set with the tabs sitting on top of the main content
#tabs {
- padding-left: 0px;
+ padding-left: 0;
span { padding: 0; }
.quiet img { opacity: 0.25; }
li {
- background-color: @dark-gray-color-10;
+ background-color: $dark-gray-color-10;
&:last-child {
border-right: none;
}
&.current {
- color: @base-color;
+ color: $base-color;
}
&:hover {
- //background-color: #fff;
- border-bottom: 3px solid @dark-gray-color-30;
- color: @base-color;
- padding-top: 0px;
- padding-bottom: 1px;
+ color: $base-color;
+ padding-top: 0;
}
&.current {
- border-bottom: 3px solid @dark-gray-color-80;
- padding-top: 0px;
- padding-bottom: 1px;
+ padding-top: 0;
line-height: 25px;
a, span.quiet {
- color: @base-color;
+ color: $base-color;
}
}
}
a, span.quiet {
- color: #000;
+ color: $black;
float: left;
display: block;
@@ -71,7 +66,7 @@ div.clear
.tab-icon {
float: left;
margin: 4px 5px 0 -0.5em;
- .size(16px, 16px);
+ @include size(16px, 16px);
display: none;
}
@@ -95,10 +90,10 @@ div.clear
position: absolute;
top: inherit;
right: inherit;
- padding: 0px 0px 10px 0px;
+ padding: 0 0 10px 0;
margin-top: 10px;
- background: @content-color-20;
- box-shadow: 1px 1px 1px @dark-gray-color-60;
+ background: $content-color-20;
+ box-shadow: 1px 1px 1px $dark-gray-color-60;
text-align: left;
white-space: nowrap;
@@ -108,7 +103,7 @@ div.clear
}
a:hover {
- color: @red !important;
+ color: $red !important;
}
}
@@ -127,16 +122,14 @@ div.clear
.action-menu-content:before {
border-color: rgba(194, 225, 245, 0);
- border-bottom-color: @dark-gray-color-60;
+ border-bottom-color: $dark-gray-color-60;
border-width: 9px;
margin-left: -8px;
}
.action-menu-content:after {
border-color: rgba(194, 225, 245, 0);
- border-bottom-color: @content-color-20;
+ border-bottom-color: $content-color-20;
border-width: 8px;
margin-left: -8px;
}
}
-
-
diff --git a/resources/assets/stylesheets/scss/typography.scss b/resources/assets/stylesheets/scss/typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..67bebc0b63c66b837f9f208871a554db19b1d563
--- /dev/null
+++ b/resources/assets/stylesheets/scss/typography.scss
@@ -0,0 +1,90 @@
+// Body reset
+
+html {
+ font-size: 62.5%;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+ font-family: $font-family-base;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $text-color;
+}
+
+// Reset fonts for relevant elements
+
+input,
+button,
+select,
+textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+//
+// Typography
+// --------------------------------------------------
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: $headings-font-family;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+}
+
+h1,
+h2,
+h3 {
+ margin-top: $line-height-computed;
+ margin-bottom: calc($line-height-computed / 2);
+}
+
+h4,
+h5,
+h6, {
+ margin-top: calc($line-height-computed / 2);
+ margin-bottom: calc($line-height-computed / 2);
+}
+
+h1 { font-size: $font-size-h1; }
+h2 { font-size: $font-size-h2; }
+h3 { font-size: $font-size-h3; }
+h4 { font-size: $font-size-h4; }
+h5 { font-size: $font-size-h5; }
+h6 { font-size: $font-size-h6; }
+
+
+// Headings with borders
+// -------------------------
+
+h1, h2 {
+ font-size: 1.3em;
+}
+
+
+h1 {
+ margin-top: 0;
+ span {
+ display: block;
+ font-size: calc($font-size-h1 * 0.75);
+ font-weight: calc($headings-font-weight / 7);
+ padding: calc($line-height-computed / 4) 0;
+ }
+}
+
+// Body text
+// -------------------------
+
+p {
+ margin: 0 0 calc($line-height-computed / 2);
+}
+
+.text-center {
+ text-align: center;
+}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 23bcd109c46ef606ee7f32d5ca5376b4f072d4bd..6e7cc22a3340ba94185f5312a3ef3888eb298131 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -35,6 +35,8 @@ $avatar-small: 25px;
$avatar-medium: 100px;
$avatar-normal: 250px;
+$drag_and_drop_z_index: 1000;
+$drag_and_drop_border: 1px solid $base-color;
:root {
// The special handling for -- as #{"--"} seems to be neccessary to make
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 547b141e887d5a7019e56b22668e7888de4a3c9a..b24c980e2a0468ae14b7c3f6ec8eea80198784b6 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -7,44 +7,14 @@
@import "less/font-face-lato.less";
@import "less/variables.less";
@import "less/breakpoints.less";
-@import "less/typography.less";
@import "less/visibility.less";
@import "less/responsive.less";
@import "less/tables.less";
-@import "less/forms.less";
-
-@import "less/layouts.less";
-@import "less/personal-notifications.less";
-@import "less/navigation.less";
-
-@import "less/clipboard.less";
-@import "less/content_box.less";
-
-@import "less/avatar.less";
@import "less/buttons.less";
@import "less/messagebox.less";
-@import "less/tabs.less";
-@import "less/copyable-links.less";
-
@import "less/calendar.less";
-@import "less/contacts.less";
-@import "less/cronjobs.less";
@import "less/files.less";
-@import "less/schedule.less";
-@import "less/study-area-selection.less";
-@import "less/opengraph.less";
-
-@import "less/mobile.less";
-@import "less/selects.less";
-@import "less/smileys.less";
-
-@import "less/globalsearch.less";
-@import "less/gradebook.less";
-
-@import "less/navigation-hoverborder.less";
-
-@import "less/deprecated.less";
/* --- Standardvorgaben ----------------------------------------------------- */
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index dfa410cdf97170bfcda222597ee109a51c4eff1f..deca8381a995f9b7386e488e36434639c6c2dad0 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -20,11 +20,16 @@
@import "scss/big-image-handler";
@import "scss/blubber";
@import "scss/buttons";
+@import "scss/clipboard";
@import "scss/consultation";
+@import "scss/contacts";
@import "scss/contentbar";
+@import "scss/content_box";
@import "scss/contents";
@import "scss/content";
@import "scss/comments";
+@import "scss/copyable-links";
+@import "scss/cronjobs";
@import "scss/courseware";
@import "scss/coursewizard";
@import "scss/css_tree";
@@ -36,7 +41,9 @@
@import "scss/evaluation";
@import "scss/files";
@import "scss/feedback";
+@import "scss/forms";
@import "scss/forum";
+@import "scss/gradebook";
@import "scss/grid";
@import "scss/header";
@import "scss/headings";
@@ -45,39 +52,51 @@
@import "scss/ilias-interface";
@import "scss/index";
@import "scss/fullscreen";
+@import "scss/globalsearch";
+@import "scss/layouts";
@import "scss/links";
@import "scss/lists";
@import "scss/messages";
+@import "scss/mobile";
@import "scss/my_courses";
@import "scss/mvv";
+@import "scss/navigation";
+@import "scss/navigation-hoverborder";
@import "scss/oer";
@import "scss/overlapping";
-@import "scss/qrcode";
-@import "scss/questionnaire";
-@import "scss/quicksearch";
@import "scss/oauth2";
+@import "scss/opengraph";
@import "scss/pagination";
+@import "scss/personal-notifications";
@import "scss/plugins";
@import "scss/plus";
@import "scss/progress_indicator.scss";
@import "scss/profile";
+@import "scss/qrcode";
+@import "scss/questionnaire";
+@import "scss/quicksearch";
@import "scss/raumzeit";
@import "scss/report";
@import "scss/resources";
@import "scss/sidebar";
@import "scss/select";
+@import "scss/selects";
@import "scss/search";
@import "scss/skiplinks";
@import "scss/start";
@import "scss/scroll-to-top";
+@import "scss/smileys";
@import "scss/statusgroups";
+@import "scss/study-area-selection";
@import "scss/studygroup";
@import "scss/studip-overlay";
@import "scss/studip-selection";
@import "scss/table_of_contents";
+@import "scss/tabs";
@import "scss/tooltip";
@import "scss/tfa";
@import "scss/tour";
+@import "scss/typography";
@import "scss/user-administration";
@import "scss/wiki";