Skip to content
Snippets Groups Projects
Commit 682e4fd2 authored by David Siegfried's avatar David Siegfried
Browse files

migrate less to scss, closes #1529

Closes #1529

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