ready

user/themes/anissabensalah/scss/config/mixins/_button.scss

@@ -0,0 +1,54 @@
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}

user/themes/anissabensalah/scss/config/mixins/_color.scss

@@ -0,0 +1,24 @@
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color;
+
+    @if (lightness($color) < 60) {
+      color: $light-color;
+    }
+  }
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+  }
+}

user/themes/anissabensalah/scss/config/mixins/_fonts.scss

@@ -0,0 +1,79 @@
+// Font Family
+$font-family-default:  			"Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+$font-family-header:  			"Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+$font-family-mono: 				"Inconsolata", monospace;
+$font-family-serif:				"Georgia", "Times", "Times New Roman", serif;
+$icons: 						"FontAwesome";
+
+// @font-face
+
+$Regular: "Montserrat-Regular";
+$family: "Montserrat/webfonts";
+$file-regular: "Montserrat-Regular";
+$category: "sans-serif";
+
+@mixin Montserrat-Regular($Regular, $file-regular, $family, $category:"") {
+    $filepath: "../fonts/" + $family + "/" + $file-regular;
+    @font-face {
+        font-family: "#{$Regular}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $Regular + "") format('svg');
+    }
+
+    %#{$Regular} {
+        font: {
+            @if $category != "" {
+                family: "#{$Regular}", #{$category};
+            }
+            @else {
+                family: "#{$Regular}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+$light: "Montserrat-Light";
+$family: "Montserrat/webfonts";
+$file-light: "Montserrat-Light";
+$category: "sans-serif";
+
+@mixin Montserrat-light($light, $file-light, $family, $category:"") {
+    $filepath: "../fonts/" + $family + "/" + $file-light;
+    @font-face {
+        font-family: "#{$light}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $light + "") format('svg');
+    }
+
+    %#{$light} {
+        font: {
+            @if $category != "" {
+                family: "#{$light}", #{$category};
+            }
+            @else {
+                family: "#{$light}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+// font-size
+$font16: 1rem;
+$font18: 1.134rem;
+$font21: 1.323rem;
+$font24: 1.512rem;
+$font36: 2.268rem;
+$font48: 3.024rem;
+
+// $fonth1: 2rem;
+// $fonth2: 1.5rem;
+// $fonth3: 1rem;
+// $fontp: 1rem;

user/themes/anissabensalah/scss/config/mixins/_label.scss

@@ -0,0 +1,11 @@
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1.2;
+  padding: .1rem .15rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}

user/themes/anissabensalah/scss/config/mixins/_text.scss

@@ -0,0 +1,6 @@
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

user/themes/anissabensalah/scss/config/mixins/_transition.scss

@@ -0,0 +1,4 @@
+// Component transition
+@mixin control-transition() {
+  transition: all .2s ease;
+}