From f536127ea1e99b6574e05749f310d1e84bc11e52 Mon Sep 17 00:00:00 2001
From: Julie Thezenas <julie@lydra.fr>
Date: Mon, 23 May 2022 15:41:39 +0200
Subject: [PATCH] feat: split the common file to reorder the style
---
common/common.scss | 346 +--------------------------------------
desktop/desktop.scss | 4 +
scss/banner.scss | 130 +++++++++++++++
scss/boutons.scss | 51 ++++++
scss/categories_box.scss | 196 ++++++++++++++++++++++
scss/footer.scss | 12 ++
scss/variables.scss | 2 +-
7 files changed, 398 insertions(+), 343 deletions(-)
create mode 100644 scss/banner.scss
create mode 100644 scss/boutons.scss
create mode 100644 scss/categories_box.scss
create mode 100644 scss/footer.scss
diff --git a/common/common.scss b/common/common.scss
index e933198..d8ef730 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,3 +1,7 @@
+@import 'banner';
+@import 'boutons';
+@import 'categories_box';
+@import 'footer';
@import 'variables';
input[type="text"],
@@ -84,150 +88,6 @@ p {
color: var(--primary-medium);
}
-// 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);
- }
- }
- }
- }
-}
-
-// 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;
-}
-
// PAGE home //
.custom-homepage-columns {
margin: 2em 0 2em 0;
@@ -321,79 +181,6 @@ a {
color: var(--primary-medium-hover);
}
-// 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);
- }
- }
-}
-
.open .grippie {
background: var(--tertiary);
}
@@ -511,131 +298,6 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
padding: 0.5em;
}
-// 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;
- }
- }
-}
-}
-//**end categories boxes**//
-
// Color showcase categories //
.custom-homepage-columns .col {
position: relative;
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 7a28005..d64de70 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -1,3 +1,7 @@
+@import 'banner';
+@import 'boutons';
+@import 'categories_box';
+@import 'footer';
@import 'variables';
body:not(.navigation-categories):not(.navigation-topics) #main-outlet {
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/boutons.scss b/scss/boutons.scss
new file mode 100644
index 0000000..5a4dc2a
--- /dev/null
+++ b/scss/boutons.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..2b5dc97
--- /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..74c3b91
--- /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/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