From 669ce4c64cb2cbbaba46fbb0ee9f2c24f1e4e40c Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 23 Nov 2018 00:09:28 +0100
Subject: [PATCH] feat: add some useful mixins

---
 src/_variables.scss                           | 26 ++++++++++++++-----
 src/app/note/note/note.component.scss         |  4 +--
 .../config-page/config-page.component.scss    |  4 +--
 .../add-task-bar/add-task-bar.component.scss  |  4 +--
 .../task-additional-info.component.scss       |  4 +--
 src/app/tasks/task/task.component.scss        | 10 +++----
 .../progress-bar/progress-bar.component.scss  |  2 +-
 src/styles/extends/_clearfix.scss             |  7 +++++
 src/styles/extends/_extends.scss              |  2 ++
 src/styles/extends/_list-reset.scss           |  5 ++++
 src/styles/mixins/_hardware.scss              |  6 +++++
 src/styles/mixins/_mixins.scss                |  5 ++++
 src/styles/mixins/_positioning.scss           |  6 +++++
 src/styles/mixins/_pseudo.scss                |  5 ++++
 src/styles/mixins/_responsive-ratio.scss      | 12 +++++++++
 src/styles/mixins/_text.scss                  |  5 ++++
 src/styles/mixins/_theming.scss               |  8 +++---
 src/styles/page.scss                          |  2 --
 18 files changed, 90 insertions(+), 27 deletions(-)
 create mode 100644 src/styles/extends/_clearfix.scss
 create mode 100644 src/styles/extends/_extends.scss
 create mode 100644 src/styles/extends/_list-reset.scss
 create mode 100644 src/styles/mixins/_hardware.scss
 create mode 100644 src/styles/mixins/_positioning.scss
 create mode 100644 src/styles/mixins/_pseudo.scss
 create mode 100644 src/styles/mixins/_responsive-ratio.scss
 create mode 100644 src/styles/mixins/_text.scss

diff --git a/src/_variables.scss b/src/_variables.scss
index f0d3e9f616..92937e3bf1 100644
--- a/src/_variables.scss
+++ b/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';
diff --git a/src/app/note/note/note.component.scss b/src/app/note/note/note.component.scss
index f404585beb..3213c2f8fd 100644
--- a/src/app/note/note/note.component.scss
+++ b/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;
diff --git a/src/app/pages/config-page/config-page.component.scss b/src/app/pages/config-page/config-page.component.scss
index 5ac5920c82..2e28ff1465 100644
--- a/src/app/pages/config-page/config-page.component.scss
+++ b/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 {
diff --git a/src/app/tasks/add-task-bar/add-task-bar.component.scss b/src/app/tasks/add-task-bar/add-task-bar.component.scss
index d33e6c074c..3ce0ab257e 100644
--- a/src/app/tasks/add-task-bar/add-task-bar.component.scss
+++ b/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;
     }
diff --git a/src/app/tasks/task-additional-info/task-additional-info.component.scss b/src/app/tasks/task-additional-info/task-additional-info.component.scss
index 5c92fd64d6..c526dc844b 100644
--- a/src/app/tasks/task-additional-info/task-additional-info.component.scss
+++ b/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;
diff --git a/src/app/tasks/task/task.component.scss b/src/app/tasks/task/task.component.scss
index 6ae74a77a5..a394bf7211 100644
--- a/src/app/tasks/task/task.component.scss
+++ b/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;
diff --git a/src/app/ui/progress-bar/progress-bar.component.scss b/src/app/ui/progress-bar/progress-bar.component.scss
index 6779a23672..7b37720334 100644
--- a/src/app/ui/progress-bar/progress-bar.component.scss
+++ b/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;
   //}
 
diff --git a/src/styles/extends/_clearfix.scss b/src/styles/extends/_clearfix.scss
new file mode 100644
index 0000000000..37ae944d3f
--- /dev/null
+++ b/src/styles/extends/_clearfix.scss
@@ -0,0 +1,7 @@
+%clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/extends/_extends.scss b/src/styles/extends/_extends.scss
new file mode 100644
index 0000000000..db477c28f5
--- /dev/null
+++ b/src/styles/extends/_extends.scss
@@ -0,0 +1,2 @@
+@import "clearfix";
+@import "list-reset";
\ No newline at end of file
diff --git a/src/styles/extends/_list-reset.scss b/src/styles/extends/_list-reset.scss
new file mode 100644
index 0000000000..14ef6bf353
--- /dev/null
+++ b/src/styles/extends/_list-reset.scss
@@ -0,0 +1,5 @@
+%listReset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_hardware.scss b/src/styles/mixins/_hardware.scss
new file mode 100644
index 0000000000..5f2bbf0298
--- /dev/null
+++ b/src/styles/mixins/_hardware.scss
@@ -0,0 +1,6 @@
+@mixin hardware($backface: true, $perspective: 1000) {
+  @if $backface {
+    backface-visibility: hidden;
+  }
+  perspective: $perspective;
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_mixins.scss b/src/styles/mixins/_mixins.scss
index 7f83d16df3..7ce3882876 100644
--- a/src/styles/mixins/_mixins.scss
+++ b/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";
\ No newline at end of file
diff --git a/src/styles/mixins/_positioning.scss b/src/styles/mixins/_positioning.scss
new file mode 100644
index 0000000000..cbe1c2c8d3
--- /dev/null
+++ b/src/styles/mixins/_positioning.scss
@@ -0,0 +1,6 @@
+@mixin center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_pseudo.scss b/src/styles/mixins/_pseudo.scss
new file mode 100644
index 0000000000..3658beddc7
--- /dev/null
+++ b/src/styles/mixins/_pseudo.scss
@@ -0,0 +1,5 @@
+@mixin pseudo($display: block, $pos: absolute, $content: ''){
+  content: $content;
+  display: $display;
+  position: $pos;
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_responsive-ratio.scss b/src/styles/mixins/_responsive-ratio.scss
new file mode 100644
index 0000000000..21ef841ccc
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_text.scss b/src/styles/mixins/_text.scss
new file mode 100644
index 0000000000..82a9fbebfb
--- /dev/null
+++ b/src/styles/mixins/_text.scss
@@ -0,0 +1,5 @@
+@mixin truncateText($overflow: ellipsis) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: $overflow;
+}
\ No newline at end of file
diff --git a/src/styles/mixins/_theming.scss b/src/styles/mixins/_theming.scss
index 075f0487be..3d011a884e 100644
--- a/src/styles/mixins/_theming.scss
+++ b/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;
   }
 }
diff --git a/src/styles/page.scss b/src/styles/page.scss
index abeabb5862..c6312bfea8 100644
--- a/src/styles/page.scss
+++ b/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;
 }