fix(style): refactoring scss

ouitoulia · Jul 5, 2023 · 3adc1d9 · 3adc1d9
1 parent dcb2e84
commit 3adc1d9
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 207 deletions.
diff --git a/src/scss/custom/_custom.scss b/src/scss/custom/_custom.scss
@@ -4,4 +4,15 @@
  */
 
 @import "../fonts";
-@import "scuola";
+
+h1 {@extend .fw-semibold;}
+.scuola {color: $bi-school;}
+.servizi {color: $bi-services;}
+.novita {color: $bi-news;}
+.didattica {color: $bi-learning;}
+
+@import "components/chip";
+
+@import "layout/header";
+
+@import "content-type/article";
diff --git a/src/scss/custom/_scuola.scss b/src/scss/custom/_scuola.scss
@@ -3,210 +3,4 @@
  */
 
 /****** General */
-h1 {
-  @extend .fw-semibold;
-}
 
-.scuola {
-  color: $bi-school;
-}
-
-.servizi {
-  color: $bi-services;
-}
-
-.novita {
-  color: $bi-news;
-}
-
-.didattica {
-  color: $bi-learning;
-}
-
-.chip {
-  &.chip-scuola {
-    background-color: transparent;
-    border-color: $bi-school;
-    color: $bi-school;
-
-    & > .chip-label {
-      color: $bi-school;
-    }
-
-    &:hover {
-      background-color: $bi-school;
-      border-color: $bi-school;
-
-      & > .chip-label {
-        color: $white;
-      }
-    }
-  }
-
-  &.chip-servizi {
-    background-color: transparent;
-    border-color: $bi-services;
-    color: $bi-services;
-
-    & > .chip-label {
-      color: $bi-services;
-    }
-
-    &:hover {
-      background-color: $bi-services;
-      border-color: $bi-services;
-
-      & > .chip-label {
-        color: $white;
-      }
-    }
-  }
-
-  &.chip-novita {
-    background-color: transparent;
-    border-color: $bi-news;
-    color: $bi-news;
-
-    & > .chip-label {
-      color: $bi-news;
-    }
-
-    &:hover {
-      background-color: $bi-news;
-      border-color: $bi-news;
-
-      & > .chip-label {
-        color: $white;
-      }
-    }
-  }
-
-  &.chip-didattica {
-    background-color: transparent;
-    border-color: $bi-learning;
-    color: $bi-learning;
-
-    & > .chip-label {
-      color: $bi-learning;
-    }
-
-    &:hover {
-      background-color: $bi-learning;
-      border-color: $bi-learning;
-
-      & > .chip-label {
-        color: $white;
-      }
-    }
-  }
-}
-
-
-/****** Header */
-.it-header-sticky {
-
-  .it-header-slim-wrapper .navbar-brand {
-    @extend .h6;
-  }
-
-  .it-header-navbar-wrapper.theme-light-desk .navbar .navbar-collapsable .navbar-nav {
-    li a.nav-link {
-      @extend .fw-semibold;
-    }
-
-    > li:nth-child(1) a.nav-link {
-      color: $bi-school;
-    }
-    > li:nth-child(2) a.nav-link {
-      color: $bi-services;
-    }
-    > li:nth-child(3) a.nav-link {
-      color: $bi-news;
-    }
-    > li:nth-child(4) a.nav-link {
-      color: $bi-learning;
-    }
-  }
-
-  .it-brand-wrapper {
-    .h1 {
-      display: block;
-      color: $dark;
-      font-weight: 400 !important;
-      font-size: 1.17rem;
-      line-height: 1.29;
-      letter-spacing: 0;
-      margin: 0 0 0 25px;
-      span {
-        display: block;
-        strong {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-
-  &.it-header-sticky.is-sticky {
-
-    .it-brand-wrapper {
-      h1 {
-        font-size: 0.779rem;
-        color: $dark;
-        margin: 4px 0 0 0;
-      }
-    }
-
-
-    .it-header-navbar-wrapper {
-      .menu-wrapper {
-        @extend .pt-3;
-        @extend .pb-3;
-
-        .it-brand-wrapper.cloned-element a {
-          text-decoration: none;
-
-          .icon {
-            fill: $dark;
-            width: 41px;
-            height: 41px;
-            margin-right: 16px;
-            flex-shrink: 0;
-            @extend .mt-2;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-
-
-/****** Content */
-.article-title {
-  position: relative;
-  z-index: 0;
-  height: 480px;
-  display: flex;
-  align-items: center;
-
-  .title-img {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    width: 50%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-color: #455b71;
-    background-size: cover;
-    background-attachment: scroll;
-  }
-}
-
-.article-footer {
-  font-size: .88rem;
-  border-top: 1px solid #e7eaed;
-  padding: 30px 0 0 0;
-  margin: 25px 0 0 0;
-}
diff --git a/src/scss/custom/components/_chip.scss b/src/scss/custom/components/_chip.scss
@@ -0,0 +1,77 @@
+.chip {
+  &.chip-scuola {
+    background-color: transparent;
+    border-color: $bi-school;
+    color: $bi-school;
+
+    & > .chip-label {
+      color: $bi-school;
+    }
+
+    &:hover {
+      background-color: $bi-school;
+      border-color: $bi-school;
+
+      & > .chip-label {
+        color: $white;
+      }
+    }
+  }
+
+  &.chip-servizi {
+    background-color: transparent;
+    border-color: $bi-services;
+    color: $bi-services;
+
+    & > .chip-label {
+      color: $bi-services;
+    }
+
+    &:hover {
+      background-color: $bi-services;
+      border-color: $bi-services;
+
+      & > .chip-label {
+        color: $white;
+      }
+    }
+  }
+
+  &.chip-novita {
+    background-color: transparent;
+    border-color: $bi-news;
+    color: $bi-news;
+
+    & > .chip-label {
+      color: $bi-news;
+    }
+
+    &:hover {
+      background-color: $bi-news;
+      border-color: $bi-news;
+
+      & > .chip-label {
+        color: $white;
+      }
+    }
+  }
+
+  &.chip-didattica {
+    background-color: transparent;
+    border-color: $bi-learning;
+    color: $bi-learning;
+
+    & > .chip-label {
+      color: $bi-learning;
+    }
+
+    &:hover {
+      background-color: $bi-learning;
+      border-color: $bi-learning;
+
+      & > .chip-label {
+        color: $white;
+      }
+    }
+  }
+}
diff --git a/src/scss/custom/content-type/_article.scss b/src/scss/custom/content-type/_article.scss
@@ -0,0 +1,27 @@
+.article-title {
+  position: relative;
+  z-index: 0;
+  height: 480px;
+  display: flex;
+  align-items: center;
+
+  .title-img {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-color: #455b71;
+    background-size: cover;
+    background-attachment: scroll;
+  }
+}
+
+.article-footer {
+  font-size: .88rem;
+  border-top: 1px solid #e7eaed;
+  padding: 30px 0 0 0;
+  margin: 25px 0 0 0;
+}