feat: add some useful mixins

src/_variables.scss

@@ -2,6 +2,9 @@
 
 $s: 8px;
 $card-border-radius: 4px;
+
+// COLORS
+// ------
 $dark-theme-bg-darker: rgb(39, 39, 39);
 $dark-theme-bg-lighter: rgb(70, 70, 70);
 $dark-theme-bg: rgb(48, 48, 48);
@@ -14,23 +17,31 @@ $green: #4fa758;
 $light-green: #a9ed9f;
 $red: #e15d63;
 $red-danger: #e11826;
-$yellow: #fff400;
+$yellow: #fff400; // for sun
 $c-accent: #ff4081;
 
-$standard-note-ng-light: #ffffff;
-$standard-note-fg-light: #000000;
-$standard-note-bg-dark: $dark-theme-bg-darker;
-$standard-note-fg-dark: #eeeeee;
-
-$component-max-width: 900px;
 
+// LAYOUT
+// ------
 $layout-xs: 600px;
 $layout-sm: 960px;
 $layout-md: 1280px;
 $layout-lg: 1920px;
 
+$component-max-width: 900px;
 $main-header-height: $s*7;
 
+
+// COMPONENTS
+// ----------
+$standard-note-ng-light: #ffffff;
+$standard-note-fg-light: #000000;
+$standard-note-bg-dark: $dark-theme-bg-darker;
+$standard-note-fg-dark: #eeeeee;
+
+
+// ANIMATIONS
+// ----------
 // https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_variables.scss
 $ani-standard-timing: cubic-bezier(.4, 0, .2, 1) !default;
 $ani-enter-timing: cubic-bezier(0, 0, .2, 1) !default;
@@ -53,3 +64,4 @@ $transition-fast: $transition-duration-s $ani-standard-timing;
 $page-transition-duration: $transition-duration-m;
 
 @import 'styles/mixins/mixins';
+@import 'styles/extends/extends';

src/app/note/note/note.component.scss

@@ -10,7 +10,7 @@
   transition: $transition-standard;
   transition-property: transform;
 
-  @include dark-theme {
+  @include darkTheme {
     background: $standard-note-bg-dark;
     color: $standard-note-fg-dark;
     border-color: #333333;
@@ -58,7 +58,7 @@
       color: $standard-note-fg-light;
       box-sizing: border-box;
 
-      @include dark-theme {
+      @include darkTheme {
         background: $standard-note-bg-dark;
         color: $standard-note-fg-dark;
         border-color: #333333;

src/app/pages/config-page/config-page.component.scss

@@ -10,11 +10,11 @@
   .config-section {
     margin-bottom: 10px;
     background: #ffffff;
-    @include dark-theme {
+    @include darkTheme {
       background-color: $dark-theme-bg-lighter;
     }
 
-    //@include dark-theme {
+    //@include darkTheme {
     //  background-color: $dark-theme-bg-lighter;
     //}
     .md-title {

src/app/tasks/add-task-bar/add-task-bar.component.scss

@@ -24,7 +24,7 @@
   position: relative;
   color: #000000;
 
-  @include dark-theme {
+  @include darkTheme {
     color: #eeeeee;
   }
 
@@ -44,7 +44,7 @@
     color: #000000;
     background: #ffffff;
 
-    @include dark-theme {
+    @include darkTheme {
       background-color: $dark-theme-bg;
       color: #eeeeee;
     }

src/app/tasks/task-additional-info/task-additional-info.component.scss

@@ -8,7 +8,7 @@
   border-radius: $card-border-radius;
   border: 1px solid #dddddd;
 
-  @include dark-theme {
+  @include darkTheme {
     border-color: #333333;
   }
 
@@ -75,7 +75,7 @@
       color: $standard-note-fg-light;
       box-sizing: border-box;
 
-      @include dark-theme {
+      @include darkTheme {
         background: $standard-note-bg-dark;
         color: $standard-note-fg-dark;
         border-color: #333333;

src/app/tasks/task/task.component.scss

@@ -157,7 +157,7 @@ $this-icon-default-opacity: 0.7;
     &.delete-btn {
       mat-icon.delete-icon {
         color: $red !important;
-        @include dark-theme {
+        @include darkTheme {
           color: $red !important;
         }
       }
@@ -166,7 +166,7 @@ $this-icon-default-opacity: 0.7;
         background: $red-danger !important;
         mat-icon.delete-icon {
           color: #ffffff !important;
-          @include dark-theme {
+          @include darkTheme {
             color: #ffffff !important;
           }
         }
@@ -246,7 +246,7 @@ $this-icon-default-opacity: 0.7;
   border-radius: $card-border-radius;
   border: 1px solid #dddddd;
 
-  @include dark-theme {
+  @include darkTheme {
     border-color: #333333;
   }
 }
@@ -301,7 +301,7 @@ $this-icon-default-opacity: 0.7;
     font-weight: bold;
   }
 
-  @include dark-theme() {
+  @include darkTheme() {
     caret-color: #ffffff;
   }
 
@@ -322,7 +322,7 @@ $this-icon-default-opacity: 0.7;
     border: 1px solid black;
     pointer-events: none;
 
-    @include dark-theme() {
+    @include darkTheme() {
       //background: $dark-theme-bg-darker;
       border: 1px solid #ffffff;
       box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8), $whiteframe-shadow-13dp;

src/app/ui/progress-bar/progress-bar.component.scss

@@ -10,7 +10,7 @@
   z-index: 2;
   //margin-bottom: -2px;
 
-  //@include dark-theme {
+  //@include darkTheme {
   //  background-color: #999999;
   //}
 

src/styles/extends/_clearfix.scss

@@ -0,0 +1,7 @@
+%clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}

src/styles/extends/_extends.scss

@@ -0,0 +1,2 @@
+@import "clearfix";
+@import "list-reset";

src/styles/extends/_list-reset.scss

@@ -0,0 +1,5 @@
+%listReset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

src/styles/mixins/_hardware.scss

@@ -0,0 +1,6 @@
+@mixin hardware($backface: true, $perspective: 1000) {
+  @if $backface {
+    backface-visibility: hidden;
+  }
+  perspective: $perspective;
+}

src/styles/mixins/_mixins.scss

@@ -1,2 +1,7 @@
 @import "theming";
+@import "positioning";
+@import "text";
+@import "hardware";
+@import "pseudo";
+@import "responsive-ratio";
 @import "media-queries";

src/styles/mixins/_positioning.scss

@@ -0,0 +1,6 @@
+@mixin center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/styles/mixins/_pseudo.scss

@@ -0,0 +1,5 @@
+@mixin pseudo($display: block, $pos: absolute, $content: ''){
+  content: $content;
+  display: $display;
+  position: $pos;
+}

src/styles/mixins/_responsive-ratio.scss

@@ -0,0 +1,12 @@
+@mixin responsiveRatio($x,$y, $pseudo: false) {
+  $padding: unquote( ( $y / $x ) * 100 + '%' );
+  @if $pseudo {
+    &:before {
+      @include pseudo($pos: relative);
+      width: 100%;
+      padding-top: $padding;
+    }
+  } @else {
+    padding-top: $padding;
+  }
+}

src/styles/mixins/_text.scss

@@ -0,0 +1,5 @@
+@mixin truncateText($overflow: ellipsis) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: $overflow;
+}

src/styles/mixins/_theming.scss

@@ -1,20 +1,20 @@
-@mixin dark-theme {
+@mixin darkTheme {
   :host-context(.isDarkTheme) & {
     @content;
   }
 }
 
-@mixin light-theme {
+@mixin lightTheme {
   :host-context(.isLightTheme) & {
     @content;
   }
 }
 
 @mixin standardThemeTextColor {
-  @include dark-theme() {
+  @include darkTheme() {
     color: $dark-theme-text-color;
   }
-  @include light-theme() {
+  @include lightTheme() {
     color: $light-theme-text-color;
   }
 }

src/styles/page.scss

@@ -8,7 +8,6 @@ app-root,
   margin: 0;
   height: 100%;
   box-sizing: border-box;
-  color: #e0e0e0;
 }
 
 .page-wrapper {
@@ -21,7 +20,6 @@ app-root,
 }
 
 
-
 a[href] {
   color: $c-accent;
 }