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

migrate less to scss, closes #1547 

Closes #1547

Merge request studip/studip!967
parent 36fa709e
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 645 additions and 541 deletions
resources/assets/stylesheets/less/avatar.less deleted 100644 → 0
+ 0
− 116
View file @ 36fa709e
@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;
}
}
}
}
resources/assets/stylesheets/less/copyable-links.less deleted 100644 → 0
+ 0
− 61
View file @ 36fa709e
// 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;
}
}
resources/assets/stylesheets/less/deprecated.less deleted 100644 → 0
+ 0
− 0
View file @ 36fa709e
resources/assets/stylesheets/mixins/studip.scss
+ 1
− 1
View file @ bf202778
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
background-attachment: local, local, scroll, scroll; background-attachment: local, local, scroll, scroll;
} }
%scrollbox-horizontal { @mixin scrollbox-horizontal {
overflow: auto; overflow: auto;
background: background:
......
resources/assets/stylesheets/scss/avatar.scss
+ 124
− 0
View file @ bf202778
...@@ -43,3 +43,127 @@ div.avatar-widget { ...@@ -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;
}
}
}
}
resources/assets/stylesheets/less/clipboard.less → resources/assets/stylesheets/scss/clipboard.scss
+ 8
− 8
View file @ bf202778
...@@ -18,12 +18,12 @@ ...@@ -18,12 +18,12 @@
.dragged-clipboard-item { .dragged-clipboard-item {
position: fixed; position: fixed;
z-index: @drag_and_drop_z_index; z-index: $drag_and_drop_z_index;
border: @drag_and_drop_border; border: $drag_and_drop_border;
color: @base-color; color: $base-color;
font-weight: bold; font-weight: bold;
font-size: @font-size-large; font-size: $font-size-large;
background-color: @white; background-color: $white;
} }
div.clipboard-area-container { div.clipboard-area-container {
...@@ -34,7 +34,7 @@ div.clipboard-area-container { ...@@ -34,7 +34,7 @@ div.clipboard-area-container {
table.clipboard-area { table.clipboard-area {
width: 100%; width: 100%;
border: 1px solid @content-color-40; border: 1px solid $content-color-40;
height: 8em; height: 8em;
padding: 0.25em; padding: 0.25em;
} }
...@@ -66,10 +66,10 @@ table.clipboard-area tr.empty-clipboard-message > td { ...@@ -66,10 +66,10 @@ table.clipboard-area tr.empty-clipboard-message > td {
@keyframes drop-animation { @keyframes drop-animation {
0% { 0% {
background-color: @yellow-60; background-color: $yellow-60;
} }
100% { 100% {
background-color: @white; background-color: $white;
} }
} }
resources/assets/stylesheets/less/contacts.less → resources/assets/stylesheets/scss/contacts.scss
+ 1
− 1
View file @ bf202778
...@@ -41,7 +41,7 @@ table.contact-header { ...@@ -41,7 +41,7 @@ table.contact-header {
&:hover { background-color: #b7c2e2; } &:hover { background-color: #b7c2e2; }
a { a {
color: #f00; color: $red;
font-weight: bold; font-weight: bold;
} }
} }
......
resources/assets/stylesheets/less/content_box.less → resources/assets/stylesheets/scss/content_box.scss
+ 38
− 25
View file @ bf202778
section.contentbox { section.contentbox {
border-color: @content-color-40; border-color: $content-color-40;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -12,11 +12,11 @@ section.contentbox { ...@@ -12,11 +12,11 @@ section.contentbox {
justify-content: space-between; justify-content: space-between;
padding: 2px; padding: 2px;
background-color: @content-color-20; background-color: $content-color-20;
span.title { span.title {
font-size: medium; font-size: medium;
color: @base-color; color: $base-color;
&.no-overflow { &.no-overflow {
width: calc(100% - 1.5em); width: calc(100% - 1.5em);
...@@ -26,7 +26,7 @@ section.contentbox { ...@@ -26,7 +26,7 @@ section.contentbox {
&:after { &:after {
content: ""; content: "";
width: 4em; width: 4em;
background: linear-gradient(to right, transparent, @content-color-20); background: linear-gradient(to right, transparent, $content-color-20);
position: absolute; position: absolute;
height: 1.5em; height: 1.5em;
right: 2.5em; right: 2.5em;
...@@ -38,9 +38,10 @@ section.contentbox { ...@@ -38,9 +38,10 @@ section.contentbox {
flex: 1 0 0; flex: 1 0 0;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
color: @base-color; color: $base-color;
border-bottom: none; border-bottom: none;
font-size: medium; font-size: medium;
> a { > a {
img, svg { img, svg {
margin-right: 5px; margin-right: 5px;
...@@ -61,15 +62,18 @@ section.contentbox { ...@@ -61,15 +62,18 @@ section.contentbox {
} }
} }
} }
footer:empty { footer:empty {
display: none !important; display: none !important;
} }
footer { footer {
text-align: center; text-align: center;
border-color: @content-color-40; border-color: $content-color-40;
border-top-style: solid; border-top-style: solid;
border-width: 1px; border-width: 1px;
background-color: white;} background-color: $white;
}
section { section {
padding: 10px; padding: 10px;
...@@ -85,13 +89,13 @@ section.contentbox { ...@@ -85,13 +89,13 @@ section.contentbox {
} }
> article { > article {
border-color: @content-color-40; border-color: $content-color-40;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
margin: 10px; margin: 10px;
> p, > section, > footer, > div { > p, > section, > footer, > div {
max-height: 0px; max-height: 0;
opacity: 0; opacity: 0;
overflow: auto; overflow: auto;
transition: opacity 0.3s; transition: opacity 0.3s;
...@@ -124,7 +128,7 @@ section.contentbox { ...@@ -124,7 +128,7 @@ section.contentbox {
font-size: small; font-size: small;
width: 100%; width: 100%;
font-weight: bold; font-weight: bold;
color: black; color: $black;
} }
} }
...@@ -141,14 +145,17 @@ section.contentbox { ...@@ -141,14 +145,17 @@ section.contentbox {
header { header {
h1 a { h1 a {
.icon('before', "arr_1right", 'clickable'); @include icon(before, arr_1right, clickable);
&:before { &:before {
transition: all 200ms ease 0s; transition: all 200ms ease 0s;
margin-right: 2px; margin-right: 2px;
} }
display: flex; display: flex;
align-items: center; align-items: center;
} }
nav { nav {
a, > span { a, > span {
display: inline-block; display: inline-block;
...@@ -158,12 +165,14 @@ section.contentbox { ...@@ -158,12 +165,14 @@ section.contentbox {
> span { > span {
&:last-child { &:last-child {
border-right: none; border-right: none;
padding-right: 0px; padding-right: 0;
} }
display: inline-block; display: inline-block;
border-right: 1px solid @content-color; border-right: 1px solid $content-color;
padding: 0px 5px; padding: 0 5px;
} }
a { a {
padding-left: 5px; padding-left: 5px;
align-items: center; align-items: center;
...@@ -174,36 +183,39 @@ section.contentbox { ...@@ -174,36 +183,39 @@ section.contentbox {
footer { footer {
text-align: center; text-align: center;
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;
h1 { h1 {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
border: none; border: none;
padding: 0; padding: 0;
} }
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: auto auto 4px;
margin-bottom: 4px;
text-align: left; text-align: left;
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;
} }
} }
} }
&:not(.open) header ~ * { &:not(.open) header ~ * {
max-height: 0px; max-height: 0;
opacity: 0; opacity: 0;
overflow: auto; overflow: auto;
transition: opacity 0.3s; transition: opacity 0.3s;
...@@ -227,14 +239,15 @@ section.contentbox { ...@@ -227,14 +239,15 @@ section.contentbox {
&.new { &.new {
header h1 a { header h1 a {
.icon('before', "arr_1right", 'new'); @include icon(before, arr_1right, new);
} }
} }
&.indented { &.indented {
margin-left: calc(10px + 1em); margin-left: calc(10px + 1em);
> header { > header {
background-color: mix(@content-color, #fff, 10%); background-color: mix($content-color, $white, 10%);
} }
} }
} }
......
resources/assets/stylesheets/scss/copyable-links.scss 0 → 100644
+ 69
− 0
View file @ bf202778
.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;
}
}
resources/assets/stylesheets/less/cronjobs.less → resources/assets/stylesheets/scss/cronjobs.scss
+ 6
− 6
View file @ bf202778
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
display: none; display: none;
} }
.selected { .selected {
td { background-color: fadeout(@active-color, 75%); } td { background-color: $red-40; }
tr ~ tr { tr ~ tr {
display: table-row; display: table-row;
td { td {
background-color: #fff; background-color: $white;
} }
td[colspan] { td[colspan] {
background-color: inherit; background-color: inherit;
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
} }
.parameters { .parameters {
border: 1px solid #888; border: 1px solid $dark-gray-color;
border-bottom: 0; border-bottom: 0;
border-top: 0; border-top: 0;
padding: 0.5em; padding: 0.5em;
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
} }
} }
tbody:last-child .parameters { tbody:last-child .parameters {
border-bottom: 1px solid #888; border-bottom: 1px solid $white;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
} }
.inactivatible td { .inactivatible td {
color: #888; color: $dark-gray-color;
} }
.cronjobs-edit { .cronjobs-edit {
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
margin: 0 0 0.5em; margin: 0 0 0.5em;
} }
> table > thead > tr > th { .table_header_bold; } //> table > thead > tr > th { .table_header_bold; }
> table { > table {
margin-bottom: 1em; margin-bottom: 1em;
} }
......
resources/assets/stylesheets/less/forms.less → resources/assets/stylesheets/scss/forms.scss
+ 66
− 70
View file @ bf202778
form.default { $gap: 1.5ex;
@gap: 1.5ex;
@max-width-s: 8em; $max-width-s: 8em;
@max-width-m: 48em; $max-width-m: 48em;
@max-width-l: 100%; $max-width-l: 100%;
form.default {
div.select2-wrapper { div.select2-wrapper {
display: block ! important; display: block ! important;
} }
section { section {
&:not(.contentbox) { &:not(.contentbox) {
padding-top: @gap; padding-top: $gap;
label:first-of-type { label:first-of-type {
margin-top: 0px; margin-top: 0;
} }
} }
} }
fieldset > section:last-child { fieldset > section:last-child {
margin-bottom: @gap; margin-bottom: $gap;
} }
ol.default { ol.default {
padding-left: 20px; padding-left: 20px;
li { li {
padding: 2px 0px; padding: 2px 0;
} }
} }
span.empty { span.empty {
color: @light-gray-color-40; color: $light-gray-color-40;
font-style: italic; font-style: italic;
} }
...@@ -41,40 +41,40 @@ form.default { ...@@ -41,40 +41,40 @@ form.default {
textarea, select { textarea, select {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid @light-gray-color-40; border: 1px solid $light-gray-color-40;
color: @dark-gray-color; color: $dark-gray-color;
max-width: @max-width-m; max-width: $max-width-m;
padding: 5px; padding: 5px;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
&:focus { &:focus {
border-color: @brand-color-dark; border-color: $brand-color-dark;
} }
&.size-s { &.size-s {
max-width: @max-width-s; max-width: $max-width-s;
} }
&.size-m { &.size-m {
} }
&.size-l { &.size-l {
max-width: @max-width-l; max-width: $max-width-l;
} }
&[readonly] { &[readonly] {
background-color: @light-gray-color-20; background-color: $light-gray-color-20;
} }
} }
.quicksearch_container { .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) { 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 { textarea {
...@@ -83,7 +83,7 @@ form.default { ...@@ -83,7 +83,7 @@ form.default {
label:not(.undecorated, .ck-voice-label) { label:not(.undecorated, .ck-voice-label) {
display: block; display: block;
margin-bottom: @gap; margin-bottom: $gap;
max-width: 100%; max-width: 100%;
text-indent: 0.25ex; text-indent: 0.25ex;
vertical-align: top; vertical-align: top;
...@@ -97,7 +97,7 @@ form.default { ...@@ -97,7 +97,7 @@ form.default {
} }
.formpart { .formpart {
margin-bottom: @gap; margin-bottom: $gap;
output.calculator_result { output.calculator_result {
display: block; display: block;
...@@ -105,11 +105,11 @@ form.default { ...@@ -105,11 +105,11 @@ form.default {
} }
} }
.editablelist { .editablelist {
margin-bottom: @gap; margin-bottom: $gap;
> li { > li {
margin-bottom: 10px; margin-bottom: 10px;
&:last-child { &:last-child {
margin-bottom: 0px; margin-bottom: 0;
} }
} }
} }
...@@ -161,17 +161,16 @@ form.default { ...@@ -161,17 +161,16 @@ form.default {
fieldset { fieldset {
box-sizing: border-box; box-sizing: border-box;
border: solid 1px @content-color-40; border: solid 1px $content-color-40;
margin: 0 0 10px; margin: 0 0 10px;
padding: 10px; padding: $gap 10px 10px;
padding-top: @gap;
> legend { > legend {
box-sizing: border-box; box-sizing: border-box;
background-color: @fieldset-header; background-color: $fieldset-header;
border: 1px solid @content-color-40; border: 1px solid $content-color-40;
border-bottom: 0; border-bottom: 0;
color: @brand-color-dark; color: $brand-color-dark;
font-size: 12pt; font-size: 12pt;
font-weight: bold; font-weight: bold;
line-height: 2em; line-height: 2em;
...@@ -186,7 +185,7 @@ form.default { ...@@ -186,7 +185,7 @@ form.default {
&:not(.collapsed) > label:last-child::after { &:not(.collapsed) > label:last-child::after {
content: ''; content: '';
display: block; display: block;
margin-top: -@gap; margin-top: -$gap;
} }
} }
...@@ -197,8 +196,8 @@ form.default { ...@@ -197,8 +196,8 @@ form.default {
> fieldset { > fieldset {
border: none; border: none;
margin:0px; margin: 0;
padding:0px; padding: 0;
} }
} }
...@@ -206,13 +205,13 @@ form.default { ...@@ -206,13 +205,13 @@ form.default {
font-weight: bold; font-weight: bold;
&::after { &::after {
content: "*"; content: "*";
color: red; color: $red;
} }
} }
.studiprequired { .studiprequired {
font-weight: bold; font-weight: bold;
.asterisk { .asterisk {
color: red; color: $red;
} }
} }
...@@ -221,7 +220,7 @@ form.default { ...@@ -221,7 +220,7 @@ form.default {
} }
select[disabled] { select[disabled] {
background-color: @dark-gray-color-15; background-color: $dark-gray-color-15;
} }
.tooltip.tooltip-icon::before { .tooltip.tooltip-icon::before {
...@@ -229,13 +228,11 @@ form.default { ...@@ -229,13 +228,11 @@ form.default {
} }
footer { footer {
background-color: @content-color-20; background-color: $content-color-20;
border-top: 1px solid @brand-color-darker; border-top: 1px solid $brand-color-darker;
clear: both; clear: both;
margin-left: 0; margin-left: 0;
padding: 10px; padding: 5px 10px;
padding-top: 5px;
padding-bottom: 5px;
.button { .button {
margin-bottom: 0; margin-bottom: 0;
...@@ -246,21 +243,21 @@ form.default { ...@@ -246,21 +243,21 @@ form.default {
//Special inputs //Special inputs
label.file-upload { label.file-upload {
.background-icon('upload', 'clickable'); @include background-icon(upload, clickable);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top left; background-position: top left;
background-size: 20px 20px; background-size: 20px 20px;
cursor: pointer; cursor: pointer;
padding-left: 30px; padding-left: 30px;
color: @base-color; color: $base-color;
input[type=file] { input[type=file] {
display: none; display: none;
} }
.filename { .filename {
padding-left: 0.5em; padding-left: 0.5em;
color: @light-gray-color-80; color: $light-gray-color-80;
} }
} }
...@@ -277,25 +274,25 @@ form.default { ...@@ -277,25 +274,25 @@ form.default {
input[type=date], input[type=email], input[type=number], input[type=date], input[type=email], input[type=number],
input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel], input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel],
textarea, select { textarea, select {
max-width: calc(@max-width-m - 2em); max-width: calc($max-width-m - 2em);
width: calc(100% - 2em); width: calc(100% - 2em);
display: inline-block; display: inline-block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
&:focus { &:focus {
border-color: @brand-color-dark; border-color: $brand-color-dark;
} }
&.size-s { &.size-s {
max-width: calc(@max-width-s - 2em); max-width: calc($max-width-s - 2em);
} }
&.size-m { &.size-m {
} }
&.size-l { &.size-l {
max-width: calc(@max-width-l - 2em); max-width: calc($max-width-l - 2em);
} }
} }
} }
...@@ -304,16 +301,15 @@ form.default { ...@@ -304,16 +301,15 @@ form.default {
.hgroup, .hgroup,
.hgroup-btn { .hgroup-btn {
display: flex; display: flex;
align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
max-width: @max-width-m; max-width: $max-width-m;
&.size-s { &.size-s {
max-width: @max-width-s; max-width: $max-width-s;
} }
&.size-l { &.size-l {
max-width: @max-width-l; max-width: $max-width-l;
} }
> * { > * {
...@@ -365,7 +361,7 @@ form.default { ...@@ -365,7 +361,7 @@ form.default {
.js &.collapsable fieldset, fieldset.collapsable { .js &.collapsable fieldset, fieldset.collapsable {
legend { legend {
box-sizing: border-box; box-sizing: border-box;
.background-icon('arr_1down', 'clickable', 20); @include background-icon(arr_1down, clickable, 20);
background-position: 6px center; background-position: 6px center;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer; cursor: pointer;
...@@ -374,7 +370,7 @@ form.default { ...@@ -374,7 +370,7 @@ form.default {
&.collapsed { &.collapsed {
legend { legend {
.background-icon('arr_1right', 'clickable', 20); @include background-icon(arr_1right, clickable, 20);
margin-bottom: 0; margin-bottom: 0;
} }
padding-bottom: 0; padding-bottom: 0;
...@@ -395,7 +391,7 @@ form.default { ...@@ -395,7 +391,7 @@ form.default {
bottom: 100%; bottom: 100%;
right: 0; right: 0;
color: @light-gray-color; color: $light-gray-color;
font-size: 0.8em; font-size: 0.8em;
} }
...@@ -426,13 +422,13 @@ form.default { ...@@ -426,13 +422,13 @@ form.default {
} }
.invalid { .invalid {
border: 2px dotted red ! important; border: 2px dotted $red ! important;
} // an invalid form entry } // an invalid form entry
.invalid_message { .invalid_message {
display: none; display: none;
font-weight: bold; font-weight: bold;
color: red; color: $red;
} }
.select2-container { .select2-container {
...@@ -479,20 +475,20 @@ form.default { ...@@ -479,20 +475,20 @@ form.default {
&.show_validation_hints { &.show_validation_hints {
:invalid, .invalid { :invalid, .invalid {
.icon('before', 'exclaim-circle', 'attention', 16, 5px); @include icon(before, exclaim-circle, attention, 16px, 5px);
display: inline-block; display: inline-block;
} }
textarea:invalid, input[type=text]:invalid { textarea:invalid, input[type=text]:invalid {
border-left: 4px solid @red; border-left: 4px solid $red;
} }
} }
//designing vue-select in studipform: //designing vue-select in studipform:
.vs__dropdown-toggle { .vs__dropdown-toggle {
border-radius: 0px; border-radius: 0;
} }
.vs__selected { .vs__selected {
border-radius: 0px; border-radius: 0;
padding: 5px; padding: 5px;
} }
...@@ -502,20 +498,20 @@ form.default { ...@@ -502,20 +498,20 @@ form.default {
input[type=range] { input[type=range] {
&::-moz-range-track { &::-moz-range-track {
height: 11px; height: 11px;
border: 1px solid @content-color; border: 1px solid $content-color;
background-color: transparent; background-color: transparent;
} }
&::-moz-range-progress { &::-moz-range-progress {
background-color: @base-color; background-color: $base-color;
height: 11px; height: 11px;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
border-radius: 0px; border-radius: 0;
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
} }
&::-moz-range-thumb:hover { &::-moz-range-thumb:hover {
background-color: @content-color; background-color: $content-color;
} }
} }
output { output {
...@@ -529,12 +525,12 @@ form.narrow { ...@@ -529,12 +525,12 @@ form.narrow {
div.col-1, div.col-2, div.col-3, div.col-4, div.col-5, 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 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 // give forms some optimized styling for very narrow screen sizes
.media-breakpoint-tiny-down({ @include media-breakpoint-tiny-down(){
form.default { form.default {
label.col-1, div.col-1, section.col-1, label.col-1, div.col-1, section.col-1,
label.col-2, div.col-2, section.col-2, label.col-2, div.col-2, section.col-2,
...@@ -544,7 +540,7 @@ form.narrow { ...@@ -544,7 +540,7 @@ form.narrow {
min-width: 100%; min-width: 100%;
} }
} }
}); }
table.hide_datafield_title { table.hide_datafield_title {
.datafield_title { .datafield_title {
...@@ -554,8 +550,8 @@ table.hide_datafield_title { ...@@ -554,8 +550,8 @@ table.hide_datafield_title {
.content-title { .content-title {
background-color: transparent; background-color: transparent;
padding-top: 0px; padding-top: 0;
color: @base-gray; color: $base-gray;
font-size: 1.4em; font-size: 1.4em;
text-align: left; text-align: left;
} }
......
resources/assets/stylesheets/less/globalsearch.less → resources/assets/stylesheets/scss/globalsearch.scss
+ 44
− 44
View file @ bf202778
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
align-self: flex-start; align-self: flex-start;
} }
#globalsearch-searchbar { #globalsearch-searchbar {
@width: 423px; $width: 423px;
@hidden-width: 215px; $hidden-width: 215px;
@transition-duration: 300ms; $transition-duration: 300ms;
position: relative; position: relative;
top: 4px; top: 4px;
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
// Defines the clear icon for the input // Defines the clear icon for the input
#globalsearch-clear { #globalsearch-clear {
.square(16px); @include square(16px);
margin-left: -22px; margin-left: -22px;
vertical-align: middle; vertical-align: middle;
opacity: 0; opacity: 0;
transition: opacity @transition-duration; transition: opacity $transition-duration;
} }
&.has-value #globalsearch-clear { &.has-value #globalsearch-clear {
opacity: 1; opacity: 1;
...@@ -32,11 +32,11 @@ ...@@ -32,11 +32,11 @@
#globalsearch-input { #globalsearch-input {
height: 29px; height: 29px;
padding-left: 5px; padding-left: 5px;
width: @hidden-width; width: $hidden-width;
transition: width @transition-duration; transition: width $transition-duration;
} }
&.is-visible #globalsearch-input { &.is-visible #globalsearch-input {
width: @width; width: $width;
} }
// Search icon // Search icon
...@@ -48,10 +48,10 @@ ...@@ -48,10 +48,10 @@
// Hint toggle text // Hint toggle text
#globalsearch-togglehints { #globalsearch-togglehints {
font-size: @font-size-small; font-size: $font-size-small;
margin: 0; 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 // This is only neccessary to remove the whitespace in front of the text
// Otherwise, the text would jump when getting replaced // Otherwise, the text would jump when getting replaced
...@@ -76,29 +76,29 @@ ...@@ -76,29 +76,29 @@
// List display // List display
#globalsearch-list { #globalsearch-list {
background-color: @white; background-color: $white;
box-shadow: 1px 1px 1px @light-gray-color-80; box-shadow: 1px 1px 1px $light-gray-color-80;
color: @text-color; color: $text-color;
display: none; display: none;
max-height: 90vh; max-height: 90vh;
overflow: auto; overflow: auto;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
width: @width; width: $width;
a { a {
color: @base-color; color: $base-color;
&:hover { &:hover {
color: @active-color; color: $active-color;
} }
} }
section { section {
color: @text-color; color: $text-color;
header { header {
color: @base-color; color: $base-color;
margin: 5px; margin: 5px;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -116,18 +116,18 @@ ...@@ -116,18 +116,18 @@
// "Searching..." info // "Searching..." info
#globalsearch-searching { #globalsearch-searching {
@icon-size: 32px; $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 {
#globalsearch-searching { #globalsearch-searching {
...@@ -144,14 +144,14 @@ ...@@ -144,14 +144,14 @@
} }
article { article {
border: 1px solid @content-color-40; border: 1px solid $content-color-40;
margin: 3px; margin: 3px;
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;
...@@ -165,9 +165,9 @@ ...@@ -165,9 +165,9 @@
} }
div.globalsearch-more-results { div.globalsearch-more-results {
font-size: @font-size-small; font-size: $font-size-small;
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;
text-align: right; text-align: right;
...@@ -182,11 +182,11 @@ ...@@ -182,11 +182,11 @@
padding: 6px 6px 6px 0; padding: 6px 6px 6px 0;
border-top: 1px solid @content-color-40; border-top: 1px solid $content-color-40;
transition: background-color @transition-duration; transition: background-color $transition-duration;
&:hover { &:hover {
background-color: fadeout(@light-gray-color, 80%); background-color: $dark-gray-color-20;
} }
&.globalsearch-extended-result { &.globalsearch-extended-result {
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
margin-right: 6px; margin-right: 6px;
img { img {
.square(36px); @include square(36px);
} }
} }
...@@ -218,22 +218,22 @@ ...@@ -218,22 +218,22 @@
white-space: nowrap; white-space: nowrap;
.globalsearch-result-title { .globalsearch-result-title {
font-size: @font-size-base; font-size: $font-size-base;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.globalsearch-result-details { .globalsearch-result-details {
color: @dark-gray-color-80; color: $dark-gray-color-80;
font-size: @font-size-small; font-size: $font-size-small;
} }
} }
.globalsearch-result-time { .globalsearch-result-time {
color: @dark-gray-color-80; color: $dark-gray-color-80;
flex: 0; flex: 0;
font-size: @font-size-small; font-size: $font-size-small;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
...@@ -243,8 +243,8 @@ ...@@ -243,8 +243,8 @@
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;
} }
} }
...@@ -277,12 +277,12 @@ html.responsive-display { ...@@ -277,12 +277,12 @@ html.responsive-display {
margin-left: 0; margin-left: 0;
} }
#globalsearch-list { #globalsearch-list {
@padding: 5px; $padding: 5px;
position: absolute; position: absolute;
left: @padding; left: $padding;
top: calc(@bar-bottom-container-height + @padding); top: calc($bar-bottom-container-height + $padding);
width: calc(100vw - (2 * @padding)); width: calc(100vw - (2 * $padding));
} }
#globalsearch-clear { #globalsearch-clear {
...@@ -325,7 +325,7 @@ html:not(.size-large) { ...@@ -325,7 +325,7 @@ html:not(.size-large) {
right: -1px; right: -1px;
bottom: -1px; bottom: -1px;
left: -1px; left: -1px;
background: fadeout(@base-color, 50%); background: mix($base-color, rgba(255,0,0,0), 50%);
z-index: 1; z-index: 1;
} }
} }
......
resources/assets/stylesheets/less/gradebook.less → resources/assets/stylesheets/scss/gradebook.scss
+ 54
− 45
View file @ bf202778
.gradebook-student .progress { .gradebook-student {
.progress {
display: flex; display: flex;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
font-size: 15px; font-size: 15px;
background-color: @light-gray-color-20; background-color: $light-gray-color-20;
margin: 0.5em 0; margin: 0.5em 0;
} }
.gradebook-student .progress-bar { .progress-bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: white; color: $white;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: @base-color; background-color: $base-color;
}
} }
.gradebook-lecturer-overview-definition { .gradebook-lecturer-overview-definition {
...@@ -23,7 +26,7 @@ ...@@ -23,7 +26,7 @@
.gradebook-lecturer-overview .gradebook-column-total, .gradebook-lecturer-overview .gradebook-column-total,
.gradebook-lecturer-overview .gradebook-column-category { .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 { .gradebook-lecturer-overview .gradebook-column-category {
...@@ -47,14 +50,15 @@ form.gradebook-lecturer-weights label.gradebook-weight { ...@@ -47,14 +50,15 @@ form.gradebook-lecturer-weights label.gradebook-weight {
} }
output { output {
color: @light-gray-color; color: $light-gray-color;
} }
output:before { output:before {
content: "~"; content: "~";
} }
output:after { output:after {
content: " %"; content: " %";
} }
} }
...@@ -70,35 +74,38 @@ form.gradebook-lecturer-weights input[type="number"] { ...@@ -70,35 +74,38 @@ form.gradebook-lecturer-weights input[type="number"] {
font-weight: bold; font-weight: bold;
} }
article.gradebook-student h1, article.gradebook-student {
article.gradebook-student h2 h1, h2 {
{
border-bottom: none; border-bottom: none;
} }
article.gradebook-student > header { > header {
margin-bottom: 2.5em; margin-bottom: 2.5em;
} }
section.gradebook-student-category {
margin-bottom: 3em;
} }
section.gradebook-student-category > header { section.gradebook-student-category {
> header {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
section.gradebook-student-category header .progress { header {
&.progress {
flex: 1; flex: 1;
margin-left: 1em; margin-left: 1em;
} }
}
margin-bottom: 3em;
}
.gradebook-lecturer-custom-definitions .gradebook-lecturer-blank-slate { .gradebook-lecturer-custom-definitions .gradebook-lecturer-blank-slate {
text-align: center; text-align: center;
// border-left: 1px solid @dark-gray-color-15; // border-left: 1px solid $dark-gray-color-15;
// border-bottom: 1px solid @brand-color-darker; // border-bottom: 1px solid $brand-color-darker;
} }
table.default .gradebook-grade-input, table.default .gradebook-grade-input,
...@@ -111,15 +118,17 @@ table.default .gradebook-inline-actions { ...@@ -111,15 +118,17 @@ table.default .gradebook-inline-actions {
white-space: nowrap; white-space: nowrap;
} }
.gradebook-grade-input label { .gradebook-grade-input {
label {
margin-left: 1em; margin-left: 1em;
margin-right: 1em; margin-right: 1em;
display: block; display: block;
} }
.gradebook-grade-input input { input {
min-width: 5em; min-width: 5em;
} }
}
.gradebook-inline-actions .action-menu-icon { .gradebook-inline-actions .action-menu-icon {
vertical-align: text-bottom; vertical-align: text-bottom;
......
resources/assets/stylesheets/less/layouts.less → resources/assets/stylesheets/scss/layouts.scss
+ 42
− 53
View file @ bf202778
// TODO: LESSify // TODO: LESSify
@page-margin: 15px; $page-margin: 15px;
@sidebar-width: 250px; $sidebar-width: 250px;
@sidebar-padding: 12px; $sidebar-padding: 12px;
@sidebar-border-width: 1px; $sidebar-border-width: 1px;
@content-width: 400px; $content-width: 400px;
@content-margin: 12px; $content-margin: 12px;
@site-width: (@page-margin * 2 + @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); $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
/* --- Layouts -------------------------------------------------------------- */ /* --- Layouts -------------------------------------------------------------- */
...@@ -18,15 +18,14 @@ ...@@ -18,15 +18,14 @@
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
box-sizing: border-box; box-sizing: border-box;
clear: both; clear: both;
margin: @page-margin; margin: 0;
background-color: #fff; background-color: $white;
margin: 0px;
} }
// for old pages without template layout // for old pages without template layout
#layout_table { #layout_table {
background-color: @light-gray-color-60; background-color: $light-gray-color-60;
border: 20px solid #fff; border: 20px solid $white;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
...@@ -35,7 +34,7 @@ ...@@ -35,7 +34,7 @@
} }
#layout_container { #layout_container {
background-color: white; background-color: $white;
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
/*margin: 0;*/ /*margin: 0;*/
padding-top: 15px; padding-top: 15px;
...@@ -43,7 +42,7 @@ ...@@ -43,7 +42,7 @@
#page_title_container { #page_title_container {
float: left; float: left;
background-color: #fff; background-color: $white;
line-height: 20px; line-height: 20px;
margin-left: 15px; margin-left: 15px;
margin-right: 15px; margin-right: 15px;
...@@ -57,17 +56,17 @@ ...@@ -57,17 +56,17 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: @page-margin; width: $page-margin;
} }
#layout_context_title { #layout_context_title {
font-size: 1.1em; font-size: 1.1em;
height: 30px; height: 30px;
padding-left: @page-margin; padding-left: $page-margin;
max-height: 30px; max-height: 30px;
overflow: hidden; 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 { > .context_icon {
margin: 7px 1px 0 9px; margin: 7px 1px 0 9px;
...@@ -81,12 +80,12 @@ ...@@ -81,12 +80,12 @@
.contextless & { .contextless & {
.colorblock { .colorblock {
width: 0px; width: 0;
} }
#layout_context_title { #layout_context_title {
color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0);
height: 0px; height: 0;
max-height: 35px; max-height: 35px;
// text-indent: -100%; // text-indent: -100%;
// //
...@@ -96,7 +95,7 @@ ...@@ -96,7 +95,7 @@
} }
.tabs_wrapper { .tabs_wrapper {
padding-left: 0px; padding-left: 0;
} }
} }
} }
...@@ -114,10 +113,10 @@ ...@@ -114,10 +113,10 @@
#layout_content { #layout_content {
box-sizing: border-box; box-sizing: border-box;
.scrollbox-horizontal(); @include scrollbox-horizontal();
padding: 0 @content-margin 47px @content-margin; padding: 0 $content-margin 47px $content-margin;
vertical-align: top; vertical-align: top;
min-width: @content-width; min-width: $content-width;
.oversized & { .oversized & {
overflow: visible; overflow: visible;
...@@ -126,30 +125,29 @@ ...@@ -126,30 +125,29 @@
#layout_sidebar { #layout_sidebar {
background: inherit; background: inherit;
border-left: 1px dashed @brand-color-darker; border-left: 1px dashed $brand-color-darker;
max-width: @sidebar-width; max-width: $sidebar-width;
width: @sidebar-width; width: $sidebar-width;
min-width: @sidebar-width; min-width: $sidebar-width;
padding: @sidebar-padding; padding: $sidebar-padding;
} }
#layout_wrapper { #layout_wrapper {
.clearfix; @include clearfix();
clear: both; clear: both;
min-width: 800px; // 800px breite ist minimum min-width: 800px; // 800px breite ist minimum
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
height: auto !important; height: auto !important;
height: 100%;
margin: 0 auto; margin: 0 auto;
} }
#layout_footer { #layout_footer {
background-color: @base-color; background-color: $base-color;
color: @contrast-content-white; color: $contrast-content-white;
display: flex; display: flex;
padding: 2px 0px; padding: 2px 0;
min-width: @site-width; min-width: $site-width;
width: 100%; width: 100%;
} }
#footer { #footer {
...@@ -167,7 +165,7 @@ ...@@ -167,7 +165,7 @@
align-items: stretch; align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
min-width: @site-width; min-width: $site-width;
#flex-header { // first row of flex-main #flex-header { // first row of flex-main
display: flex; display: flex;
...@@ -178,13 +176,13 @@ ...@@ -178,13 +176,13 @@
justify-content: space-between; justify-content: space-between;
width: 100%; 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 #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 z-index: 1001; // High enough so it will be above the sidebar
} }
...@@ -198,20 +196,20 @@ ...@@ -198,20 +196,20 @@
flex-grow: 1; flex-grow: 1;
min-width: @page-width; min-width: $page-width;
.tabs_wrapper { .tabs_wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
background-color: @dark-gray-color-10; background-color: $dark-gray-color-10;
font-size: 0.9em; 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 #tabs { // row 1 of layout_page
padding-left: @page-margin; padding-left: $page-margin;
transition: margin-left; transition: margin-left;
transition-duration: 300ms; transition-duration: 300ms;
transition-delay: 500ms; transition-delay: 500ms;
...@@ -226,20 +224,11 @@ ...@@ -226,20 +224,11 @@
justify-content: flex-start; justify-content: flex-start;
flex-grow: 1; flex-grow: 1;
min-width: @page-width; min-width: $page-width;
#layout_content { // column 1 of layout_container #layout_content { // column 1 of layout_container
flex-grow: 1; flex-grow: 1;
} }
} }
} }
}
@-moz-document url-prefix() {
.flex-container {
width: 100%;
box-sizing: border-box;
}
} }
resources/assets/stylesheets/less/mobile.less → resources/assets/stylesheets/scss/mobile.scss
+ 5
− 5
View file @ bf202778
.media-breakpoint-small-down({ @include media-breakpoint-small-down(){
#layout_wrapper { min-width: 0 !important; } #layout_wrapper { min-width: 0 !important; }
#login div.index_container .messagebox, #login div.index_container .messagebox,
#index div.index_container .messagebox, #index div.index_container .messagebox,
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
}); }
.media-breakpoint-tiny-down({ @include media-breakpoint-tiny-down(){
#barTopStudip img { #barTopStudip img {
height: 33px; height: 33px;
margin-top: 5px; margin-top: 5px;
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
position: relative; position: relative;
width: ~"calc(100% - 40px)"; width: calc(100% - 40px);
nav { nav {
display: inline; display: inline;
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
} }
} }
} }
}); }
resources/assets/stylesheets/less/navigation-hoverborder.less → resources/assets/stylesheets/scss/navigation-hoverborder.scss
+ 75
− 0
View file @ bf202778
@transition-duration: 300ms; $transition-duration: 300ms;
.border-beneath(@color, @margin: 2px, @height: 3px) when (@color = 'dark') {
.border-beneath(@dark-gray-color-80, @height, @margin); @mixin border-beneath($color, $margin: 2px, $height: 3px) {
}
.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; border-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
position: relative; position: relative;
...@@ -18,18 +13,18 @@ ...@@ -18,18 +13,18 @@
opacity: 1; opacity: 1;
content: ''; content: '';
display: block; display: block;
background-color: @color; background-color: $color;
height: @height; height: $height;
margin-top: @margin; margin-top: $margin;
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: left @transition-duration, transition: left $transition-duration,
right @transition-duration, right $transition-duration,
opacity @transition-duration; opacity $transition-duration;
} }
} }
} }
.border-shrink() { @mixin border-shrink() {
left: 50%; left: 50%;
right: 50%; right: 50%;
opacity: 0; opacity: 0;
...@@ -37,17 +32,17 @@ ...@@ -37,17 +32,17 @@
body:not(.fixed) #barTopMenu { body:not(.fixed) #barTopMenu {
> li.active { > li.active {
.border-beneath('dark'); @include border-beneath($dark-gray-color-80);
} }
> li:not(.active) { > li:not(.active) {
.border-beneath('light'); @include border-beneath($dark-gray-color-40);
&:not(:hover)::after { &:not(:hover)::after {
.border-shrink(); @include border-shrink();
} }
} }
&:hover > li:not(:hover)::after { &:hover > li:not(:hover)::after {
.border-shrink(); @include border-shrink();
} }
.action-menu-icon { .action-menu-icon {
...@@ -55,7 +50,7 @@ body:not(.fixed) #barTopMenu { ...@@ -55,7 +50,7 @@ body:not(.fixed) #barTopMenu {
} }
.overflow li:hover { .overflow li:hover {
.border-beneath('light', 2px, 3px); @include border-beneath($dark-gray-color-40, 2px, 3px);
&::after { &::after {
transform: translate(0, -4px); transform: translate(0, -4px);
} }
...@@ -68,12 +63,12 @@ body:not(.fixed) #barTopMenu { ...@@ -68,12 +63,12 @@ body:not(.fixed) #barTopMenu {
line-height: 25px; line-height: 25px;
} }
&.current { &.current {
.border-beneath('dark', -2px, 3px); @include border-beneath($dark-gray-color-80, -2px, 3px);
} }
&:not(.current) { &:not(.current) {
.border-beneath('light', -2px, 3px); @include border-beneath($dark-gray-color-40, -2px, 3px);
&:not(:hover)::after { &:not(:hover)::after {
.border-shrink(); @include border-shrink();
} }
} }
} }
......
resources/assets/stylesheets/less/navigation.less → resources/assets/stylesheets/scss/navigation.scss
+ 30
− 32
View file @ bf202778
...@@ -14,12 +14,12 @@ body:not(.fixed) #barTopMenu { ...@@ -14,12 +14,12 @@ body:not(.fixed) #barTopMenu {
height: 55px; height: 55px;
padding: 0; padding: 0;
z-index: 2; z-index: 2;
font-size: @font-size-base; font-size: $font-size-base;
} }
a { a {
color: @base-color; color: $base-color;
display: block; display: block;
padding: 0 0px; padding: 0 0;
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
...@@ -27,7 +27,7 @@ body:not(.fixed) #barTopMenu { ...@@ -27,7 +27,7 @@ body:not(.fixed) #barTopMenu {
span { span {
background: no-repeat 0 0; background: no-repeat 0 0;
display: inline-block; display: inline-block;
.square(32px); @include square(32px);
// Icon state: new // Icon state: new
&.new { &.new {
...@@ -36,8 +36,8 @@ body:not(.fixed) #barTopMenu { ...@@ -36,8 +36,8 @@ body:not(.fixed) #barTopMenu {
} }
img { img {
margin: 8px 0px; margin: 8px 0;
.square(32px); @include square(32px);
} }
&[data-badge]:not([data-badge="0"]) { &[data-badge]:not([data-badge="0"]) {
position: relative; position: relative;
...@@ -48,13 +48,13 @@ body:not(.fixed) #barTopMenu { ...@@ -48,13 +48,13 @@ body:not(.fixed) #barTopMenu {
top: 0; top: 0;
margin-left: 5px; margin-left: 5px;
.square(16px); @include square(16px);
background-clip: content-box; background-clip: content-box;
background-color: @red; background-color: $red;
border: 3px solid @dark-gray-color-5; border: 3px solid $dark-gray-color-5;
border-radius: 50%; border-radius: 50%;
color: white; color: $white;
content: attr(data-badge); content: attr(data-badge);
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
...@@ -85,7 +85,7 @@ body:not(.fixed) #barTopMenu { ...@@ -85,7 +85,7 @@ body:not(.fixed) #barTopMenu {
// Hide all navigation item title on hover and display only the currently // Hide all navigation item title on hover and display only the currently
// hovered one // hovered one
.navtitle { .navtitle {
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: opacity 300ms; // Smooth change when entering transition: opacity 300ms; // Smooth change when entering
} }
} }
...@@ -95,7 +95,7 @@ body:not(.fixed) #barTopMenu { ...@@ -95,7 +95,7 @@ body:not(.fixed) #barTopMenu {
} }
> li:hover .navtitle { > li:hover .navtitle {
opacity: 1; opacity: 1;
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: opacity 0ms; // Quick change when leaving transition: opacity 0ms; // Quick change when leaving
} }
} }
...@@ -129,7 +129,7 @@ body:not(.fixed) #barTopMenu { ...@@ -129,7 +129,7 @@ body:not(.fixed) #barTopMenu {
// Rotate icon // Rotate icon
> label img { > label img {
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: transform 300ms; transition: transform 300ms;
} }
transform: rotate(90deg); transform: rotate(90deg);
...@@ -137,7 +137,7 @@ body:not(.fixed) #barTopMenu { ...@@ -137,7 +137,7 @@ body:not(.fixed) #barTopMenu {
// Define transition duration for possible badge on overflow // Define transition duration for possible badge on overflow
> label > a[data-badge]::before { > label > a[data-badge]::before {
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: opacity 300ms; transition: opacity 300ms;
} }
} }
...@@ -169,8 +169,8 @@ body:not(.fixed) #barTopMenu { ...@@ -169,8 +169,8 @@ body:not(.fixed) #barTopMenu {
margin: 5px 0 0; margin: 5px 0 0;
padding: 4px 4px; padding: 4px 4px;
background-color: @dark-gray-color-5; background-color: $dark-gray-color-5;
border: 1px solid @dark-gray-color-40; border: 1px solid $dark-gray-color-40;
border-top: 0; border-top: 0;
min-width: 150px; min-width: 150px;
...@@ -194,7 +194,7 @@ body:not(.fixed) #barTopMenu { ...@@ -194,7 +194,7 @@ body:not(.fixed) #barTopMenu {
} }
img { img {
flex: 1 0 20px; flex: 1 0 20px;
.square(20px); @include square(20px);
margin: 0 0.25em; margin: 0 0.25em;
} }
...@@ -220,12 +220,12 @@ body:not(.fixed) #barTopMenu { ...@@ -220,12 +220,12 @@ body:not(.fixed) #barTopMenu {
display: none; display: none;
} }
label[for="barTopMenu-toggle"] { label[for="barTopMenu-toggle"] {
.background-icon('hamburger', 'info_alt', 16); @include background-icon(hamburger, info_alt, 16);
background-position: 0px center; background-position: 0 center;
background-repeat: no-repeat; background-repeat: no-repeat;
color: @white; color: $white;
line-height: @bar-bottom-container-height; line-height: $bar-bottom-container-height;
overflow: hidden; overflow: hidden;
padding-left: (5px + 16px + 5px); // padding + icon + next padding padding-left: (5px + 16px + 5px); // padding + icon + next padding
white-space: nowrap; white-space: nowrap;
...@@ -233,7 +233,7 @@ label[for="barTopMenu-toggle"] { ...@@ -233,7 +233,7 @@ label[for="barTopMenu-toggle"] {
height: 0; height: 0;
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
@media not (prefers-reduced-motion) { @media not prefers-reduced-motion {
transition: all 300ms; transition: all 300ms;
} }
...@@ -250,20 +250,20 @@ html.no-touch { ...@@ -250,20 +250,20 @@ html.no-touch {
body.fixed { body.fixed {
#flex-header { #flex-header {
height: @header-height; height: $header-height;
} }
label[for="barTopMenu-toggle"] { label[for="barTopMenu-toggle"] {
opacity: 1; opacity: 1;
max-height: @bar-bottom-container-height; max-height: $bar-bottom-container-height;
height: auto; height: auto;
} }
#barTopMenu { #barTopMenu {
background-color: @base-color; background-color: $base-color;
list-style: none; list-style: none;
margin: 0px 0px 0px -15px; margin: 0 0 0px -15px;
padding: 0px; padding: 0;
position: absolute; position: absolute;
width: fit-content; width: fit-content;
...@@ -272,9 +272,7 @@ body.fixed { ...@@ -272,9 +272,7 @@ body.fixed {
display: none; display: none;
img { img {
filter: contrast(0) brightness(2); @include square(16px);
.square(16px);
margin-right: 0.8em; margin-right: 0.8em;
} }
...@@ -286,11 +284,11 @@ body.fixed { ...@@ -286,11 +284,11 @@ body.fixed {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
color: @white; color: $white;
} }
&:hover { &:hover {
background-color: @base-color-80; background-color: $base-color-80;
} }
&.overflow { &.overflow {
......
resources/assets/stylesheets/less/opengraph.less → resources/assets/stylesheets/scss/opengraph.scss
+ 19
− 19
View file @ bf202778
...@@ -7,20 +7,20 @@ ...@@ -7,20 +7,20 @@
text-align: right; text-align: right;
li { li {
border-top: thin solid @dark-gray-color-20; border-top: thin solid $dark-gray-color-20;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
&:first-child { &:first-child {
border-left: thin solid @dark-gray-color-20; border-left: thin solid $dark-gray-color-20;
} }
&:last-child { &:last-child {
border-right: thin solid @dark-gray-color-20; border-right: thin solid $dark-gray-color-20;
} }
} }
.switch-left, .switch-right { .switch-left, .switch-right {
.hide-text(); @include hide-text();
.square(20px); @include square(20px);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0; padding: 0;
...@@ -30,15 +30,15 @@ ...@@ -30,15 +30,15 @@
} }
} }
.switch-left { .switch-left {
.background-icon('arr_1left', 'clickable'); @include background-icon('arr_1left', 'clickable');
&[disabled] { &[disabled] {
.background-icon('arr_1left', 'inactive'); @include background-icon('arr_1left', 'inactive');
} }
} }
.switch-right { .switch-right {
.background-icon('arr_1right', 'clickable'); @include background-icon('arr_1right', 'clickable');
&[disabled] { &[disabled] {
.background-icon('arr_1right', 'inactive'); @include background-icon('arr_1right', 'inactive');
} }
} }
} }
...@@ -52,15 +52,15 @@ ...@@ -52,15 +52,15 @@
} }
.opengraph { .opengraph {
@padding: 10px; $padding: 10px;
@height: 120px; $height: 120px;
.clearfix; @include clearfix();
font-size: 0.8em; font-size: 0.8em;
border: 1px solid @dark-gray-color-20; border: 1px solid $dark-gray-color-20;
padding: @padding; padding: $padding;
min-height: @height; min-height: $height;
.flash-embedder { .flash-embedder {
display: flex; display: flex;
...@@ -87,20 +87,20 @@ ...@@ -87,20 +87,20 @@
a.info { a.info {
box-sizing: border-box; box-sizing: border-box;
color: black; color: $black;
display: block; display: block;
word-break: normal !important; word-break: normal !important;
&:hover { &:hover {
color: black; color: $black;
} }
} }
.image { .image {
.square(@height); @include square($height);
background-size: contain; background-size: contain;
background-position: left center; background-position: left center;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: @padding; margin-right: $padding;
} }
} }
resources/assets/stylesheets/less/personal-notifications.less → resources/assets/stylesheets/scss/personal-notifications.scss
+ 62
− 54
View file @ bf202778
#notification_marker { #notification_marker {
width: 48px; width: 48px;
margin-left: 0px; margin-left: 0;
padding-left: 0px; padding-left: 0;
margin-right: 0px; margin-right: 0;
padding-right: 0px; padding-right: 0;
height: 28px; height: 28px;
font-size: 0.8em; font-size: 0.8em;
color: @base-color; color: $base-color;
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
vertical-align: text-bottom; vertical-align: text-bottom;
background-color: @dark-gray-color-10; background-color: $dark-gray-color-10;
border: 1px solid @dark-gray-color-40; border: 1px solid $dark-gray-color-40;
&.alert { &.alert {
background-color: @red; background-color: $red;
color: @white; color: $white;
} }
} }
#notification_container { #notification_container {
@arrow-height: 10px; $arrow-height: 10px;
@list-width: 400px; $list-width: 400px;
width: 49px; width: 49px;
height: 30px; height: 30px;
/*border: thin solid @dark-gray-color-20;*/ /*border: thin solid $dark-gray-color-20;*/
color: @base-color; color: $base-color;
vertical-align: text-bottom; vertical-align: text-bottom;
background-color: @base-color; background-color: $base-color;
position: relative; position: relative;
// Insert invisible padding on top of the arrow in order to try to // Insert invisible padding on top of the arrow in order to try to
...@@ -39,10 +39,10 @@ ...@@ -39,10 +39,10 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: -@arrow-height; bottom: -$arrow-height;
left: (-@list-width); left: (-$list-width);
right: 0; right: 0;
height: @arrow-height; height: $arrow-height;
} }
&:hover::after { &:hover::after {
content: ""; content: "";
...@@ -54,7 +54,15 @@ ...@@ -54,7 +54,15 @@
width: 25px; width: 25px;
} }
.list, li&:hover .list { display: none; } .list {
display:none;
}
li {
&:hover {
display: none;
}
}
&.hoverable:hover { &.hoverable:hover {
.list { display: block; } .list { display: block; }
} }
...@@ -72,62 +80,62 @@ ...@@ -72,62 +80,62 @@
} }
.list { .list {
// Creates an arrow pointing from the list to the triggering element // 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; background-color: $white;
border-left: thin solid @light-gray-color-60; border-left: thin solid $light-gray-color-60;
border-top: thin solid @light-gray-color-60; border-top: thin solid $light-gray-color-60;
border-collapse: collapse; border-collapse: collapse;
color: @black; color: $black;
display: none; display: none;
font-size: 1em; font-size: 1em;
position: absolute; position: absolute;
width: @list-width; width: $list-width;
max-width: @list-width; max-width: $list-width;
box-shadow: 1px 1px 1px @light-gray-color-80; box-shadow: 1px 1px 1px $light-gray-color-80;
// Without this, buttons or message boxes would appear on top of the list // Without this, buttons or message boxes would appear on top of the list
z-index: 2; z-index: 2;
&::before, &::before,
&::after { &::after {
left: (@list-width - 20px); left: ($list-width - 30px);
} }
// Positions: below or left'ish or right'ish to the triggering element // Positions: below or left'ish or right'ish to the triggering element
&.below { &.below {
left: (-@list-width + 44px); left: (-$list-width + 44px);
} }
&.left { &.left {
right: 0px; right: 0;
&:before { &:before {
left: auto; left: auto;
right: 4px; right: 4px;
} }
} }
&.right { &.right {
left: 0px; left: 0;
&:before { left: 4px; } &:before { left: 4px; }
} }
// List item // List item
.item { .item {
@padding: 5px; $padding: 5px;
border-top: thin solid @light-gray-color-60; border-top: thin solid $light-gray-color-60;
line-height: 20px; line-height: 20px;
display: block; display: block;
height: auto; height: auto;
padding: @padding; padding: $padding;
white-space: normal; white-space: normal;
&:hover { &:hover {
background-color: fadeout(@light-gray-color, 80%); background-color: $light-gray-color-20
} }
&:only-child:hover { &:only-child:hover {
#arrow > .top(10px, fadeout(@light-gray-color, 80%)); @include arrow-top(10px, $light-gray-color-20);
margin-top: 0; margin-top: 0;
&::before { &::before {
left: (@list-width - 20px); left: ($list-width - 30px);
z-index: 2; z-index: 2;
} }
} }
...@@ -142,24 +150,24 @@ ...@@ -142,24 +150,24 @@
flex-wrap: nowrap; flex-wrap: nowrap;
.avatar { .avatar {
@avatar-size: 40px; $avatar-size: 40px;
margin-right: 10px; margin-right: 10px;
margin-left: 0px; margin-left: 0;
background-position: center center; background-position: center center;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
width: @avatar-size; width: $avatar-size;
height: @avatar-size; height: $avatar-size;
min-width: @avatar-size; min-width: $avatar-size;
} }
} }
} }
a { a {
color: @brand-color-dark; color: $brand-color-dark;
display: block; display: block;
padding: 0px; padding: 0;
&:hover { color: @active-color; } &:hover { color: $active-color; }
} }
.options { .options {
...@@ -177,8 +185,8 @@ ...@@ -177,8 +185,8 @@
a.mark-all-as-read, a.mark-all-as-read,
a.enable-desktop-notifications { a.enable-desktop-notifications {
background-color: @dark-gray-color-15; background-color: $dark-gray-color-15;
border-bottom: thin solid @dark-gray-color-45; border-bottom: thin solid $dark-gray-color-45;
max-height: 31px; max-height: 31px;
padding: 5px 5px 5px 14px; padding: 5px 5px 5px 14px;
z-index: 3; z-index: 3;
...@@ -186,19 +194,19 @@ ...@@ -186,19 +194,19 @@
a.mark-all-as-read { a.mark-all-as-read {
// Creates an arrow pointing from the list to the triggering element // 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, &::before,
&::after { &::after {
left: (@list-width - 20px); left: ($list-width - 30px);
z-index: 2; z-index: 2;
} }
.background-icon('accept', 'clickable'); @include background-icon('accept', 'clickable');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 8px center; background-position: right 8px center;
&:hover { &:hover {
.background-icon('accept', 'attention'); @include background-icon('accept', 'attention');
} }
margin: 0; margin: 0;
...@@ -216,10 +224,10 @@ ...@@ -216,10 +224,10 @@
+ .enable-desktop-notifications { + .enable-desktop-notifications {
// Creates an arrow pointing from the list to the triggering element // 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, &::before,
&::after { &::after {
left: (@list-width - 20px); left: ($list-width - 30px);
z-index: 2; z-index: 2;
} }
margin: 0; margin: 0;
...@@ -227,12 +235,12 @@ ...@@ -227,12 +235,12 @@
} }
} }
a.enable-desktop-notifications { a.enable-desktop-notifications {
.background-icon('notification', 'clickable'); @include background-icon('notification', 'clickable');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 8px center; background-position: right 8px center;
&:hover { &:hover {
.background-icon('notification', 'attention'); @include background-icon('notification', 'attention');
} }
} }
} }
resources/assets/stylesheets/scss/search.scss
+ 1
− 1
View file @ bf202778
...@@ -89,7 +89,7 @@ label.inactive-settings-category { ...@@ -89,7 +89,7 @@ label.inactive-settings-category {
} }
&:hover { &:hover {
background-color: mix($light-gray-color, $white, 80%); background-color: $light-gray-color-20;
} }
&.search-extended-result { &.search-extended-result {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment