From e73d312dfcdabb7b0a6e40185a31142a11c2fd10 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 29 Aug 2024 11:52:05 +0200 Subject: [PATCH] Fix sass deprecation --- app/assets/stylesheets/components.css.scss | 6 +-- .../components/action-card.css.scss | 43 +++++++++---------- .../stylesheets/components/btn.css.scss | 12 +++--- .../components/code_listing.css.scss | 4 +- .../stylesheets/components/stepper.css.scss | 7 ++- app/assets/stylesheets/layout/navbar.css.scss | 15 +++---- .../stylesheets/models/questions.css.scss | 4 +- 7 files changed, 44 insertions(+), 47 deletions(-) diff --git a/app/assets/stylesheets/components.css.scss b/app/assets/stylesheets/components.css.scss index 83e83dd225..0d744bc19f 100644 --- a/app/assets/stylesheets/components.css.scss +++ b/app/assets/stylesheets/components.css.scss @@ -84,12 +84,12 @@ } .col-form-label { + text-align: right; + font-weight: bold; + @include media-breakpoint-down(sm) { text-align: left; } - - text-align: right; - font-weight: bold; } h1 small, diff --git a/app/assets/stylesheets/components/action-card.css.scss b/app/assets/stylesheets/components/action-card.css.scss index a2659c8dbb..2fd28033cf 100644 --- a/app/assets/stylesheets/components/action-card.css.scss +++ b/app/assets/stylesheets/components/action-card.css.scss @@ -7,25 +7,8 @@ border-color 145ms ease, background-color 145ms ease; box-shadow: none; - - .card-subtitle { - margin-bottom: 0.125rem; - height: 48px; - - h4 { - width: 100%; - line-height: 20px; - min-height: 24px; - - small { - font-size: 65%; - } - } - - .card-title-icon { - margin-right: 1rem; - } - } + background: var(--clickable-card-color); + color: var(--on-clickable-card-color); --clickable-card-color: var(--d-primary); --on-clickable-card-color: var(--d-on-primary); @@ -40,9 +23,6 @@ --on-clickable-card-color: var(--d-on-success); } - background: var(--clickable-card-color); - color: var(--on-clickable-card-color); - small { color: var(--on-clickable-card-color); } @@ -72,4 +52,23 @@ opacity: 0.38; pointer-events: none; } + + .card-subtitle { + margin-bottom: 0.125rem; + height: 48px; + + h4 { + width: 100%; + line-height: 20px; + min-height: 24px; + + small { + font-size: 65%; + } + } + + .card-title-icon { + margin-right: 1rem; + } + } } diff --git a/app/assets/stylesheets/components/btn.css.scss b/app/assets/stylesheets/components/btn.css.scss index d6f211550e..850cfce89a 100644 --- a/app/assets/stylesheets/components/btn.css.scss +++ b/app/assets/stylesheets/components/btn.css.scss @@ -12,6 +12,12 @@ border-color 145ms ease, background-color 145ms ease; + // define the default button colors + // makes it easier to combine with other classes such as d-btn-danger, d-btn-success, etc. + --d-btn-color: var(--d-primary); + --d-btn-color-rgb: var(--d-primary-rgb); + --d-on-btn-color: var(--d-on-primary); + &.with-icon { padding-left: 16px; padding-right: 24px; @@ -50,12 +56,6 @@ pointer-events: auto; cursor: default; } - - // define the default button colors - // makes it easier to combine with other classes such as d-btn-danger, d-btn-success, etc. - --d-btn-color: var(--d-primary); - --d-btn-color-rgb: var(--d-primary-rgb); - --d-on-btn-color: var(--d-on-primary); } .btn.btn-filled, diff --git a/app/assets/stylesheets/components/code_listing.css.scss b/app/assets/stylesheets/components/code_listing.css.scss index aa63b57535..effd2e5fd7 100644 --- a/app/assets/stylesheets/components/code_listing.css.scss +++ b/app/assets/stylesheets/components/code_listing.css.scss @@ -373,11 +373,11 @@ /* stylelint-enable selector-class-pattern */ .annotation-meta-icon { + margin-left: 4px; + &::before { vertical-align: bottom; } - - margin-left: 4px; } .annotation-warning::before { diff --git a/app/assets/stylesheets/components/stepper.css.scss b/app/assets/stylesheets/components/stepper.css.scss index 321cf7b357..1cdd531b4f 100644 --- a/app/assets/stylesheets/components/stepper.css.scss +++ b/app/assets/stylesheets/components/stepper.css.scss @@ -51,15 +51,14 @@ @include shadow-z2; background-color: var(--d-surface); + border: none; + border-radius: var(--d-border-radius-base); + padding: 0; @include media-breakpoint-up(sm) { margin-left: 45px; } - border: none; - border-radius: var(--d-border-radius-base); - padding: 0; - &.panel-body-transparent { background-color: transparent; diff --git a/app/assets/stylesheets/layout/navbar.css.scss b/app/assets/stylesheets/layout/navbar.css.scss index e0b9fde958..4cf36955a2 100644 --- a/app/assets/stylesheets/layout/navbar.css.scss +++ b/app/assets/stylesheets/layout/navbar.css.scss @@ -305,10 +305,6 @@ } .dodona-navbar-toggle { - @include media-breakpoint-up(md) { - display: none; - } - position: absolute; top: 0; right: 10px; @@ -316,6 +312,10 @@ background: none; color: var(--d-on-primary); + @include media-breakpoint-up(md) { + display: none; + } + i { line-height: var(--d-navbar-height); } @@ -363,19 +363,18 @@ } .dropdown-title { + display: inline-block; + transform: translateY(-0.5em); + @include media-breakpoint-up(md) { @include media-breakpoint-down(lg) { display: none; } } - display: inline-block; - @include media-breakpoint-down(md) { padding-left: 25px; } - - transform: translateY(-0.5em); } } diff --git a/app/assets/stylesheets/models/questions.css.scss b/app/assets/stylesheets/models/questions.css.scss index 84a5522385..5648fa0ae9 100644 --- a/app/assets/stylesheets/models/questions.css.scss +++ b/app/assets/stylesheets/models/questions.css.scss @@ -1,4 +1,6 @@ .question-table { + table-layout: fixed; + col.actions { width: 50px; } @@ -22,8 +24,6 @@ background-color: var(--d-table-hover-bg); } } - - table-layout: fixed; } @include media-breakpoint-up(md) {