scss refactor and improvements begining

README.md

@@ -135,7 +135,7 @@ Check project's current **nodejs** and **npm** version from **[package.json](pac
 
 To be able to update home screen images, we are using open source project **[Scale by Flexiple](https://2.flexiple.com/scale/all-illustrations)**.
 
-Find our brand color at **[brand.scss](src/styles/theme/brand.scss)** and apply at the website and download images.
+Find our brand color at **[brand.scss](src/styles/brand/brand.scss)** and apply at the website and download images.
 
 <br/>
 

src/app/component/common/block/event-data/event-data.component.html

@@ -13,10 +13,10 @@ <h3 (click)="onClick()">{{title}}</h3>
       <div class="event-sub-header-title-user">
         <h4 *ngIf="user?.username">by <a
             [routerLink]="(isPublicPage ? URLS.u : URLS.user.root) + '/' + user.username"
-            class="inline-a">{{isEditable ? 'you' : ( user.username.length > 12 ? user.username.slice( 0, 12 ) + '...' : user.username )}}</a>
+            class="link">{{isEditable ? 'you' : ( user.username.length > 12 ? user.username.slice( 0, 12 ) + '...' : user.username )}}</a>
         </h4>
         <h4 *ngIf="link && showCalendar">
-          <app-ext-link [href]="link" [linkClass]="'inline-a'">
+          <app-ext-link [href]="link" [linkClass]="'link'">
             <i aria-hidden="true" [class]="'fas fa-link fa-fw'"></i>join meeting
           </app-ext-link>
         </h4>
@@ -92,9 +92,9 @@ <h4 *ngIf="date">{{timeItem}}</h4>
                  [brandLightColor]="true" [isSleekButton]="true" [text]="'In Progress'" [icon]="'hourglass'">
     </app-button1>
     <div (click)="onCategoryClick()" class="event-categories">
-      <p *ngIf="category && !subCategory && !leafCategory"><a class="inline-a">{{'#' + category.name}}</a></p>
-      <p *ngIf="subCategory && !leafCategory"><a class="inline-a">{{'#' + subCategory.name}}</a></p>
-      <p *ngIf="leafCategory"><a class="inline-a">{{'#' + leafCategory.name}}</a></p>
+      <p *ngIf="category && !subCategory && !leafCategory"><a class="link">{{'#' + category.name}}</a></p>
+      <p *ngIf="subCategory && !leafCategory"><a class="link">{{'#' + subCategory.name}}</a></p>
+      <p *ngIf="leafCategory"><a class="link">{{'#' + leafCategory.name}}</a></p>
     </div>
   </div>
   <div *ngIf="!isLastItem" class="event-bottom-wrapper">

src/app/component/common/block/label-data/label-data.component.html

@@ -2,7 +2,7 @@
      class="label-data-block flex-layout-column">
   <p>{{label}}</p>
   <p *ngIf="!isClickable">{{data}}</p>
-  <app-ext-link *ngIf="isClickable" [linkClass]="highlight ? 'inline-a' : ''"
+  <app-ext-link *ngIf="isClickable" [linkClass]="highlight ? 'link' : ''"
                 [href]="(data.startsWith('http://') || data.startsWith('https://')) ? data : 'http://' + data">
     <div body>
       {{data}}

src/app/component/common/block/label-with-icon-data/label-with-icon-data.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="brand" [class.no-margin]="noMargin" [class]="brand" class="icon-data-block flex-layout-row">
   <i aria-hidden="true" [class]="'fab fa-' + brand + ' fa-lg fa-fw'"></i>
-  <app-ext-link [target]="target" [linkClass]="'inline-a'" [href]="urlPrefix + '/' + data">
+  <app-ext-link [target]="target" [linkClass]="'link'" [href]="urlPrefix + '/' + data">
     <div body>
       {{ data }}
     </div>
@@ -11,16 +11,16 @@
      [ngClass]="solid" class="icon-data-block flex-layout-row">
   <i aria-hidden="true" [class]="'fas fa-' + solid + ' fa-lg fa-fw'"></i>
   <p *ngIf="!isClickable && !isClickableWithinApp && !urlData">{{data}}</p>
-  <app-ext-link *ngIf="isClickable" [linkClass]="highlight ? 'inline-a' : ''"
+  <app-ext-link *ngIf="isClickable" [linkClass]="highlight ? 'link' : ''"
                 [href]="(data.startsWith('http://') || data.startsWith('https://')) ? data : urlPrefix + data"
                 [target]="target">
   </app-ext-link>
-  <a *ngIf="isClickableWithinApp" [class.inline-a]="highlight"
+  <a *ngIf="isClickableWithinApp" [class.link]="highlight"
      [routerLink]="(data.startsWith('http://') || data.startsWith('https://')) ? data : urlPrefix + data"
      aria-label="url">
     {{data}}
   </a>
-  <a *ngIf="urlData && queryParams" [class.inline-a]="highlight"
+  <a *ngIf="urlData && queryParams" [class.link]="highlight"
      [queryParams]="queryParams" [routerLink]="urlData" aria-label="url">
     {{data}}
   </a>

src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../../node_modules/swiper/swiper-bundle.min.css";
+@use '../../../../../node_modules/swiper/swiper-bundle.min.css';
 
 app-swiper-wrapper {
   width: 65%;

src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html

@@ -1,4 +1,4 @@
-<nav class="top-nav rounded-box">
+<nav class="top-nav">
   <a class="brand"
      [routerLink]="URLS.root"
      (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">

src/app/component/popup/cookie-popup/cookie-popup.component.html

@@ -1,7 +1,6 @@
 <div *ngIf="!accepted" class="cookie-popup">
-  <h5 class="cookie-message">By continuing to use this site you agree to our <a class="inline-a"
-                                                                                routerLink="{{URLS.cookiePolicy}}"
-                                                                                target="_blank" rel=noopener>Cookie Policy</a>.
+  <h5 class="cookie-message">By continuing to use this site you agree to our
+    <a class="link" routerLink="{{URLS.cookiePolicy}}" target="_blank" rel=noopener>Cookie Policy</a>.
   </h5>
   <div (click)="setAccepted()" class="accept">
     <h5>Done</h5>

src/app/page/dashboard-layout/dashboard/dashboard.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../styles/theme/themes";
-
 .interest-list app-label-with-icon-data {
   margin: 5px;
   min-width: -webkit-fit-content;

src/app/page/dashboard-layout/my-profile/my-profile.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../styles/theme/themes";
-
 .interest-list app-label-with-icon-data {
   margin: 5px;
   min-width: -webkit-fit-content;

src/app/page/dashboard-layout/public-profile/public-profile.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../styles/theme/themes";
-
 .interest-list app-label-with-icon-data {
   margin: 5px;
   min-width: -webkit-fit-content;

src/app/page/landing-layout/login/login.component.html

@@ -34,12 +34,12 @@
           <app-button1 [brandColor]="true" [text]="'LOG IN'"></app-button1>
           <p>
             Don't have an account?
-            <a class="inline-a" [routerLink]="URLS.signup">
+            <a class="link" [routerLink]="URLS.signup">
               Sign Up
             </a>
           </p>
           <p>
-            <a class="inline-a" [routerLink]="URLS.forgetPassword">
+            <a class="link" [routerLink]="URLS.forgetPassword">
               Forget password?
             </a>
           </p>

src/app/page/landing-layout/sign-up/sign-up.component.html

@@ -35,16 +35,16 @@
           <app-button1 [brandColor]="true" [text]="'CONTINUE'"></app-button1>
           <p>
             <small class="dim">By signing up, you agree
-              <a class="inline-a" routerLink="{{URLS.terms}}" target="_blank" rel=noopener>Terms of Use</a>,
-              <a class="inline-a" routerLink="{{URLS.privacyPolicy}}" target="_blank" rel=noopener>Privacy Policy</a>
+              <a class="link" routerLink="{{URLS.terms}}" target="_blank" rel=noopener>Terms of Use</a>,
+              <a class="link" routerLink="{{URLS.privacyPolicy}}" target="_blank" rel=noopener>Privacy Policy</a>
               and
-              <a class="inline-a" routerLink="{{URLS.cookiePolicy}}" target="_blank" rel=noopener>Cookie Policy</a>
+              <a class="link" routerLink="{{URLS.cookiePolicy}}" target="_blank" rel=noopener>Cookie Policy</a>
             </small>
           </p>
           <hr class="dim"/>
           <p>
             Already have an account?
-            <a class="inline-a" [routerLink]="URLS.login">
+            <a class="link" [routerLink]="URLS.login">
               Login
             </a>
           </p>

src/app/page/splash-layout/external/external.component.html

@@ -11,7 +11,7 @@
     </p>
     <br />
     <p>
-      {{ 'Will be redirected to: ' }}<br/><a class="inline-a green-theme" (click)="redirect()">{{ href }}</a>
+      {{ 'Will be redirected to: ' }}<br/><a class="link green-theme" (click)="redirect()">{{ href }}</a>
     </p>
   </div>
   <div class="external-component-button-wrapper">

src/index.html

@@ -148,4 +148,5 @@ <h2>Open Template Hub</h2>
 
 
 
+
 </body></html>

src/styles/theme/brand.scss → src/styles/brand/brand.scss

@@ -1,14 +1,3 @@
-@import "red-theme/red-theme";
-@import "yellow-theme/yellow-theme";
-@import "blue-theme/blue-theme";
-
-// This is the class to change default theme
-@import "green-theme/green-theme";
-
-.default-theme {
-  @extend .green-theme;
-}
-
 .brand-logo-wrapper {
   display: inline-flex;
   flex-direction: column;

src/styles/styles.common.scss

@@ -1,71 +1,76 @@
-@import "theme/themes";
-@import "other/input";
-@import "other/page";
-@import "other/alert";
-@import "other/loading";
-@import "social/social";
-@import "other/profile";
-@import "other/animation";
-@import "other/util";
-@import "other/toastr";
-@import "other/ribbon";
-@import "other/rate";
-@import "../../node_modules/@fortawesome/fontawesome-free/css/all.css";
-
-* {
-  margin: 0;
+@mixin no-padding-no-margin {
   padding: 0;
+  margin: 0;
 }
 
-*:focus {
-  outline: 0;
-}
-
-html, body {
+@mixin min-full-screen {
   min-height: 100vh;
-  height: auto;
+  min-width: 100vw;
 }
 
-body {
-  margin: 0;
-  overflow: auto;
-  font-size: 17px;
+@mixin default-fonts {
+  font-family: Roboto, sans-serif;
 }
 
-body, textarea, input {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+@mixin dim {
+  color: var(--lighter-contrast);
+  border-color: var(--lighter-contrast);
 }
 
-body::-webkit-scrollbar {
-  width: 0.25em;
+@mixin shine {
+  color: var(--darker);
+  border-color: var(--darker);
 }
 
-body::-webkit-scrollbar-track:vertical {
-  background: var(--lighter-contrast);
+* {
+  @include no-padding-no-margin;
+
+  &:focus {
+    outline: 0;
+  }
 }
 
-body::-webkit-scrollbar-thumb:vertical {
-  background: var(--darker-contrast);
+html, body {
+  @include no-padding-no-margin;
+  @include min-full-screen;
+  @include default-fonts;
 }
 
-body::-webkit-scrollbar:horizontal {
-  display: none;
+body {
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 0.25em;
+  }
+
+  &::-webkit-scrollbar-track:vertical {
+    background: var(--darker-contrast);
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    background: var(--contrast);
+  }
+
+  &::-webkit-scrollbar:horizontal {
+    display: none;
+  }
 }
 
 div * {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE 10+ */
-  ::-webkit-scrollbar-track {
+
+  &::-webkit-scrollbar-track {
     -webkit-box-shadow: none !important;
     background-color: transparent;
   }
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 0;
     background-color: transparent;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
 }
@@ -74,53 +79,56 @@ p, a, h1, h2, h3, h4, h5, h6, label, ul, li {
   color: var(--color);
   font-weight: 300;
   word-break: break-word;
-}
-
-a {
   text-decoration: none;
 }
 
 hr {
-  border: 1px solid var(--lighter-contrast);
+  border: {
+    width: 1px;
+    style: solid;
+    color: var(--lighter-contrast);
+  }
 }
 
 .dim {
-  color: var(--lighter-contrast);
-  border-color: var(--lighter-contrast);
-}
-
-.dim p, .dim a, .dim h1, .dim h2, .dim h3, .dim h4, .dim h5, .dim h6, .dim label, .dim ul, .dim li {
-  color: var(--lighter-contrast);
-  border-color: var(--lighter-contrast);
+  p, a, h1, h2, h3, h4, h5, h6, label, ul, li {
+    @include dim;
+  }
 }
 
 .shine {
-  color: var(--darker);
+  p, a, h1, h2, h3, h4, h5, h6, label, ul, li {
+    @include shine;
+  }
 }
 
-.inline-a, a.inline-a {
-  font-weight: normal;
-  color: var(--brand-color);
+a {
   cursor: pointer;
-}
 
-@media (prefers-color-scheme: dark) {
-  body::-webkit-scrollbar-track:vertical {
-    background: var(--darker-contrast);
-  }
-
-  body::-webkit-scrollbar-thumb:vertical {
-    background: var(--lighter-contrast);
+  &:hover {
+    color: var(--darker);
   }
 }
 
-@media (hover: hover) {
+a.link {
 
-  a:hover {
-    color: var(--darker);
-  }
+  color: var(--brand-color-lighter-2);
+  font-weight: normal;
 
-  .inline-a:hover, a.inline-a:hover {
+  &:hover {
     color: var(--brand-color);
   }
 }
+
+
+@media (prefers-color-scheme: dark) {
+  body {
+    &::-webkit-scrollbar-track:vertical {
+      background: var(--darker-contrast);
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+      background: var(--contrast);
+    }
+  }
+}

src/styles/styles.scss

@@ -1,3 +1,17 @@
-@import "styles.common";
-@import "theme/brand";
+@use 'styles.common';
 
+@use 'alert/alert';
+@use 'animation/animation';
+@use 'brand/brand';
+@use 'input/input';
+@use 'loading/loading';
+@use 'page/page';
+@use 'profile/profile';
+@use 'rate/rate';
+@use 'ribbon/ribbon';
+@use 'social/social';
+@use 'toastr/toastr';
+@use 'util/util';
+@use '../../node_modules/@fortawesome/fontawesome-free/css/all.css';
+
+@use 'theme/theme';