Merge pull request 'Angular & UIkit Upgrade' (#6) from develop into master

Reviewed-on: #6

less/_import.less

@@ -33,6 +33,7 @@
 
 // JavaScript
 @import "accordion";
+@import "drop";
 @import "dropdown";
 @import "modal";
 @import "slider";

less/color.less

@@ -3,7 +3,8 @@
 @primary-dark-color: #1F2379;
 @secondary-color: #3086ED;
 
-@dark-color: #000000;
+@black-color: #000000;
+@dark-color: #1a1a1a;
 @grey-color: #2C2C2C;
 @placeholder-color: #6e6e6e;
 @disable-color: #B3B3B3;

less/drop.less

@@ -0,0 +1 @@
+@drop-z-index: @global-z-index - 19;

less/dropdown.less

@@ -1,4 +1,3 @@
-@dropdown-z-index: @global-z-index - 19;
 @dropdown-min-width: 260px;
 @dropdown-padding: 5px 0;
 @dropdown-background: @global-background;

less/input.less

@@ -4,13 +4,14 @@
   /* Basic Information */
   --input-placeholder-color: @global-meta-color;
   --input-placeholder-weight: 400;
+  --input-placeholder-padding-horizontal: 5px;
   --input-hint-color: @global-meta-color;
   --input-color: @global-emphasis-color;
   --input-border-radius: @global-border-radius;
   /* Size modifiers */
   --input-padding-vertical: 12px;
   --input-padding-horizontal: 25px;
-  --input-font-size: @global-font-size;
+  --input-font-size: @global-small-font-size;
   /* Styling */
   --input-background: transparent;
   --input-shadow: none;
@@ -26,7 +27,7 @@
   --input-background-focus: var(--input-background);
   --input-shadow-focus: var(--input-shadow);
   --input-border-focus: var(--input-border);
-  --input-color-focus: @global-link-hover-color;
+  --input-placeholder-color-focus: @global-emphasis-color;
   --input-border-style-focus: var(--input-border-style);
   /* Disabled */
   --input-color-disabled: @global-muted-color;
@@ -60,37 +61,39 @@
     background: var(--input-background);
     border-radius: var(--input-border-radius);
     position: relative;
-    padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
+    padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
-    cursor: text;
+    cursor: pointer;
     color: var(--input-color);
 
     &.static {
       padding-top: var(--input-padding-vertical);
     }
 
-    &.select {
-      cursor: pointer;
-    }
-
     & > .placeholder {
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
-      overflow: hidden;
       pointer-events: none;
       color: var(--input-placeholder-color);
       font-weight: var(--input-placeholder-weight);
 
       & > label {
         position: absolute;
+        background: linear-gradient(
+                to top,
+                var(--input-background) 0%,
+                var(--input-background) 50%,
+                transparent 50%,
+                transparent 100%
+        );
+        padding: 0 var(--input-placeholder-padding-horizontal);
         font-size: var(--input-font-size);
         line-height: @global-line-height;
-        top: calc(var(--input-padding-vertical) + @global-line-height);
+        top: var(--input-padding-vertical);
-        left: var(--input-padding-horizontal);
+        left: calc(var(--input-padding-horizontal) - var(--input-placeholder-padding-horizontal));
-        transform: translateY(-50%);
+        transition: all 0.3s ease 0s;
-        transition: all 0.5s ease 0s;
       }
     }
 
@@ -210,13 +213,17 @@
     border-color: var(--input-border-focus);
     border-style: var(--input-border-style-focus);
 
+    & > .input-box:not(.select)  {
+      cursor: text;
+    }
+
     & > .input-box {
       box-shadow: var(--input-shadow-focus);
       background: var(--input-background-focus);
     }
 
-    &:not(.hint):not(.disabled) > .input-box > .placeholder > label {
+    &:not(.hint):not(.disabled):not(.danger) > .input-box > .placeholder > label {
-      color: var(--input-color-focus);
+      color: var(--input-placeholder-color-focus);
     }
   }
 
@@ -257,7 +264,8 @@
   &.active > .input-box > .placeholder > label,
   &.focused > .input-box > .placeholder > label,
   &.hint > .input-box > .placeholder > label {
-    top: calc(var(--input-padding-vertical) + 13px);
+    transform: translateY(-50%);
+    top: calc(var(--input-border-width) * -1);
     font-size: 12px;
     line-height: 18px;
   }
@@ -275,6 +283,7 @@
   &.flat {
     --input-background: @global-inverse-color;
     --input-border: @gray-300;
+    --input-border-focus: @global-emphasis-color;
   }
 
   &.border-bottom {
@@ -283,12 +292,11 @@
     --input-border-style: hidden hidden solid hidden;
     --input-padding-horizontal: 0;
     --input-padding-vertical: 5px;
+    --input-placeholder-padding-horizontal: 0;
     --input-border-focus: @global-color;
-    --input-font-size: 14px;
   }
 
   &.search {
-    --input-font-size: 14px;
     --input-padding-horizontal: 30px;
     --input-padding-vertical: 15px;
   }
@@ -298,8 +306,7 @@
     --input-placeholder-color: @global-color;
     --input-border-radius: 54px;
     --input-padding-horizontal: 30px;
-    --input-padding-vertical: 10px;
+    --input-padding-vertical: var(--search-input-icon-padding-vertical);
-    --input-font-size: 14px;
     --input-background-hover: @global-muted-background;
     --input-shadow-hover: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow);
     --input-background-focus: @global-background;
@@ -308,18 +315,17 @@
 
   &.icon-left {
     --input-padding-horizontal: 0;
+    --input-placeholder-padding-horizontal: 0;
   }
 
   &.x-small {
     --input-padding-horizontal: 15px;
-    --input-padding-vertical: 5px;
+    --input-padding-vertical: 10px;
-    --input-font-size: 14px;
   }
 
   &.small {
     --input-padding-horizontal: 20px;
     --input-padding-vertical: 10px;
-    --input-font-size: 14px;
   }
 
   &.small-vertical {

less/inverse.less

@@ -1,6 +1,6 @@
 /* Dark Background: Use hook-inverse-misc in order to add styles
 in a dark background and use uk-light in a child */
-@inverse-global-color: @global-inverse-color;
+@inverse-global-color: @global-background;
 
 .dark {
   .hook-inverse-misc();

less/modal.less

@@ -2,21 +2,21 @@
 
 @modal-dialog-border-radius: @global-border-radius;
 
-@modal-body-padding-horizontal: @global-medium-gutter;
+@modal-body-padding-horizontal-s: @global-medium-gutter;
-@modal-body-padding-vertical: @global-medium-gutter;
+@modal-body-padding-vertical-s: @global-medium-gutter;
-@modal-body-padding-horizontal-mobile: @global-small-gutter;
+@modal-body-padding-horizontal: @global-small-gutter;
-@modal-body-padding-vertical-mobile: @global-small-gutter;
+@modal-body-padding-vertical: @global-small-gutter;
 
-@modal-header-padding-horizontal: @global-medium-gutter;
+@modal-header-padding-horizontal-s: @global-medium-gutter;
-@modal-header-padding-vertical: @global-gutter;
+@modal-header-padding-vertical-s: @global-small-gutter;
-@modal-header-padding-horizontal-mobile: @global-small-gutter;
+@modal-header-padding-horizontal: @global-small-gutter;
-@modal-header-padding-vertical-mobile: @global-small-gutter;
+@modal-header-padding-vertical: @global-xsmall-gutter;
 @modal-header-background: @global-background;
 
-@modal-footer-padding-horizontal: @global-medium-gutter;
+@modal-footer-padding-horizontal-s: @global-medium-gutter;
-@modal-footer-padding-vertical: @global-medium-gutter;
+@modal-footer-padding-vertical-s: @global-small-gutter;
-@modal-footer-padding-horizontal-mobile: @global-small-gutter;
+@modal-footer-padding-horizontal: @global-small-gutter;
-@modal-footer-padding-vertical-mobile: @global-small-gutter;
+@modal-footer-padding-vertical: @global-xsmall-gutter;
 @modal-footer-background: @global-background;
 @modal-footer-border-width: @global-border-width;
 @modal-footer-border: @global-border;
@@ -42,20 +42,6 @@
 }
 
 .hook-modal-misc() {
-  @media (max-width: @breakpoint-small-max) {
-    .uk-modal-body {
-      padding: @modal-body-padding-vertical-mobile @modal-body-padding-horizontal-mobile;
-    }
-
-    .uk-modal-header {
-      padding: @modal-header-padding-vertical-mobile @modal-header-padding-horizontal-mobile;
-    }
-
-    .uk-modal-footer {
-      padding: @modal-footer-padding-vertical-mobile @modal-footer-padding-horizontal-mobile;
-    }
-  }
-
   .uk-modal, uk-dropdown {
 
     .uk-button, uk-icon-button {

less/nav.less

@@ -13,6 +13,7 @@
 @nav-primary-item-hover-color: @global-secondary-background;
 @nav-primary-item-active-color: @global-secondary-background;
 @nav-primary-header-color: @global-secondary-background;
+@nav-primary-sublist-font-size: @global-font-size;
 @nav-primary-sublist-item-color: @nav-primary-item-color;
 @nav-primary-sublist-item-hover-color: @nav-primary-item-hover-color;
 @nav-primary-sublist-item-active-font-weight: 600;
@@ -54,16 +55,6 @@
   }
 }
 
-.hook-nav-parent-icon() {
-  background-image: none !important;
-  font-family: "Material Icons";
-  font-weight: 400 !important;
-  font-size: 1.5em;
-  width: auto;
-  height: auto;
-  content: "\e5c5";
-}
-
 .hook-nav-misc() {
   .uk-nav-sub ul {
     &:before {
@@ -79,8 +70,18 @@
     font-weight: @nav-primary-sublist-item-active-font-weight;
   }
 
-  .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
+  .uk-nav-parent-icon {
-    content: "\e5c7";
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &::after {
+      background-image: none !important;
+      font-family: "Material Icons";
+      font-weight: 400 !important;
+      font-size: 1.5em;
+      content: "\e5c5";
+    }
   }
 
   .uk-nav-sub .uk-nav-divider {

less/offcanvas.less

@@ -16,7 +16,7 @@
 @offcanvas-bar-width: 100vw;
 @offcanvas-bar-padding-vertical: @global-medium-gutter;
 @offcanvas-bar-padding-horizontal: @global-medium-gutter;
-@offcanvas-bar-width-m: 550px;
+@offcanvas-bar-width-s: 550px;
 @offcanvas-bar-border-radius: @global-small-border-radius;
 @offcanvas-bar-background: @global-background;
 @offcanvas-bar-box-shadow: @global-large-box-shadow;

less/progress.less

@@ -8,6 +8,9 @@
 @progress-circle-text-font-weight: @text-bold-weight;
 @progress-circle-text-font-size: @global-large-font-size;
 
+@inverse-progress-background: @inverse-global-color;
+@inverse-progress-bar-background: @global-secondary-background;
+
 .hook-progress() {
   border-radius: @progress-border-radius;
   box-shadow: @progress-box-shadow;
@@ -15,6 +18,7 @@
 
 .hook-progress-bar() {
   border-radius: @progress-border-radius;
+  transition: none;
 }
 
 .hook-progress-misc() {
@@ -37,3 +41,17 @@
     }
   }
 }
+
+.hook-inverse() {
+  .uk-progress {
+    background-color: @inverse-progress-background;
+  }
+
+  .uk-progress::-moz-progress-bar  {
+    background-color: @inverse-progress-bar-background;
+  }
+
+  .uk-progress::-webkit-progress-value {
+    background-color: @inverse-progress-bar-background;
+  }
+}

less/section.less

@@ -2,4 +2,4 @@
 @section-primary-background: @global-primary-gradient;
 
 /** Secondary*/
-@section-secondary-background: @global-color;
+@section-secondary-background: @global-dark-background;

less/slider.less

@@ -2,6 +2,48 @@
 @slider-arrow-width: 50px;
 @slider-arrow-margin: 5px;
 
+@slider-container-progress-height: 6px;
+@slider-nav-item-margin: @global-small-margin;
+@slider-nav-item-padding: 20px 30px;
+@slider-nav-item-border-radius: @global-border-radius;
+@slider-nav-item-background-active: @ciel-color;
+@slider-nav-item-action-size: @icon-button-small-size;
+@slider-nav-item-action-background: @global-background;
+
+@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 5%);
+
+.mobile(@link-color: @global-link-color, @link-color-hover: @global-link-hover-color) {
+  @media (max-width: @breakpoint-medium-max) {
+    slider-container {
+
+      & slider-nav-item {
+        & > * {
+          padding: 0;
+        }
+
+        & > *:hover {
+          background: none;
+        }
+
+        & > .uk-active {
+          box-shadow: none;
+          background: none;
+
+          & > .action {
+            & > a {
+              border: @global-border-width solid @link-color;
+            }
+
+            & > a:hover {
+              border-color: @link-color-hover;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .hook-slider-misc() {
   .uk-slider-arrow {
     height: 100%;
@@ -31,4 +73,68 @@
       margin-left: -@subnav-margin-horizontal;
     }
   }
+
+  slider-container {
+    & .uk-progress {
+      height: @slider-container-progress-height;
+      cursor: pointer;
+    }
+
+    & slider-nav-item {
+      display: block;
+
+      & > * {
+        padding: @slider-nav-item-padding;
+        border-radius: @slider-nav-item-border-radius;
+        cursor: pointer;
+
+        & > .action {
+          width: @slider-nav-item-action-size;
+          position: relative;
+
+          & > a, & > a:hover {
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-radius: 500px;
+            width: @slider-nav-item-action-size;
+            height: @slider-nav-item-action-size;
+            background: @slider-nav-item-action-background;
+          }
+        }
+      }
+
+      & > .uk-active {
+        background: @slider-nav-item-background-active;
+
+        & > .action {
+          & > a, & > a:hover {
+            display: flex;
+          }
+        }
+      }
+
+      &:not(:last-child) {
+        margin-bottom: @slider-nav-item-margin;
+      }
+    }
+  }
+
+  .mobile();
+}
+
+.hook-inverse() {
+  slider-container {
+
+    & slider-nav-item {
+
+      & > .uk-active {
+        box-shadow: 10px 10px 25px #0000001A;
+        background: @inverse-slider-nav-item-background-active;
+      }
+    }
+  }
+
+  .mobile(@inverse-base-link-color, @inverse-base-link-color);
 }

less/variables.less

@@ -12,13 +12,13 @@
 
 /** Colors */
 @global-color: @grey-color;
-@global-emphasis-color: @dark-color;
+@global-emphasis-color: @black-color;
 @global-inverse-color: @light-color;
 @global-link-color: @info-color;
 @global-muted-color: @disable-color;
 @global-meta-color: @placeholder-color;
 @global-link-hover-color: @secondary-color;
-@global-overlay-background: fade(@dark-color, 60%);
+@global-overlay-background: fade(@black-color, 60%);
 
 /** Backgrounds */
 @global-background: @default-color;
@@ -26,6 +26,7 @@
 @global-muted-background: @muted-color;
 @global-primary-background: @primary-color;
 @global-secondary-background: @secondary-color;
+@global-dark-background: @dark-color;
 @global-success-background: @success-color;
 @global-warning-background: @warning-color;
 @global-primary-gradient: linear-gradient(51deg, @primary-light-color 0%, @primary-dark-color 100%);