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
No related branches found
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 @@
background-attachment: local, local, scroll, scroll;
}
%scrollbox-horizontal {
@mixin scrollbox-horizontal {
overflow: auto;
background:
......
resources/assets/stylesheets/scss/avatar.scss
+ 124
− 0
View file @ bf202778
......@@ -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 @@
.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;
}
}
resources/assets/stylesheets/less/contacts.less → resources/assets/stylesheets/scss/contacts.scss
+ 1
− 1
View file @ bf202778
......@@ -41,7 +41,7 @@ table.contact-header {
&:hover { background-color: #b7c2e2; }
a {
color: #f00;
color: $red;
font-weight: bold;
}
}
......
resources/assets/stylesheets/less/content_box.less → resources/assets/stylesheets/scss/content_box.scss
+ 38
− 25
View file @ bf202778
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;
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%);
}
}
}
......
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 @@
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;
}
......
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-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;
}
}
......@@ -197,8 +196,8 @@ form.default {
> fieldset {
border: none;
margin:0px;
padding:0px;
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;
}
......
resources/assets/stylesheets/less/globalsearch.less → resources/assets/stylesheets/scss/globalsearch.scss
+ 44
− 44
View file @ bf202778
......@@ -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;
}
}
......
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;
height: 20px;
overflow: hidden;
font-size: 15px;
background-color: @light-gray-color-20;
background-color: $light-gray-color-20;
margin: 0.5em 0;
}
.gradebook-student .progress-bar {
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
color: white;
color: $white;
text-align: center;
white-space: nowrap;
background-color: @base-color;
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
{
article.gradebook-student {
h1, h2 {
border-bottom: none;
}
article.gradebook-student > header {
> header {
margin-bottom: 2.5em;
}
section.gradebook-student-category {
margin-bottom: 3em;
}
section.gradebook-student-category > header {
section.gradebook-student-category {
> header {
display: flex;
align-items: baseline;
margin-bottom: 0.5em;
}
section.gradebook-student-category header .progress {
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,15 +118,17 @@ table.default .gradebook-inline-actions {
white-space: nowrap;
}
.gradebook-grade-input label {
.gradebook-grade-input {
label {
margin-left: 1em;
margin-right: 1em;
display: block;
}
.gradebook-grade-input input {
input {
min-width: 5em;
}
}
.gradebook-inline-actions .action-menu-icon {
vertical-align: text-bottom;
......
resources/assets/stylesheets/less/layouts.less → resources/assets/stylesheets/scss/layouts.scss
+ 42
− 53
View file @ bf202778
// 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;
}
}
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; }
#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 @@
}
}
}
});
}
resources/assets/stylesheets/less/navigation-hoverborder.less → resources/assets/stylesheets/scss/navigation-hoverborder.scss
+ 75
− 0
View file @ bf202778
@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) {
$transition-duration: 300ms;
@mixin border-beneath($color, $margin: 2px, $height: 3px) {
border-bottom: 0;
padding-bottom: 0;
position: relative;
......@@ -18,18 +13,18 @@
opacity: 1;
content: '';
display: block;
background-color: @color;
height: @height;
margin-top: @margin;
background-color: $color;
height: $height;
margin-top: $margin;
@media not (prefers-reduced-motion) {
transition: left @transition-duration,
right @transition-duration,
opacity @transition-duration;
@media not prefers-reduced-motion {
transition: left $transition-duration,
right $transition-duration,
opacity $transition-duration;
}
}
}
.border-shrink() {
@mixin border-shrink() {
left: 50%;
right: 50%;
opacity: 0;
......@@ -37,17 +32,17 @@
body:not(.fixed) #barTopMenu {
> li.active {
.border-beneath('dark');
@include border-beneath($dark-gray-color-80);
}
> li:not(.active) {
.border-beneath('light');
@include border-beneath($dark-gray-color-40);
&:not(:hover)::after {
.border-shrink();
@include border-shrink();
}
}
&:hover > li:not(:hover)::after {
.border-shrink();
@include border-shrink();
}
.action-menu-icon {
......@@ -55,7 +50,7 @@ body:not(.fixed) #barTopMenu {
}
.overflow li:hover {
.border-beneath('light', 2px, 3px);
@include border-beneath($dark-gray-color-40, 2px, 3px);
&::after {
transform: translate(0, -4px);
}
......@@ -68,12 +63,12 @@ body:not(.fixed) #barTopMenu {
line-height: 25px;
}
&.current {
.border-beneath('dark', -2px, 3px);
@include border-beneath($dark-gray-color-80, -2px, 3px);
}
&:not(.current) {
.border-beneath('light', -2px, 3px);
@include border-beneath($dark-gray-color-40, -2px, 3px);
&: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 {
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 {
......
resources/assets/stylesheets/less/opengraph.less → resources/assets/stylesheets/scss/opengraph.scss
+ 19
− 19
View file @ bf202778
......@@ -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;
}
}
resources/assets/stylesheets/less/personal-notifications.less → resources/assets/stylesheets/scss/personal-notifications.scss
+ 62
− 54
View file @ bf202778
#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');
}
}
}
resources/assets/stylesheets/scss/search.scss
+ 1
− 1
View file @ bf202778
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment