From 14f40a6b020c01fe92efd86074a910aea41ae127 Mon Sep 17 00:00:00 2001
From: Julie Thezenas <julie@lydra.fr>
Date: Tue, 24 May 2022 13:54:32 +0000
Subject: [PATCH] refactor: reorder scss files
---
common/common.scss | 467 +++------------------------------------
scss/banner.scss | 130 +++++++++++
scss/buttons.scss | 51 +++++
scss/categories_box.scss | 196 ++++++++++++++++
scss/footer.scss | 12 +
scss/header.scss | 34 +++
scss/variables.scss | 2 +-
7 files changed, 451 insertions(+), 441 deletions(-)
create mode 100644 scss/banner.scss
create mode 100644 scss/buttons.scss
create mode 100644 scss/categories_box.scss
create mode 100644 scss/footer.scss
create mode 100644 scss/header.scss
diff --git a/common/common.scss b/common/common.scss
index da609d9..80972ad 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'banner', 'buttons', 'categories_box', 'footer', 'header', 'variables';
input[type="text"],
input[type="password"],
@@ -46,16 +46,11 @@ input[type="color"]:focus,
--banner-secondary-text: var(--primary-medium);
}
-.d-header {
- height: 5em;
- box-shadow: none;
-}
-
-.alert.alert-info {
- border-radius: 10px;
+body {
+ background-color: $header_primary;
}
-///////// HOME //////////
+// PAGE home //
.custom-homepage-columns {
margin: 2em 0 2em 0;
.col {
@@ -90,7 +85,7 @@ input[type="color"]:focus,
}
}
-/// Text ///
+// TEXT //
p {
color: var(--primary);
}
@@ -115,11 +110,12 @@ p {
color: var(--primary-medium);
}
-/// text box ///
+/// Text box ///
.topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification) {
color: $primary;
}
+/// Searches elements ///
.navigation-categories .search-banner {
@include border-radius;
height: 350px;
@@ -129,17 +125,6 @@ p {
max-width: 1110px;
}
-.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;
- }
-}
-
.search-widget .search-context {
padding: 10px;
background-color: var(--primary-medium-medium);
@@ -150,83 +135,17 @@ p {
color: $header_background;
}
-.menu-panel .d-label {
- color: $primary;
-}
-
-a {
- color: var(--primary-medium-hover);
-}
-
-// 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;
-
- @include border-radius;
- box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
-
- .category-box-inner {
- border: none;
- padding: 0;
-
- .category-details {
- padding: 0.3em;
- }
- }
- &:hover {
- 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;
-}
-
-@media (max-width: 960px) {
- .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;
+.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
+ color: $header_background;
}
-#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 {
+.search-container .search-advanced-sidebar {
+ .search-advanced-title {
+ background: var(--tertiary);
color: var(--secondary);
}
- &:hover {
- background: var(--primary-medium);
- color: var(--secondary);
- box-shadow: 4px 4px $tertiary;
- transition: all 0.3s linear;
- @include border-radius;
- .fa {
- color: var(--secondary);
- }
+ .search-advanced-filters {
+ border: 1px dashed var(--tertiary);
}
}
@@ -292,51 +211,13 @@ a {
color: currentColor;
}
&:hover {
- color: var(--secondary);
+ color: var(--secondary-hover);
background: var(--tertiary-hover);
border: 1px solid var(--tertiary-hover);
border-radius: 5px;
}
}
-.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
- 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(--quaternary);
- }
-}
-
-.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);
-}
-
-.btn-default, .btn.btn-icon-text {
- color: var(--secondary);
- background: var(--primary-medium);
- transition: all 0.3s linear;
- @include border-radius;
- text-transform: uppercase;
-
- .fa {
- color: var(--secondary);
- }
-}
-
-.btn-primary {
- @include border-radius;
-}
-
-.discourse-no-touch .btn-danger:hover {
- background: var(--danger-hover);
-}
-
.create {
@include border-radius;
}
@@ -351,14 +232,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 {
@@ -376,300 +249,32 @@ a:hover {
}
}
-.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
- color: $header_background;
-}
-
-.btn[href] {
- color: var(--secondary);
-}
-
summary.select-kit-header.single-select-header.dropdown-select-box-header {
padding: 0.5em;
}
-.search-container .search-advanced-sidebar {
- .search-advanced-title {
- background: var(--tertiary);
- color: var(--secondary);
- }
- .search-advanced-filters {
- border: 1px dashed var(--tertiary);
- }
-}
-
-.banner-box {
- width: $large-width;
- max-width: calc(100% - 16px);
- margin: 0 auto;
- margin-top: 20px;
- color: $primary_text_color;
- position: relative;
- background-image: url($banner_background_image);
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- background-color: $background_color;
-
- .button-container {
- margin-right: 5px;
- position: absolute;
- z-index: z("base") + 1;
- right: 0;
- top: 2px;
-
- .close,
- .toggle {
- float: right;
- padding: 5px;
- border: none;
- color: $tertiary;
- background: transparent;
- font-size: 1.5157em;
- cursor: pointer;
-
- svg {
- color: $tertiary;
- }
- .d-button-label {
- font-size: 1em;
- color: $header-background;
- }
-
- &:hover {
- svg {
- color: $primary;
- }
- .d-button-label {
- font-size: 1em;
- color: $header-background !important;
- }
- }
-
- .svg-icon.hidden {
- display: none;
- }
- }
- }
-
- h1,
- h2,
- h3 {
- text-align: center;
- color: $secondary_text_color;
- }
-
- a {
- color: $link_text_color;
- }
-
- .section-header {
- padding-bottom: 20px;
-
- .x-title {
- padding: 25px 65px;
- margin: 0;
- }
-
- .colored-line {
- margin: auto;
- width: 165px;
- height: 1px;
- background: $secondary_text_color;
- }
-
- .description p {
- margin: 0;
- padding: 15px;
- text-align: center;
- }
- }
-
- .row {
- display: flex;
- justify-content: center;
-
- .single-box {
- float: left;
- position: relative;
- min-height: 1px;
- padding: 0px 15px 30px;
- text-align: center;
-
- .icon {
- font-size: 70px;
- color: $secondary_text_color;
-
- .responsive-img {
- vertical-align: -0.125em;
- border-style: none;
- border-width: 1px;
- height: 220px;
- }
- }
-
- .banner-list {
- display: flex;
- justify-content: center;
- ul {
- text-align: left;
- margin: 0;
- }
-
- li {
- color: var(--primary);
- }
- }
- }
- }
+// LINKS //
+a {
+ color: var(--primary-medium-hover);
}
-body {
- background-color: $header_primary;
+a:hover {
+ color: var(--tertiary-hover);
}
-//Categories boxes
-.category-list tbody .category {
- padding: 0;
- border-width: 0;
- display: block;
- width: 100%;
- height: 100%;
+// Color showcase categories //
+.custom-homepage-columns .col {
position: relative;
-}
-
-.category-list tbody td {
- 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;
-}
-
-///here, 120px is aboute 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;
-}
-
-.logo.aspect-image img, .logo.aspect-image img {
-padding-top: 20px;
-}
-
-.categories-and-latest {
-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;
- }
-
- > 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;
- }
- }
-}
-}
-
-//fin categories boxes
-
-.banner-box .row .single-box .icon .responsive-img {
- height: 220px !important;
-}
-
-///// footer background and font //////
-.custom-footer{
- background: var(--primary-medium) !important;
-}
-
-.custom-footer > ul {
- color: var(--secondary) !important;
+.admin-report .header .breadcrumb .report .info {
+ color: $primary-medium;
}
-.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
- color: var(--secondary) !important;
+// PAGE Top & Latest //
+.navigation-topics .container.list-container{
+ background-color: $secondary;
}
.custom-footer .footer-section-link-wrapper a:hover, .custom-footer .third-box .small-link:hover {
@@ -682,21 +287,3 @@ tbody {
position: relative;
background-color: $secondary;
}
-
-///// button widget ///////
-.btn-flat .icon {
- color: $primary-low-mid;
-}
-
-.btn-flat .d-icon {
- color: $primary-low-mid;
-}
-
-.admin-report .header .breadcrumb .report .info {
- color: $primary-medium;
-}
-
-/// Page Top & Latest ///
-.navigation-topics .container.list-container{
- background-color: $secondary;
-}
diff --git a/scss/banner.scss b/scss/banner.scss
new file mode 100644
index 0000000..529c1a7
--- /dev/null
+++ b/scss/banner.scss
@@ -0,0 +1,130 @@
+// Banner //
+.banner-box .row .single-box .icon .responsive-img {
+ height: 220px !important;
+}
+
+.banner-box {
+ width: $large-width;
+ max-width: calc(100% - 16px);
+ margin: 0 auto;
+ margin-top: 20px;
+ color: $primary_text_color;
+ position: relative;
+ background-image: url($banner_background_image);
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: $background_color;
+
+ .button-container {
+ margin-right: 5px;
+ position: absolute;
+ z-index: z("base") + 1;
+ right: 0;
+ top: 2px;
+
+ .close,
+ .toggle {
+ float: right;
+ padding: 5px;
+ border: none;
+ color: $tertiary;
+ background: transparent;
+ font-size: 1.5157em;
+ cursor: pointer;
+
+ svg {
+ color: $tertiary;
+ }
+ .d-button-label {
+ font-size: 1em;
+ color: $header-background;
+ }
+
+ &:hover {
+ svg {
+ color: $primary;
+ }
+ .d-button-label {
+ font-size: 1em;
+ color: $header-background !important;
+ }
+ }
+
+ .svg-icon.hidden {
+ display: none;
+ }
+ }
+ }
+
+ h1,
+ h2,
+ h3 {
+ text-align: center;
+ color: $secondary_text_color;
+ }
+
+ a {
+ color: $link_text_color;
+ }
+
+ .section-header {
+ padding-bottom: 20px;
+
+ .x-title {
+ padding: 25px 65px;
+ margin: 0;
+ }
+
+ .colored-line {
+ margin: auto;
+ width: 165px;
+ height: 1px;
+ background: $secondary_text_color;
+ }
+
+ .description p {
+ margin: 0;
+ padding: 15px;
+ text-align: center;
+ }
+ }
+
+ .row {
+ display: flex;
+ justify-content: center;
+
+ .single-box {
+ float: left;
+ position: relative;
+ min-height: 1px;
+ padding: 0px 15px 30px;
+ text-align: center;
+
+ .icon {
+ font-size: 70px;
+ color: $secondary_text_color;
+
+ .responsive-img {
+ vertical-align: -0.125em;
+ border-style: none;
+ border-width: 1px;
+ height: 220px;
+ }
+ }
+
+ .banner-list {
+ display: flex;
+ justify-content: center;
+ ul {
+ text-align: left;
+ margin: 0;
+ }
+
+ li {
+ color: var(--primary);
+ }
+ }
+ }
+ }
+}
diff --git a/scss/buttons.scss b/scss/buttons.scss
new file mode 100644
index 0000000..91842e4
--- /dev/null
+++ b/scss/buttons.scss
@@ -0,0 +1,51 @@
+@import 'variables';
+
+// Bouton & btn //
+.btn[href] {
+ 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;
+
+ .fa {
+ color: var(--secondary);
+ }
+}
+
+.btn-primary {
+ @include border-radius;
+}
+
+.discourse-no-touch .btn-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);
+}
+
+.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);
+ }
+ }
+}
+
+/// button widget ///
+.btn-flat .icon {
+ color: $primary-low-mid;
+}
+
+.btn-flat .d-icon {
+ color: $primary-low-mid;
+}
diff --git a/scss/categories_box.scss b/scss/categories_box.scss
new file mode 100644
index 0000000..7b71f77
--- /dev/null
+++ b/scss/categories_box.scss
@@ -0,0 +1,196 @@
+// 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;
+
+ @include border-radius;
+ box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
+
+ .category-box-inner {
+ border: none;
+ padding: 0;
+
+ .category-details {
+ padding: 0.3em;
+ }
+ }
+ &:hover {
+ 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;
+}
+
+@media (max-width: 960px) {
+ .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;
+}
+
+#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);
+ }
+ &:hover {
+ background: var(--primary-medium);
+ color: var(--secondary);
+ box-shadow: 4px 4px $tertiary;
+ transition: all 0.3s linear;
+ @include border-radius;
+ .fa {
+ color: var(--secondary);
+ }
+ }
+}
+
+// Categories boxes //
+.category-list tbody .category {
+ 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;
+}
+
+.category-list tbody .category {
+ 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;
+}
+
+.logo.aspect-image img, .logo.aspect-image img {
+ padding-top: 20px;
+}
+
+.categories-and-latest {
+ 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;
+ }
+
+ > 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
new file mode 100644
index 0000000..40b866d
--- /dev/null
+++ b/scss/footer.scss
@@ -0,0 +1,12 @@
+// Footer background and Font //
+.custom-footer{
+ background: var(--primary-medium) !important;
+}
+
+.custom-footer > ul {
+ color: var(--secondary) !important;
+}
+
+.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
+ color: var(--secondary) !important;
+}
diff --git a/scss/header.scss b/scss/header.scss
new file mode 100644
index 0000000..7b7ba90
--- /dev/null
+++ b/scss/header.scss
@@ -0,0 +1,34 @@
+// 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);
+}
diff --git a/scss/variables.scss b/scss/variables.scss
index aada664..2dba825 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -17,4 +17,4 @@ $color-box-shadow-light: rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197,
$color-box-shadow-light-coffee: rgba(114, 114, 114, 0.1), 0 12px 90px 0 rgba(148, 148, 148, 0.1);
$color-box-shadow-middle: rgba(53, 53, 53, 0.1);
$color-box-shadow-pure-black: rgba(5, 5, 5, 0.1);
-$color-box-shadow-154-134:rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
\ No newline at end of file
+$color-box-shadow-154-134:rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
--
GitLab