From e147b6f6b517821f11a550aaba1751b5db3d3fdd Mon Sep 17 00:00:00 2001 From: Christophe Chaudier <christophe@lydra.fr> Date: Mon, 23 May 2022 18:13:38 +0200 Subject: [PATCH] fix: indent --- common/common.scss | 67 +++++----- scss/boutons.scss | 44 +++---- scss/categories_box.scss | 268 +++++++++++++++++++-------------------- scss/footer.scss | 6 +- 4 files changed, 194 insertions(+), 191 deletions(-) diff --git a/common/common.scss b/common/common.scss index d8ef730..ba32bad 100644 --- a/common/common.scss +++ b/common/common.scss @@ -54,15 +54,41 @@ body { background-color: $header_primary; } +// HEADER // .d-header { height: 5em; box-shadow: none; } +.navigation-topics { + .container.list-container { + @include border-radius; + box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1); + padding: 2em; + border-top: 8px solid $primary-medium; + margin-top: .8em; + } +} + +.menu-panel .d-label { + color: $primary; +} + .alert.alert-info { border-radius: 10px; } +// MENU // + +.menu-panel .widget-link:hover, .menu-panel .widget-link:focus, +.menu-panel .categories-link:hover, .menu-panel .categories-link:focus { + background-color: var(--primary-medium-low); +} + +.user-menu .quick-access-panel li:hover { + background-color: var(--tertiary-low); +} + // Text // p { color: var(--primary); @@ -162,25 +188,6 @@ p { } } -.navigation-topics { - - .container.list-container { - @include border-radius; - box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1); - padding: 2em; - border-top: 8px solid $primary-medium; - margin-top: .8em; - } -} - -.menu-panel .d-label { - color: $primary; -} - -a { - color: var(--primary-medium-hover); -} - .open .grippie { background: var(--tertiary); } @@ -250,11 +257,6 @@ a { } } -.menu-panel .widget-link:hover, .menu-panel .widget-link:focus, -.menu-panel .categories-link:hover, .menu-panel .categories-link:focus { - background-color: var(--primary-medium-low); -} - .create { @include border-radius; } @@ -269,14 +271,6 @@ a { } } -.user-menu .quick-access-panel li:hover { - background-color: var(--tertiary-low); -} - -a:hover { - color: var(--tertiary-hover); -} - .image-upload-controls { border: 1px solid var(--secondary); .fa { @@ -298,6 +292,15 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header { padding: 0.5em; } +// LINKS // +a { + color: var(--primary-medium-hover); +} + +a:hover { + color: var(--tertiary-hover); +} + // Color showcase categories // .custom-homepage-columns .col { position: relative; diff --git a/scss/boutons.scss b/scss/boutons.scss index 5a4dc2a..91842e4 100644 --- a/scss/boutons.scss +++ b/scss/boutons.scss @@ -2,50 +2,50 @@ // Bouton & btn // .btn[href] { - color: var(--secondary); + color: var(--secondary); } .btn-default, .btn.btn-icon-text { - color: var(--secondary); - background: var(--primary-medium); - transition: all 0.3s linear; - @include border-radius; - text-transform: uppercase; + color: var(--secondary); + background: var(--primary-medium); + transition: all 0.3s linear; + @include border-radius; + text-transform: uppercase; - .fa { - color: var(--secondary); - } + .fa { + color: var(--secondary); + } } .btn-primary { - @include border-radius; + @include border-radius; } .discourse-no-touch .btn-danger:hover { - background: var(--danger-hover); + background: var(--danger-hover); } .discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon { - color: var(--tertiary-hover); + color: var(--tertiary-hover); } .discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover { - color: var(--secondary); - background: $header-background; - border-radius: 5px; - .fa { - color: var(--quarternary); - &:hover { - color: var(--quarternary); - } + color: var(--secondary); + background: $header-background; + border-radius: 5px; + .fa { + color: var(--quarternary); + &:hover { + color: var(--quarternary); } + } } /// button widget /// .btn-flat .icon { - color: $primary-low-mid; + color: $primary-low-mid; } .btn-flat .d-icon { - color: $primary-low-mid; + color: $primary-low-mid; } diff --git a/scss/categories_box.scss b/scss/categories_box.scss index 2b5dc97..7b71f77 100644 --- a/scss/categories_box.scss +++ b/scss/categories_box.scss @@ -1,65 +1,65 @@ // Boxes & categories // /// White background in boxes /// .category-boxes { - display: grid; - grid-gap: 2em; - grid-template-columns: 32% 32% 32%; - @include border-radius; - .category-box { - width: 100%; - margin: 0; - overflow: hidden; - border: none; - border-top: 8px solid; - + display: grid; + grid-gap: 2em; + grid-template-columns: 32% 32% 32%; + @include border-radius; + .category-box { + width: 100%; + margin: 0; + overflow: hidden; + border: none; + border-top: 8px solid; + @include border-radius; box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient; .category-box-inner { - border: none; - padding: 0; + border: none; + padding: 0; - .category-details { + .category-details { padding: 0.3em; - } + } } &:hover { - box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1); - transform: translateY(-2px); + box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1); + transform: translateY(-2px); } -} + } } /// category title /// .category-list .category-text-title { -align-items: baseline; -display: inline-flex; + align-items: baseline; + display: inline-flex; } @media (max-width: 960px) { -.category-boxes.with-logos.with-subcategories { + .category-boxes.with-logos.with-subcategories { grid-template-columns: 1fr; -} + } } .category-list-item.category { -@include border-radius; -border-right: 1px solid var(--primary-low) !important; -box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1); -margin: 0 0.59em 2em .59em; + @include border-radius; + border-right: 1px solid var(--primary-low) !important; + box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1); + margin: 0 0.59em 2em .59em; } #create-topic { -color: var(--secondary); -background: var(--primary-medium); -transition: all 0.3s linear; -@include border-radius; -text-transform: uppercase; -border: 2px solid var(--primary-medium); -.fa { + color: var(--secondary); + background: var(--primary-medium); + transition: all 0.3s linear; + @include border-radius; + text-transform: uppercase; + border: 2px solid var(--primary-medium); + .fa { color: var(--secondary); -} -&:hover { + } + &:hover { background: var(--primary-medium); color: var(--secondary); box-shadow: 4px 4px $tertiary; @@ -68,129 +68,129 @@ border: 2px solid var(--primary-medium); .fa { color: var(--secondary); } -} + } } // Categories boxes // .category-list tbody .category { - padding: 0; - border-width: 0; - display: block; - width: 100%; - height: 100%; - position: relative; + padding: 0; + border-width: 0; + display: block; + width: 100%; + height: 100%; + position: relative; } .category-list tbody td { -display: inline-block; -width: 250px; -height: 250px; -border-left-color: transparent; -background-color: $secondary; -border-radius: 10px; + display: inline-block; + width: 250px; + height: 250px; + border-left-color: transparent; + background-color: $secondary; + border-radius: 10px; } .category-list tbody .category { -border-left: 6px solid; -background-color: none; + border-left: 6px solid; + background-color: none; } /// here, 120px is about logo/icons size /// .category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img { ---height: 120px; -height: var(--height); -width: calc(var(--height) * var(--aspect-ratio)); -max-width: 100%; -border-color: none; -border-top: none; + --height: 120px; + height: var(--height); + width: calc(var(--height) * var(--aspect-ratio)); + max-width: 100%; + border-color: none; + border-top: none; } .logo.aspect-image img, .logo.aspect-image img { -padding-top: 20px; + padding-top: 20px; } .categories-and-latest { -flex-direction: column; + flex-direction: column; } .category-list { -thead, -.topics, -.subcategories, -.category-description { -display: none; -align-items: baseline; -} - -.category-list .category-text-title { -align-items: baseline; -display: inline-flex; -} - -tbody { -text-align: center; - -tr { - display: inline-block; - width: 250px; - height: 250px; - margin: 0.75em; - border-left-color: transparent; - border-radius: 10px; - border-bottom: none; -} - -.category { - padding: 0; - border-width: 0; - display: block; - width: 100%; - height: 100%; - position: relative; - - &:hover { - box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10); - transform: translateY(-2px) !important; + thead, + .topics, + .subcategories, + .category-description { + display: none; + align-items: baseline; + } + + .category-list .category-text-title { + align-items: baseline; + display: inline-flex; + } + + tbody { + text-align: center; + + tr { + display: inline-block; + width: 250px; + height: 250px; + margin: 0.75em; + border-left-color: transparent; + border-radius: 10px; + border-bottom: none; } - > div { - height: 100%; - } - - .category-logo { - float: unset; - margin: 0 auto; - } - - .category-name { - margin-top: 1.25em; - } - - h3 { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - a[href] { - flex-direction: column-reverse; - width: 250px; - } - } - - &:after { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - content: ""; - z-index: 1; - box-sizing: border-box; - pointer-events: none; - opacity: 0.35; - border-color: inherit; + .category { + padding: 0; + border-width: 0; + display: block; + width: 100%; + height: 100%; + position: relative; + + &:hover { + box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10); + transform: translateY(-2px) !important; + } + + > div { + height: 100%; + } + + .category-logo { + float: unset; + margin: 0 auto; + } + + .category-name { + margin-top: 1.25em; + } + + h3 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + a[href] { + flex-direction: column-reverse; + width: 250px; + } + } + + &:after { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + content: ""; + z-index: 1; + box-sizing: border-box; + pointer-events: none; + opacity: 0.35; + border-color: inherit; + } } -} -} + } } diff --git a/scss/footer.scss b/scss/footer.scss index 74c3b91..40b866d 100644 --- a/scss/footer.scss +++ b/scss/footer.scss @@ -1,12 +1,12 @@ // Footer background and Font // .custom-footer{ - background: var(--primary-medium) !important; + background: var(--primary-medium) !important; } .custom-footer > ul { - color: var(--secondary) !important; + color: var(--secondary) !important; } .custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb { - color: var(--secondary) !important; + color: var(--secondary) !important; } -- GitLab