break down global.scss into smaller files

+ rename css folder to scss

src/assets/scss/BottomBar/BottomBar.scss

@@ -0,0 +1,65 @@
+.b-bar {
+  height: 100%;
+  padding: $small;
+
+  .grid {
+    background-color: $primary;
+    height: 100%;
+    padding-right: $small;
+
+    @include phone-only {
+      grid-template-columns: 1fr 9.2rem;
+    }
+
+    .controlsx {
+      width: 100%;
+      overflow: hidden;
+      display: grid;
+      grid-template-columns: 12rem 1fr 12rem;
+      align-items: center;
+      padding: $small;
+
+      .progress-bottom {
+        display: flex;
+        align-items: center;
+      }
+
+      .progress-bottom {
+        width: 100%;
+
+        .durationx {
+          background-color: $black;
+          padding: $smaller;
+          border-radius: 0.5rem;
+          margin: 0 $small 0 $small;
+          font-size: 0.8rem;
+          min-width: 2.5rem;
+        }
+      }
+    }
+
+    .r-group {
+      display: flex;
+      align-items: center;
+      gap: $small;
+
+      #heart {
+        background-image: url(../../icons/heart.svg);
+      }
+
+      #add-to {
+        background-image: url(../../icons/plus.svg);
+      }
+
+      #repeat {
+        background-image: url(../../icons/repeat.svg);
+      }
+    }
+
+    .volume-group {
+      @include tablet-portrait {
+        display: none;
+      }
+    }
+  }
+}

src/assets/scss/Global/app-grid.scss

@@ -0,0 +1,64 @@
+#app-grid {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: max-content 1fr max-content;
+  grid-template-areas:
+    "l-sidebar nav search-input"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content tabs";
+  align-content: center;
+  max-width: 2720px;
+  height: calc(100vh - 1rem);
+  margin: 0 auto;
+  gap: 1rem;
+  margin: $small;
+}
+
+#acontent {
+  grid-area: content;
+  max-width: 1955px;
+  overflow: hidden auto;
+  margin-top: -$small;
+
+  .nav {
+    margin: $small;
+    width: calc(100% - 1rem);
+  }
+}
+
+#tabs {
+  grid-area: tabs;
+  height: 3.5rem;
+  margin-top: -$small;
+
+  @include tablet-landscape {
+    display: none;
+  }
+}
+
+.r-sidebar {
+  grid-area: r-sidebar;
+  margin-top: -$small;
+  width: 29rem;
+}
+
+#gsearch-input {
+  grid-area: search-input;
+}
+
+.topnav {
+  grid-area: nav;
+}
+
+.l-sidebar {
+  width: 17rem;
+  grid-area: l-sidebar;
+  background-color: $black;
+  padding: 1rem;
+}
+
+.bottom-bar {
+  grid-area: bottom-bar;
+  height: 4rem;
+}

src/assets/scss/Global/basic.scss

@@ -0,0 +1,77 @@
+.t-center {
+  text-align: center;
+}
+
+.image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellip {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rounded {
+  border-radius: $small;
+}
+
+.circular {
+  border-radius: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.bg-black {
+  background-color: $black;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+}
+
+.heading {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.separator {
+  border-top: 0.1px $separator solid;
+  color: transparent;
+  margin: $small 0 $small 0;
+}
+
+.no-border {
+  border: none;
+}
+
+.noscroll {
+  overflow: hidden;
+}
+
+.abs {
+  position: absolute;
+}
+
+.grid {
+  display: grid;
+}
+
+.card-dark {
+  background-color: #fff;
+}

src/assets/scss/Global/controls.scss

@@ -0,0 +1,57 @@
+.controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .shuffle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/repeat.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/shuffle.svg);
+    }
+  }
+
+  .fav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      border-radius: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/plus.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/heart.svg);
+    }
+  }
+}

src/assets/scss/Global/index.scss

@@ -0,0 +1,28 @@
+@import
+"./app-grid.scss",
+"./controls.scss",
+"./inputs.scss",
+"./scrollbars.scss",
+"./state.scss",
+"./variants.scss",
+"./basic.scss";
+
+:root {
+  --separator: #ffffff46;
+  --green: #4ad168;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: $body;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  overflow: hidden;
+  image-rendering: -webkit-optimize-contrast;
+}

src/assets/scss/Global/inputs.scss

@@ -0,0 +1,10 @@
+input[type="number"] {
+  width: 40px;
+  padding: 4px 5px;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+}
+
+input[type="search"] {
+  height: 2.25rem !important;
+}

src/assets/scss/Global/scrollbars.scss

@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 1rem;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.322);
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+  background: $blue;
+}

src/assets/scss/Global/state.scss

@@ -0,0 +1,19 @@
+
+.now-playing-track-indicator {
+  background-image: url(../../assets/icons/playing.gif);
+  transition: all 0.3s ease-in-out;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  background-color: $white;
+  background-size: 1.5rem !important;
+}
+
+.last_played {
+  background-image: url(../../assets/icons/playing.webp);
+  transition: all 0.3s ease-in-out;
+}
+
+.hidden {
+  display: none;
+}

src/assets/scss/Global/variants.scss

@@ -0,0 +1,25 @@
+// paddings
+.pad-small {
+  padding: $small;
+}
+
+.pad-medium {
+  padding: $medium;
+}
+
+.pad-large {
+  padding: 1rem;
+}
+
+// shadows
+.shadow-sm {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
+}
+
+.shadow-md {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
+}

src/assets/scss/ProgressBar.scss

@@ -0,0 +1,72 @@
+input[type="range"] {
+  -webkit-appearance: none;
+  margin-right: 15px;
+  width: calc(100% - 2px);
+  height: 0.3rem;
+  border-radius: 5px;
+  background-size: 0 100%;
+  background: $gray linear-gradient($accent, $accent) no-repeat;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+
+    height: 0;
+    width: 0.8rem;
+    border-radius: 50%;
+    background: $accent;
+  }
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+
+    height: 0;
+    border-radius: 50%;
+    background: $accent;
+    border: none;
+  }
+
+  &::-ms-thumb {
+    -webkit-appearance: none;
+
+    height: 0;
+    width: 0.8rem;
+    border-radius: 50%;
+    background: $accent;
+    border: none;
+  }
+}
+
+/* Input Thumb */
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: $pink;
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  background: $pink;
+}
+
+input[type="range"]::-ms-thumb:hover {
+  background: $pink;
+}
+
+/* Input Track */
+input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-moz-range-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-ms-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}

src/assets/scss/_variables.scss

@@ -0,0 +1,79 @@
+// colors
+
+$body: #0f1218;
+$separator: #ffffff2f;
+$highlight-blue: #006eff;
+$bbb: #161616; //bottom controls background
+$theme: #464545fd;
+
+// sizes
+$small: 0.5rem;
+$smaller: 0.25rem;
+$medium: 0.75rem;
+$large: 1.5rem;
+$larger: 2rem;
+
+$banner-height: 18rem;
+
+// apple human design guideline colors
+$black: #181a1c;
+$white: #ffffffde;
+
+$gray: #1c1c1e;
+$gray1: rgb(142, 142, 147);
+$gray2: rgb(99, 99, 102);
+$gray3: rgb(72, 72, 74);
+$gray4: rgb(58, 58, 60);
+$gray5: rgb(44, 44, 46);
+
+$red: #ff453a;
+$blue: #0a84ff;
+$darkblue: #055ee2;
+$green: rgb(20, 160, 55);
+$yellow: rgb(255, 214, 10);
+$orange: rgb(255, 159, 10);
+$pink: rgb(255, 55, 95);
+$purple: #bf5af2;
+$brown: rgb(172, 142, 104);
+$indigo: #5e5ce6;
+$teal: rgb(64, 200, 224);
+
+$primary: $gray4;
+$accent: $red;
+$secondary: $gray5;
+$cta: $blue;
+$danger: $red;
+$track-hover: $gray4;
+$context: $gray5;
+
+// SVG COLORS
+$default: $accent;
+$track-btn-svg: $red;
+$side-nav-svg: $red;
+
+// media query mixins
+@mixin phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+@mixin tablet-portrait {
+  @media (max-width: 900px) {
+    @content;
+  }
+}
+@mixin tablet-landscape {
+  @media (max-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-desktop-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}

src/assets/scss/index.scss

@@ -0,0 +1,8 @@
+@import
+"./mixins.scss",
+"./variables",
+"./moz.scss",
+"./ProgressBar.scss",
+"./BottomBar/BottomBar.scss",
+"./Global"
+;

src/assets/scss/mixins.scss

@@ -0,0 +1,5 @@
+@mixin ximage {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}

src/assets/scss/moz.scss

@@ -0,0 +1,5 @@
+// Styles that only apply on our dear Firefox 
+
+// @-moz-document url-prefix() {
+
+// }