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

migrate less to scss, closes #1543 

Closes #1543

Merge request studip/studip!959
parent b1cc4ba3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 319 additions and 204 deletions
resources/assets/stylesheets/less/inline-editing.less deleted 100644 → 0
+ 0
− 0
View file @ b1cc4ba3
resources/assets/stylesheets/mixins/misc.scss
+ 5
− 0
View file @ 66b71e30
......@@ -28,3 +28,8 @@
@mixin square($size) {
@include size($size, $size);
}
// https://codepen.io/kennyglenn/pen/kxqWjP
@function contrast($color, $dark, $light, $threshold: 50%) {
@return if(lightness($color) > $threshold, $light, $dark)
}
resources/assets/stylesheets/mixins/studip.scss
+ 24
− 0
View file @ 66b71e30
......@@ -79,6 +79,15 @@
}
}
@mixin retina-background-image($image0, $image1, $width: 100%, $height: $width) {
background-image: url("#{$image-path}/#{$image0}");
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
background-image: url("#{$image-path}/#{$image1}");
background-size: $width;
}
}
@mixin icon($position, $icon, $role, $size: 16px, $padding: 0) {
$position: unquote($position);
......@@ -106,6 +115,21 @@
}
}
// Mixin that replaces the navigation icon tags with css images
@mixin navigation-icon($default-icon-name, $toggled-icon-name) {
img { display: none; }
display: inline-block;
@include background-icon($default-icon-name, clickable);
@include hide-text();
@include square(16px);
&.toggled {
@include background-icon($toggled-icon-name, clickable);
}
}
@mixin empty-placeholder-image($icon, $background-color: $dark-gray-color-5) {
&::before,
&::after {
......
resources/assets/stylesheets/less/activityfeed.less → resources/assets/stylesheets/scss/activityfeed.scss
+ 13
− 26
View file @ 66b71e30
......@@ -5,14 +5,14 @@
overflow-y: auto;
.activity {
border: 1px solid #d0d7e3;
border: 1px solid $content-color-40;
width: 95%;
margin: 30px auto;
}
.activity header {
color: #28497c;
color: $base-color;
padding: 5px;
display: flex;
position: relative;
......@@ -22,10 +22,10 @@
border-radius: 50%;
width: 42px;
height: 42px;
background: @base-color;
background: $base-color;
position: absolute;
top: -20px;
border: 3px solid white;
border: 3px solid $white;
cursor: pointer;
&.left {
......@@ -38,7 +38,7 @@
img {
padding: 12px;
.square(18px);
@include square(18px);
}
}
......@@ -51,7 +51,7 @@
}
h3 {
display: inline;
color: #28497c;
color: $base-color;
border-bottom: none;
font-size: 14px;
vertical-align: 6px;
......@@ -62,7 +62,7 @@
max-width: 25px;
}
.activity-date{
color: gray;
color: $base-gray;
font-size: 0.75em ;
margin: 0 0 0 30px;
display: block;
......@@ -73,7 +73,7 @@
.activity-content{
padding: 5px;
background-color: white;
background-color: $white;
margin-left: 30px;
display: none;
}
......@@ -106,7 +106,7 @@
.activity-object-link ul {
padding: 0px;
padding: 0;
}
.activity-object-link ul li {
......@@ -117,7 +117,7 @@
.activity-day {
color: gray;
color: $base-gray;
font-size: 0.75em ;
margin: 0 45%;
}
......@@ -129,7 +129,7 @@
}
.loading-indicator span {
background-color: #CCCCDD;
background-color: $light-gray-color;
border-radius: 50%;
height: 10px;
position: relative;
......@@ -172,24 +172,11 @@
100% { transform: scale(1); }
}
// Mixin that replaces the navigation icon tags with css images
.navigation-icon(@default-icon-name, @toggled-icon-name) {
img { display: none; }
display: inline-block;
.background-icon(@default-icon-name, 'clickable');
.hide-text();
.square(16px);
&.toggled {
.background-icon(@toggled-icon-name, 'clickable');
}
}
#toggle-all-activities {
.navigation-icon('no-activity', 'activity');
@include navigation-icon(no-activity, activity);
}
#toggle-user-activities {
.navigation-icon('visibility-invisible/headache', 'visibility-visible/headache');
@include navigation-icon(visibility-invisible/headache, visibility-visible/headache);
}
resources/assets/stylesheets/less/big-image-handler.less → resources/assets/stylesheets/scss/big-image-handler.scss
+ 11
− 8
View file @ 66b71e30
$bg-big-image-handler: mix($black, $white, 30%);
.oversized-image {
cursor: zoom-in;
}
.oversized-image-zoom {
position: fixed;
top: 0;
......@@ -12,29 +15,29 @@
width: 100%;
z-index: 10000;
background: fadeout(#000, 30%);
background: $bg-big-image-handler;
cursor: zoom-out;
display: flex;
justify-content: center;
align-items: center;
// The actual oversized image is loaded as a background image so we can
// use the background-size option "contain" which will ensure that the
// image will be visible even on small displays.
span {
background-color: fadeout(#000, 30%);
background-color: $bg-big-image-handler;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #fff;
box-shadow: 0 0 20px fadeout(#fff, 50%);
border: 1px solid $white;
box-shadow: 0 0 20px mix($black, $white, 50%);
display: block;
max-width: 98%;
max-height: 98%;
img {
opacity: 0;
}
}
}
\ No newline at end of file
}
}
resources/assets/stylesheets/less/consultation.less → resources/assets/stylesheets/scss/consultation.scss
+ 7
− 7
View file @ 66b71e30
.consultation-note {
border-bottom: 1px solid @light-gray-color-40;
font-size: @font-size-small;
border-bottom: 1px solid $light-gray-color-40;
font-size: $font-size-small;
margin-bottom: 2px;
padding-bottom: 2px;
......@@ -9,13 +9,13 @@
margin-bottom: 0;
padding-bottom: 0;
border-top: 1px solid @light-gray-color-40;
border-top: 1px solid $light-gray-color-40;
margin-top: 2px;
padding-top: 2px;
}
&.shortened {
.icon('before', 'info-circle', 'info', 12, 5px);
@include icon(before, info-circle, info, 12px, 5px);
transition: opacity 300ms;
&:not(:hover)::after {
opacity: 0.5;
......@@ -23,10 +23,10 @@
}
}
.consultation-free {
color: @green;
color: $green;
}
.consultation-occupied {
color: @red;
color: $red;
}
.consultation-overview {
......@@ -34,6 +34,6 @@
font-style: italic;
}
.slot-is-expired td {
background-color: @dark-gray-color-10;
background-color: $dark-gray-color-10;
}
}
resources/assets/stylesheets/less/content.less → resources/assets/stylesheets/scss/content.scss
+ 1
− 1
View file @ 66b71e30
......@@ -2,7 +2,7 @@
background-color: #e3eaf6;
background-image: linear-gradient(#cdd9ed, #e3eaf6 40%, #e3eaf6);
background-repeat: no-repeat;
border-top: 1px solid @content-color;
border-top: 1px solid $content-color;
line-height: 17pt;
height: 25px;
}
......
resources/assets/stylesheets/less/coursewizard.less → resources/assets/stylesheets/scss/coursewizard.scss
+ 4
− 4
View file @ 66b71e30
......@@ -18,13 +18,13 @@ div {
&#assigned {
float:left;
padding-right: 10px;
width: ~"calc(50% - 10px)";
width: calc(50% - 10px);
}
&#studyareas {
border-left: 1px solid #666666;
border-left: 1px solid $base-gray;
float: left;
padding-left: 10px;
width: ~"calc(50% - 20px)";
width: calc(50% - 20px);
}
}
......@@ -81,4 +81,4 @@ form.course-wizard-step-0 {
footer {
order: 100;
}
}
\ No newline at end of file
}
resources/assets/stylesheets/scss/dashboard.scss
+ 2
− 2
View file @ 66b71e30
......@@ -8,7 +8,7 @@
}
> li:nth-child(n+2) {
border-top: 1px solid #d4dbe5;
border-top: 1px solid $content-color-40;
}
}
......@@ -23,7 +23,7 @@
flex-wrap: wrap;
span {
border-right: 1px solid #d4dbe5;
border-right: 1px solid $content-color-40;
margin-right: 0.3em;
padding-right: 0.4em;
}
......
resources/assets/stylesheets/less/dialog.less → resources/assets/stylesheets/scss/dialog.scss
+ 37
− 37
View file @ 66b71e30
.ui-widget-overlay {
background: fadeout(mix(@base-gray, #fff, 85%), 21%);
background: transparentize($base-gray, .2);
opacity: 1;
position: fixed;
}
......@@ -7,22 +7,22 @@
.ui-dialog.ui-widget.ui-widget-content {
border: 0;
padding: 3px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
box-shadow: 0 0 8px rgba(0,0,0,0.5);
.hide-in-dialog {
display: none;
}
.ui-dialog-titlebar {
background: @brand-color-darker;
background: $brand-color-darker;
border: 0;
color: @contrast-content-white;
color: $contrast-content-white;
font-size:1.3em;
font-weight: normal;
}
.ui-dialog-titlebar-close {
.square(32px);
@include square(32px);
background: inherit;
border: 0;
line-height:32px;
......@@ -31,15 +31,15 @@
text-align:center;
&:hover {
.square(32px);
@include square(32px);
background: inherit;
border: 0;
margin-top:-16px;
padding: 0;
}
.ui-icon {
.square(16px);
.background-icon('decline', 'info_alt');
@include square(16px);
@include background-icon(decline, info_alt);
background-position: 0;
display:inline-block;
margin: 0;
......@@ -49,7 +49,7 @@
transform: translate(-50%, -50%);
&:hover{
.background-icon('decline', 'info_alt');
@include background-icon(decline, info_alt);
}
}
}
......@@ -60,7 +60,7 @@
.ui-dialog-buttonpane {
padding: 0.5em 0.4em;
margin: 0 1em;
border-color: @base-color-20;
border-color: $base-color-20;
.ui-dialog-buttonset {
text-align: center;
......@@ -68,7 +68,7 @@
white-space: nowrap;
}
.ui-button {
.button(); // Include button mixin
@include button(); // Include button mixin
font-weight: normal;
&.accept,
......@@ -80,25 +80,25 @@
}
&.accept {
.button-with-icon("accept", "clickable", "info_alt");
@include button-with-icon(accept, clickable, info_alt);
}
&.cancel {
.button-with-icon("decline", "clickable", "info_alt");
@include button-with-icon(decline, clickable, info_alt);
}
&.download {
.button-with-icon("download2", "clickable", "info_alt");
@include button-with-icon(download2, clickable, info_alt);
}
&.disabled,
&[disabled] {
background: @light-gray-color-20;
background: $light-gray-color-20;
cursor: default;
opacity: 0.65;
&:hover {
color: @base-color;
color: $base-color;
}
}
......@@ -115,12 +115,12 @@
}
}
.ui-dialog-titlebar-wiki {
.background-icon('question-circle', 'info_alt', 24);
@include background-icon(question-circle, info_alt, 24);
background-position: center;
background-repeat: no-repeat;
display: inline-block;
position: absolute;
.square(32px);
@include square(32px);
margin-top: -16px;
top: 50%;
right: 34px; // This is ugly but hard to avoid since the close button's position on a dialog is also hardcoded
......@@ -144,8 +144,8 @@
min-width: 30em;
.ui-dialog-titlebar {
background-color: @yellow;
color: black;
background-color: $yellow;
color: $contrast-content-white;
text-align: left;
}
.ui-dialog-titlebar-close {
......@@ -153,14 +153,14 @@
border: 0;
.ui-icon, .ui-icon:hover {
.background-icon('decline', 'clickable');
@include background-icon(decline, clickable);
background-position: 0;
}
}
.ui-dialog-content {
box-sizing: border-box;
.background-icon('question-circle-full', 'status-yellow');
@include background-icon(question-circle-full, status-yellow);
background-position: 12px 8px;
background-repeat: no-repeat;
background-size: 32px;
......@@ -181,9 +181,9 @@
}
.ui-dialog.studip-lightbox {
@arrow-distance: 8px;
@arrow-size: 32px;
@arrow-zoom: 16px;
$arrow-distance: 8px;
$arrow-size: 32px;
$arrow-zoom: 16px;
.wrapper {
position: absolute;
top: 0;
......@@ -217,24 +217,24 @@
left: 0;
right: 50%;
.icon('before', 'arr_1left', 'clickable', @arrow-size);
@include icon(before, arr_1left, clickable, $arrow-size);
&::before {
position: absolute;
left: @arrow-distance;
left: $arrow-distance;
top: 50%;
transform: translate(0, -50%);
z-index: 2;
}
&::after {
.square((@arrow-size + @arrow-zoom));
@include square(($arrow-size + $arrow-zoom));
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
background-color: @white;
background-color: $white;
content: '';
display: block;
......@@ -245,24 +245,24 @@
right: 0;
left: 50%;
.icon('before', 'arr_1right', 'clickable', @arrow-size);
@include icon(before, arr_1right, clickable, $arrow-size);
&::before {
position: absolute;
right: @arrow-distance;
right: $arrow-distance;
top: 50%;
transform: translate(0, -50%);
z-index: 2;
}
&::after {
.square((@arrow-size + @arrow-zoom));
@include square(($arrow-size + $arrow-zoom));
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
background-color: @white;
background-color: $white;
content: '';
display: block;
......@@ -282,16 +282,16 @@
white-space:normal;
html.responsive-display & {
@gap: 10px;
$gap: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-space-between;
margin: -@gap 0 0 -@gap;
justify-content: space-between;
margin: -$gap 0 0 -$gap;
.ui-button {
flex: 1;
margin: @gap 0 0 @gap;
margin: $gap 0 0 $gap;
overflow-x: hidden;
text-overflow: ellipsis;
}
......
resources/assets/stylesheets/less/documents.less → resources/assets/stylesheets/scss/documents.scss
+ 12
− 12
View file @ 66b71e30
......@@ -12,7 +12,7 @@
z-index: 1;
> a, ul {
background-color: #fff;
background-color: $white;
padding: 5px;
}
> a {
......@@ -21,7 +21,7 @@
&.extendable:hover {
> a, > ul {
box-shadow: 0 4px 3px #aaa;
box-shadow: 0 4px 3px $base-gray;
}
ul {
display: flex;
......@@ -40,31 +40,31 @@
line-height: 1.5em;
a {
.background-icon('folder-parent', 'clickable', 24);
@include background-icon(folder-parent, clickable, 24);
background-position: left center;
background-repeat: no-repeat;
padding-left: 30px;
}
&:first-child a {
.background-icon('folder-empty', 'clickable', 24);
@include background-icon(folder-empty, clickable, 24);
}
}
}
}
.document-dialog {
@info-width: 150px;
.clearfix;
$info-width: 150px;
@include clearfix();
> aside {
float: left;
width: @info-width;
width: $info-width;
}
.document-dialog-icon {
text-align: center;
}
> div {
border-left: 1px dashed #888;
margin-left: @info-width;
border-left: 1px dashed $dark-gray-color;
margin-left: $info-width;
min-height: 100%;
max-height: 100%;
overflow-y: auto;
......@@ -85,18 +85,18 @@
.documents.dragging {
[data-file]:not([data-folder]) {
background-color: @light-gray-color-40;
background-color: $light-gray-color-40;
opacity: 0.6;
}
}
.documents {
[data-folder].dropping {
background-color: @red-40;
background-color: $red-40;
}
}
.document-draggable-helper {
background-color: @activity-color-40 !important;
background-color: $activity-color-40 !important;
opacity: 1 !important;
td {
border-bottom: 0 !important;
......
resources/assets/stylesheets/less/evaluation.less → resources/assets/stylesheets/scss/evaluation.scss
+ 4
− 4
View file @ 66b71e30
......@@ -2,15 +2,15 @@
.eval_title {
font-size: 1.2em;
font-weight: bold;
color: #24437c;
color: $base-color;
}
.eval_error {
color: #E00000;
color: $red;
}
.eval_success {
color: #008000;
color: $green;
}
.eval_info {
......@@ -35,6 +35,6 @@
h3.eval {
font-size: 1.3em;
color: #000000;
color: $black;
font-weight: bold;
}
resources/assets/stylesheets/less/header.less → resources/assets/stylesheets/scss/header.scss
+ 32
− 33
View file @ 66b71e30
/* --- header.css ----------------------------------------------------------- */
#layout_wrapper {
box-sizing: border-box;
padding-top: @bar-bottom-container-height;
padding-top: $bar-bottom-container-height;
}
#barBottomContainer {
background-color: @base-color;
border: 1px @brand-color-darker;
color: @contrast-content-white;
background-color: $base-color;
border: 1px $brand-color-darker;
color: $contrast-content-white;
border-bottom-style: solid;
height: @bar-bottom-container-height;
height: $bar-bottom-container-height;
width: 100%;
display: flex;
......@@ -18,27 +18,27 @@
transform: translate(0, 0) !important; // We need !important due to the horizontal scroll handler
position: fixed;
top: 0px;
top: 0;
z-index: 10000;
}
#barBottomLeft,
#barTopFont {
flex: 0 0 auto;
padding: 0px 15px;
padding: 0 15px;
z-index: 2;
}
// Fix header covering relevant other areas
// @see https://gitlab.studip.de/studip/studip/-/issues/1019
// $see https://gitlab.studip.de/studip/studip/-/issues/1019
html {
scroll-padding-top: calc(@bar-bottom-container-height + 1em);
scroll-padding-top: calc($bar-bottom-container-height + 1em);
}
#layout_footer,
#barBottomright {
> ul > li > a {
color: @contrast-content-white;
color: $contrast-content-white;
margin: 0 6px;
text-decoration: none;
&:hover {
......@@ -55,7 +55,7 @@ html {
justify-content: space-between;
list-style-type: none;
min-height: 30px;
padding: 0px;
padding: 0;
> li {
margin-left: 2px;
margin-right: 2px;
......@@ -72,10 +72,10 @@ html {
justify-content: space-between;
list-style-type: none;
height: 40px;
padding: 0px;
padding: 0;
> li {
margin: 2px;
padding: 0px 10px;
padding: 0 10px;
}
}
}
......@@ -91,10 +91,10 @@ html {
z-index: 1003;
.action-menu-icon {
border: 1px solid @dark-gray-color-40;
background-color: @dark-gray-color-5;
border: 1px solid $dark-gray-color-40;
background-color: $dark-gray-color-5;
height: 28px;
margin: 0;
margin: 0 32px 0 0;
position: relative;
width: 28px;
z-index: 1;
......@@ -105,8 +105,7 @@ html {
}
// Add arrow on the right
margin-right: 32px;
.icon('after', 'arr_1down', 'info_alt');
@include icon(after, arr_1down, info_alt);
&::after {
background-position: center;
......@@ -122,7 +121,7 @@ html {
z-index: 1002;
.action-menu-title{
margin: 0em 0 0.3em;
margin: 0 0 0.3em;
}
.action-menu-content {
......@@ -131,22 +130,22 @@ html {
right: 0;
/*padding: 4px 28px 4px 8px;*/
background: #fff;
box-shadow: 1px 1px 1px @dark-gray-color-60;
background: $white;
box-shadow: 1px 1px 1px $dark-gray-color-60;
text-align: left;
white-space: nowrap;
a:link,
a:visited {
color: @base-color;
color: $base-color;
}
a:hover,
a:active {
color: @active-color;
color: $active-color;
}
div {
color: #000;
color: $black;
}
}
}
......@@ -157,19 +156,19 @@ html {
#barTopFont {
flex: 1;
color: @white;
margin-left: 0px;
color: $white;
margin-left: 0;
z-index: 1002;
line-height: @bar-bottom-container-height;
line-height: $bar-bottom-container-height;
white-space: nowrap;
}
.studip-logo {
.hide-text();
@include hide-text();
background-repeat: no-repeat;
.retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo@2x.png', 130px, 92px);
background-image: none, url("@{image-path}/logos/studip4-logo.svg");
@include retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo$2x.png', 130px, 92px);
background-image: none, url("#{$image-path}/logos/studip4-logo.svg");
background-size: 130px 92px;
display: block;
......@@ -191,8 +190,8 @@ html {
#flex-header {
height: @header-height;
background-color: @dark-gray-color-5;
height: $header-height;
background-color: $dark-gray-color-5;
position: relative;
z-index: 3;
......@@ -205,7 +204,7 @@ html {
padding: 0;
text-indent: -150px;
@media not (prefers-reduced-motion) {
@media not prefers-reduced-motion {
transition: all 500ms;
}
}
......
resources/assets/stylesheets/scss/headings.scss 0 → 100644
+ 15
− 0
View file @ 66b71e30
h1.topic, h2.topic, h3.topic {
font-weight: bold;
line-height: 1em;
margin-bottom: 0.1em;
margin-top: 0.1em;
padding: 0.1em;
}
h1.topic {
font-size: 1.6em;
}
h2.topic, h3.topic {
font-size: 1.2em;
}
resources/assets/stylesheets/less/helpbar.less → resources/assets/stylesheets/scss/helpbar.scss
+ 32
− 25
View file @ 66b71e30
@helpbar-width: 250px;
$helpbar-width: 250px;
$border-width: 4px;
.helpbar-toggler {
width: 24px;
......@@ -14,24 +15,25 @@
position: relative;
top: 1px;
min-width: 32px;
/*width: 100%;*/
right: 12px;
float: right;
h2, h3 {
border-bottom: 0;
color: @white;
color: $white;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
h2 {
font-size: 1.2em;
}
h3 {
border-bottom: 1px dotted @base-color-80;
border-bottom: 1px dotted $base-color-80;
font-size: 1.1em;
margin-bottom: 2px;
padding-bottom: 2px;
......@@ -43,23 +45,20 @@
}
.helpbar {
background-color: @base-color;
background-color: $base-color;
padding: 8px;
box-sizing: border-box;
@border-width: 4px;
position: absolute;
right: -2px;
top: 0px;
top: 0;
width: @helpbar-width;
width: $helpbar-width;
z-index: 1000;
&::before {
border-bottom: 2px solid @base-color-80;
border-left: @border-width solid transparent;
border-right: @border-width solid transparent;
border-bottom: 2px solid $base-color-80;
border-left: $border-width solid transparent;
border-right: $border-width solid transparent;
content: '';
display: none;
position: absolute;
......@@ -79,55 +78,64 @@
}
.helpbar-widgets {
color: @white;
color: $white;
list-style: none;
padding: 0;
a {
vertical-align: text-bottom;
}
a:link, a:visited {
color: @white;
color: $white;
}
a:hover, a:active {
color: $white;
text-decoration: underline;
}
> li {
border-top: 1px solid @content-color;
padding: 3px 0px;
border-top: 1px solid $content-color;
padding: 3px 0;
margin: 0 .25em;
}
}
.help-tours {
list-style: none;
margin: 0;
padding: 0;
a {
.background-icon('play', 'info_alt');
@include background-icon(play, info_alt);
background-position: left 2px;
background-repeat: no-repeat;
display: block;
padding-left: 20px;
&.tour-paused {
.background-icon('pause', 'info_alt');
@include background-icon(pause, info_alt);
}
&.tour-completed {
.background-icon('accept', 'info_alt');
@include background-icon(accept, info_alt);
}
}
}
a.link-extern {
.icon('before', 'link-extern', 'info_alt');
@include icon(before, link-extern, info_alt);
}
a.link-intern {
.icon('before', 'link-intern', 'info_alt');
@include icon(before, link-intern, info_alt);
}
}
section.big-help-box {
background-color: #d4dbe5;
border: 1px solid #7e92b0;
background-color: $content-color-40;
border: 1px solid $content-color-80;
padding: 0.5em;
margin-top: 0.5em;
text-align: center;
......@@ -142,4 +150,3 @@ section.big-help-box {
flex-grow: 5;
}
}
resources/assets/stylesheets/less/ilias-interface.less → resources/assets/stylesheets/scss/ilias-interface.scss
+ 14
− 7
View file @ 66b71e30
/* --- Styles for ilias interface ------------------------------------------- */
//TODO: lessify
#ilias_module_details_window, #ilias_module_edit_window {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
#ilias_module_aside {
div {
&.ilias-module-icon {
img {
margin-left: 20%;
width: 60%;
max-height: 16em;
height: 100%;
}
}
}
width: calc(30% - 10px);
max-width: calc(30% - 10px);
}
#ilias_module_aside div.ilias-module-icon img {
margin-left: 20%;
width: 60%;
max-height: 16em;
height: 100%;
}
#ilias_module_preview {
width: calc(70% - 10px);
max-width: calc(70% - 10px);
......
resources/assets/stylesheets/scss/plugins.scss 0 → 100644
+ 56
− 0
View file @ 66b71e30
.plugin_image {
text-align: center;
width: 88px;
vertical-align: top;
}
.plugin_score {
white-space: nowrap;
}
.plugin_install {
text-align: center;
}
.plugin_description {
a.read_more_link {
display: none;
}
}
.plugin_description.short {
div {
max-height: 15em;
overflow: hidden;
position: relative;
p.read_more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4em;
margin: 0;
background-image: linear-gradient(to bottom, rgba(255,0,0,0), $white)
}
}
.read_more_link {
@include icon(before, add, clickable);
span {
vertical-align: middle;
padding-top: 3px;
}
}
a {
display: inline-block;
}
}
img.plugin_preview {
height: 60px;
width: 80px;
}
resources/assets/stylesheets/less/statusgroups.less → resources/assets/stylesheets/scss/statusgroups.scss
+ 9
− 9
View file @ 66b71e30
......@@ -19,8 +19,8 @@ section.course-statusgroups {
}
section {
border-left: 1px solid @content-color-20;
border-right: 1px solid @content-color-20;
border-left: 1px solid $content-color-20;
border-right: 1px solid $content-color-20;
table {
td.memberactions {
......@@ -29,7 +29,7 @@ section.course-statusgroups {
thead {
tr th {
background-color: @content-color-20;
background-color: $content-color-20;
}
}
......@@ -37,14 +37,14 @@ section.course-statusgroups {
tr td {
span.member-invisible {
font-style: italic;
color: @light-gray-color;
color: $light-gray-color;
}
}
}
tfoot {
tr td {
background-color: @content-color-20;
background-color: $content-color-20;
padding-left: 5px;
padding-right: 0;
}
......@@ -58,14 +58,14 @@ section.course-statusgroups {
}
&.draggable.open {
background-color: @white;
background-color: $white;
}
}
footer {
background-color: @content-color-20;
border-top: 1px solid @black;
background-color: $content-color-20;
border-top: 1px solid $black;
font-size: medium;
padding: 5px;
padding-left: 18px;
......@@ -79,7 +79,7 @@ section.course-statusgroups {
.sg-sortable-handle {
cursor: move;
background-image: url("@{image-path}/anfasser_24.png");
background-image: url("#{$image-path}/anfasser_24.png");
background-position: 3px center;
background-repeat: no-repeat;
width: 12px;
......
resources/assets/stylesheets/less/studip-overlay.less → resources/assets/stylesheets/scss/studip-overlay.scss
+ 24
− 20
View file @ 66b71e30
@mixin center()
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.modal-overlay {
.ui-widget-overlay;
@extend .ui-widget-overlay;
position: fixed;
left: 0;
......@@ -8,46 +16,42 @@
bottom: 0;
&-local {
background-color: fadeout(@light-gray-color, 50%);
background-color: mix($light-gray-color, $white, 50%);
position: absolute;
}
&-ajax {
// Fallback to gif for browsers that don't support svg. Fortunately,
// the support for multiple background images and svg covers the same
// browsers (except for some old android versions that we can neglect).
// Thus said, if the loading animation looks ugly - update your
// browser ffs!
background-image: url("@{image-path}/ajax_indicator_small.gif");
background-image: none, url("@{image-path}/ajax-indicator-white.svg");
background-image: url("#{$image-path}/ajax_indicator_small.gif");
background-image: none, url("#{$image-path}/ajax-indicator-white.svg");
background-position: center;
background-repeat: no-repeat;
}
&-ajax.modal-overlay-dark {
background-image: none, url("@{image-path}/ajax-indicator-black.svg");
background-image: none, url("#{$image-path}/ajax-indicator-black.svg");
}
// Progress
&.ui-front {
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
cursor: wait;
h1 {
.center();
@include center();
margin-bottom: 0;
padding-bottom: 100px;
color: #fff;
color: $white;
border-bottom: 0;
}
progress {
.center();
@include center();
margin-top: 45px;
width: 80%;
......@@ -59,15 +63,16 @@
border: none;
border-radius: 2px;
box-shadow: 0 0 3px @light-gray-color-20;
box-shadow: 0 0 3px $light-gray-color-20;
background-color: @light-gray-color;
background-color: $light-gray-color;
&::-moz-progress-bar, &::-webkit-progress-value {
background-color: @yellow-40;
background-color: $yellow-40;
transition: all 300ms;
}
}
ul.overlay-progress-log {
position: absolute;
top: 50%;
......@@ -78,10 +83,9 @@
margin: 60px 0 0;
padding: 0;
text-align: center;
color: white;
color: $white;
max-height: 120px;
overflow: hidden;
}
}
}
resources/assets/stylesheets/less/studip-selection.less → resources/assets/stylesheets/scss/studip-selection.scss
+ 17
− 9
View file @ 66b71e30
......@@ -6,6 +6,7 @@
> * {
flex: 1 0 100%;
}
> legend {
margin-bottom: 0 !important;
}
......@@ -16,31 +17,34 @@
margin: 0;
padding: 0;
}
li {
display: inline-block;
vertical-align: top;
}
li:not(.empty-placeholder) {
color: @base-color;
color: $base-color;
cursor: pointer;
margin: 1px 0;
padding-right: 0.5em;
}
li.empty-placeholder {
color: fadeout(@text-color, 30%);
color: mix($text-color, $white, 30%);
&:not(:only-child) {
display: none;
}
}
.studip-selection-selectable li.empty-placeholder {
color: @text-color;
color: $text-color;
padding-left: 20px;
position: relative;
.icon('before', 'info-circle', 'info');
@include icon(before, info-circle, info);
&::before {
position: absolute;
left: 0;
......@@ -54,10 +58,11 @@
}
.studip-selection-selected .studip-selection-label {
.icon('before', 'radiobutton-checked', 'clickable');
@include icon(before, radiobutton-checked, clickable);
}
.studip-selection-selectable .studip-selection-label {
.icon('before', 'radiobutton-unchecked', 'clickable');
@include icon(before, radiobutton-unchecked, clickable);
}
.studip-selection-image + .studip-selection-label {
......@@ -69,13 +74,14 @@
.studip-selection-selected li:hover {
.studip-selection-image,
.studip-selection-label::before {
.background-icon('remove-circle-full', 'clickable');
@include background-icon(remove-circle-full, clickable);
}
}
.studip-selection-selectable li:hover {
.studip-selection-image,
.studip-selection-label::before {
.background-icon('add-circle-full', 'clickable');
@include background-icon(add-circle-full, clickable);
}
}
......@@ -93,12 +99,14 @@
background-position: center;
background-repeat: no-repeat;
background-size: contain;
img {
opacity: 0;
}
}
.studip-selection-label {
color: @active-color;
color: $active-color;
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment