Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit f536127e authored by Julie Thezenas's avatar Julie Thezenas
Browse files

feat: split the common file to reorder the style

parent e05a7f3f
No related branches found
No related tags found
1 merge request!15Resolve "refactor: reorder SCSS"
Hide whitespace changes
Inline Side-by-side
common/common.scss
+ 4
− 342
View file @ f536127e
@import 'banner';
@import 'boutons';
@import 'categories_box';
@import 'footer';
@import 'variables'; @import 'variables';
input[type="text"], input[type="text"],
...@@ -84,150 +88,6 @@ p { ...@@ -84,150 +88,6 @@ p {
color: var(--primary-medium); 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 // // PAGE home //
.custom-homepage-columns { .custom-homepage-columns {
margin: 2em 0 2em 0; margin: 2em 0 2em 0;
...@@ -321,79 +181,6 @@ a { ...@@ -321,79 +181,6 @@ a {
color: var(--primary-medium-hover); 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 { .open .grippie {
background: var(--tertiary); background: var(--tertiary);
} }
...@@ -511,131 +298,6 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header { ...@@ -511,131 +298,6 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
padding: 0.5em; 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 // // Color showcase categories //
.custom-homepage-columns .col { .custom-homepage-columns .col {
position: relative; position: relative;
......
desktop/desktop.scss
+ 4
− 0
View file @ f536127e
@import 'banner';
@import 'boutons';
@import 'categories_box';
@import 'footer';
@import 'variables'; @import 'variables';
body:not(.navigation-categories):not(.navigation-topics) #main-outlet { body:not(.navigation-categories):not(.navigation-topics) #main-outlet {
......
scss/banner.scss 0 → 100644
+ 130
− 0
View file @ f536127e
// 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);
}
}
}
}
}
scss/boutons.scss 0 → 100644
+ 51
− 0
View file @ f536127e
@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;
}
scss/categories_box.scss 0 → 100644
+ 196
− 0
View file @ f536127e
// 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;
}
}
}
}
scss/footer.scss 0 → 100644
+ 12
− 0
View file @ f536127e
// 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;
}
scss/variables.scss
+ 1
− 1
View file @ f536127e
...@@ -17,4 +17,4 @@ $color-box-shadow-light: rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, ...@@ -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-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-middle: rgba(53, 53, 53, 0.1);
$color-box-shadow-pure-black: rgba(5, 5, 5, 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); $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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service