viniBaxter-desk_front 0.2.0

data/lib/viniBaxter/sass/desk_front/dashkit/_forms.scss

@@ -0,0 +1,272 @@
+//
+// forms.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap Overrides ===================================
+//
+
+// Help text
+
+.form-text {
+  margin-top: 0;
+  margin-bottom: $label-margin-bottom;
+}
+
+
+// Form validation
+
+.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
+.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+
+
+//
+// Dashkit ===================================
+//
+
+// Form control flush
+//
+// Removes borders and paddings from inputs and text areas
+
+.form-control-flush {
+  padding-left: 0;
+  padding-right: 0;
+  border-color: transparent !important;
+  background-color: transparent !important;
+  resize: none;
+}
+
+
+// Form control auto
+//
+// Sets the height of the input to auto
+
+.form-control-auto {
+  height: auto;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+
+// Form control rounded
+//
+// Makes input border radius round
+
+.form-control-rounded {
+  border-radius: 20rem;
+}
+
+
+// Input group merge
+//
+// Makes input group text and form control visually the same element
+
+.input-group.input-group-merge {
+
+  > .form-control {
+    border-radius: $input-border-radius;
+
+    &:focus {
+      box-shadow: none;
+
+      ~ [class*="input-group"] {
+
+        > .input-group-text {
+          border-color: $input-focus-border-color;
+        }
+      }
+    }
+  }
+
+  > .form-control.is-valid ~ [class*="input-group"] > .input-group-text {
+    border-color: $success;
+  }
+
+  > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text {
+    border-color: $danger;
+  }
+
+  > .form-control-prepended {
+    padding-left: $input-padding-x / 2;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-left-width: 0;
+  }
+
+  > .form-control-appended {
+    padding-right: $input-padding-x / 2;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right-width: 0;
+  }
+
+  > .input-group-prepend {
+    order: -1; // prepend always goes first
+
+    > .input-group-text {
+      padding-right: $input-padding-x / 2;
+      border-top-left-radius: $input-border-radius;
+      border-bottom-left-radius: $input-border-radius;
+      border-right-width: 0;
+      transition: $input-transition;
+    }
+  }
+
+  > .input-group-append {
+
+    > .input-group-text {
+      padding-left: $input-padding-x / 2;
+      border-top-right-radius: $input-border-radius;
+      border-bottom-right-radius: $input-border-radius;
+      border-left-width: 0;
+      transition: $input-transition;
+    }
+  }
+}
+
+.input-group-lg.input-group-merge {
+
+  > .form-control {
+    border-radius: $input-border-radius-lg;
+  }
+
+  > .form-control-prepended {
+    padding-left: $input-padding-x-lg / 2;
+
+  }
+
+  > .form-control-appended {
+    padding-right: $input-padding-x-lg / 2;
+
+  }
+
+  > .input-group-prepend {
+
+    > .input-group-text {
+      padding-right: $input-padding-x-lg / 2;
+      border-top-left-radius: $input-border-radius-lg;
+      border-bottom-left-radius: $input-border-radius-lg;
+    }
+  }
+
+  > .input-group-append {
+
+    > .input-group-text {
+      padding-left: $input-padding-x-lg / 2;
+      border-top-right-radius: $input-border-radius-lg;
+      border-bottom-right-radius: $input-border-radius-lg;
+    }
+  }
+}
+
+.input-group-sm.input-group-merge {
+
+  > .form-control {
+    border-radius: $input-border-radius-sm;
+  }
+
+  > .form-control-prepended {
+    padding-left: $input-padding-x-sm / 2;
+
+  }
+
+  > .form-control-appended {
+    padding-right: $input-padding-x-sm / 2;
+  }
+
+  > .input-group-prepend {
+
+    > .input-group-text {
+      padding-right: $input-padding-x-sm / 2;
+      border-top-left-radius: $input-border-radius-sm;
+      border-bottom-left-radius: $input-border-radius-sm;
+    }
+  }
+
+  > .input-group-append {
+
+    > .input-group-text {
+      padding-left: $input-padding-x-sm / 2;
+      border-top-right-radius: $input-border-radius-sm;
+      border-bottom-right-radius: $input-border-radius-sm;
+    }
+  }
+}
+
+.input-group-rounded.input-group-merge {
+
+  > .form-control {
+    border-radius: 20rem;
+  }
+
+  > .input-group-prepend {
+
+    > .input-group-text {
+      border-top-left-radius: 20rem;
+      border-bottom-left-radius: 20rem;
+    }
+  }
+
+  > .input-group-append {
+
+    > .input-group-text {
+      border-top-right-radius: 20rem;
+      border-bottom-right-radius: 20rem;
+    }
+  }
+}
+
+.input-group-flush {
+
+  > .form-control {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-color: transparent !important;
+    background-color: transparent !important;
+  }
+
+  > .input-group-prepend,
+  > .input-group-append {
+
+    > .input-group-text {
+      padding: 0;
+      border-width: 0;
+      background-color: transparent;
+    }
+  }
+}
+
+
+// Font size
+
+.form-control {
+
+  &.h1, &.h2, &.h3, &.h4, &.h5 {
+    margin-bottom: 0;
+    font-weight: $headings-font-weight;
+    letter-spacing: $headings-letter-spacing;
+  }
+
+  &.h1 {
+    font-size: $h1-font-size;
+  }
+
+  &.h2 {
+    font-size: $h2-font-size;
+  }
+
+  &.h3 {
+    font-size: $h3-font-size;
+  }
+
+  &.h4 {
+    font-size: $h4-font-size;
+  }
+
+  &.h5 {
+    font-size: $h5-font-size;
+  }
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_header.scss

@@ -0,0 +1,58 @@
+//
+// header.scss
+// Dashkit component
+//
+
+// Header
+//
+// General styles
+
+.header {
+  margin-bottom: $header-margin-bottom;
+}
+
+.header-img-top {
+  width: 100%; height: auto;
+}
+
+.header-body {
+  padding-top: $header-spacing-y;
+  padding-bottom: $header-spacing-y;
+  border-bottom: $header-body-border-width solid $header-body-border-color;
+}
+
+.header.bg-dark .header-body,
+.header.bg-hero .header-body {
+  border-bottom-color: $header-body-border-color-dark;
+}
+
+.header-footer {
+  padding-top: $header-spacing-y;
+  padding-bottom: $header-spacing-y;
+}
+
+.header-pretitle {
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: $text-muted;
+}
+
+.header-title {
+  margin-bottom: 0;
+}
+
+.header-subtitle {
+  margin-top: map-get($spacers, 2);
+  margin-bottom: 0;
+  color: $text-muted;
+}
+
+.header-tabs {
+  margin-bottom: -$header-spacing-y;
+  border-bottom-width: 0;
+
+  .nav-link {
+    padding-top: $header-spacing-y;
+    padding-bottom: $header-spacing-y;
+  }
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_icon.scss

@@ -0,0 +1,54 @@
+//
+// icon.scss
+// Dashkit component
+//
+
+// Icon
+//
+// General styles
+
+.icon {
+  display: inline-block;
+
+  // Feather icon
+
+  > .fe {
+    display: block;
+    min-width: 1em * $line-height-base;
+    min-height: 1em * $line-height-base;
+    text-align: center;
+    font-size: $font-size-lg;
+  }
+
+  // Active state
+
+  &.active {
+    position: relative;
+
+    // Feather icon
+
+    > .fe {
+      mask-image: url(#{$path-to-img}/masks/icon-status.svg);
+      mask-size: 100% 100%;
+    }
+
+    // Indicator
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 10%; right: 20%;
+      width: 20%; height: 20%;
+      border-radius: 50%;
+      background-color: $primary;
+    }
+  }
+}
+
+// Feather icons
+//
+// Fixes icon / font vertical alignment issue
+
+.fe {
+  line-height: inherit;
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_jumbotron.scss

@@ -0,0 +1,15 @@
+// 
+// jumbotron.scss
+// Extended from Bootstrap
+//
+
+// 
+// Bootstrap Overrides =====================================
+//
+
+.jumbotron {
+  padding: ($jumbotron-padding / 2);
+  @include media-breakpoint-up(sm) {
+    padding: $jumbotron-padding;
+  }
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_kanban.scss

@@ -0,0 +1,68 @@
+//
+// kanban.scss
+// Dashkit component
+//
+
+// Container
+
+.container-fluid.kanban-container {
+  min-height: calc(100vh - 129px);
+}
+
+.container.kanban-container {
+  min-height: calc(100vh - 129px - 69px);
+}
+
+.kanban-container {
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.kanban-container > .row {
+  flex-wrap: nowrap;
+}
+
+.kanban-container > .row > [class*="col"] {
+  max-width: $kanban-col-width;
+}
+
+
+// Category
+
+.kanban-category {
+  min-height: 1rem;
+}
+
+
+// Item
+
+.kanban-item {
+  outline: none;
+  user-select: none;
+}
+
+.kanban-item.draggable-source--is-dragging {
+  opacity: .2;
+}
+
+.kanban-item.draggable-mirror {
+  z-index: $zindex-fixed;
+}
+
+.card-body .kanban-item.draggable-mirror > .card {
+  transform: rotateZ(-3deg);
+}
+
+
+// Card
+
+.kanban-item > .card[data-toggle="modal"] {
+  cursor: pointer;
+}
+
+
+// Add form
+
+.kanban-add-form .form-control[data-toggle="flatpickr"] {
+  width: 12ch; // there is no CSS way to set input's width to auto so hardcoding this value
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_list-group.scss

@@ -0,0 +1,53 @@
+// 
+// list-group.scss
+// Extended from Bootstrap
+//
+
+// 
+// Bootstrap Overrides =====================================
+//
+
+// Contextual variants
+//
+// Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color
+
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, $value, color-yiq($value));
+}
+
+
+// List group large
+
+.list-group-lg .list-group-item {
+  padding-top: $list-group-item-padding-y-lg;
+  padding-bottom: $list-group-item-padding-y-lg;
+}
+
+
+// List group flush
+
+.list-group-flush > .list-group-item {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+
+//
+// Dashkit ===================================
+//
+
+
+// Activity
+
+.list-group-activity .list-group-item {
+  border: 0;
+}
+
+.list-group-activity .list-group-item:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: $list-group-item-padding-y;
+  left: $avatar-size-sm / 2;
+  height: 100%;
+  border-left: $border-width solid $border-color;
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_main-content.scss

@@ -0,0 +1,70 @@
+//
+// main-content.scss
+// Dashkit component
+//
+
+// Main content
+//
+// General styles
+
+.navbar-vertical:not([style*="display: none"]) ~  .main-content,
+.navbar-vertical-sm:not([style*="display: none"]) ~  .main-content {
+  
+  .container,
+  .container-fluid {
+
+    @include media-breakpoint-up(md) {
+      padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+      padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important; 
+    }
+  }
+}
+
+
+// Main content offset
+//
+// Offsets the main content depending on the sidebar positioning
+
+.navbar-vertical.navbar-expand {
+  
+  @each $breakpoint, $value in $grid-breakpoints {
+    &-#{$breakpoint} {
+      @include media-breakpoint-up(#{$breakpoint}) {
+
+        // Left
+
+        &.fixed-left:not([style*="display: none"]) ~ .main-content {
+          margin-left: $navbar-vertical-width;
+        }
+
+        // Right
+
+        &.fixed-right:not([style*="display: none"]) ~ .main-content {
+          margin-right: $navbar-vertical-width;
+        }
+      }
+    }
+  }
+}
+
+.navbar-vertical-sm.navbar-expand {
+  
+  @each $breakpoint, $value in $grid-breakpoints {
+    &-#{$breakpoint} {
+      @include media-breakpoint-up(#{$breakpoint}) {
+
+        // Left
+
+        &.fixed-left:not([style*="display: none"]) ~ .main-content {
+          margin-left: $navbar-vertical-width-sm;
+        }
+
+        // Right
+
+        &.fixed-right:not([style*="display: none"]) ~ .main-content {
+          margin-right: $navbar-vertical-width-sm;
+        }
+      }
+    }
+  }
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_mixins.scss

@@ -0,0 +1,16 @@
+// Mixins
+//
+// 
+
+// Utilities
+@import "mixins/breakpoints";
+@import "mixins/badge";
+
+// Components
+// ...
+
+// Skins
+// ...
+
+// Layout
+// ...

data/lib/viniBaxter/sass/desk_front/dashkit/_modal.scss

@@ -0,0 +1,101 @@
+//
+// modal.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap Overrides =======================
+//
+
+.modal-dialog {
+
+  // When fading in the modal, animate it to slide down
+  .modal.fade & {
+    transform: translate(0, -150px);
+  }
+
+  .modal.show & {
+    transform: translate(0, 0);
+  }
+}
+
+.modal-header .close {
+  margin: -1.5rem -1.5rem -1.5rem auto;
+}
+
+
+//
+// Dashkit ===================================
+//
+
+// Modal dialog vertical
+//
+// Creates a vertically aligned version of the modal dialog
+
+.modal-dialog-vertical {
+  height: 100%;
+  max-width: $modal-dialog-vertical-width;
+  margin: 0;
+
+  .modal-content {
+    height: inherit;
+    border-width: 0 $modal-content-border-width 0 0;
+    border-radius: 0;
+  }
+
+  .modal-header {
+    border-radius: inherit;
+  }
+
+  .modal-body {
+    height: inherit;
+    overflow-y: auto;
+  }
+}
+
+.modal.fade .modal-dialog-vertical {
+  transform: translateX(-100%);
+}
+
+.modal.show .modal-dialog-vertical {
+  transform: translateX(0);
+}
+
+
+// Positioning
+
+.modal.fixed-right {
+  padding-right: 0 !important;
+}
+
+.modal.fixed-right .modal-dialog-vertical {
+  margin-left: auto;
+}
+
+.modal.fixed-right.fade .modal-dialog-vertical {
+  transform: translateX(100%);
+}
+
+.modal.fixed-right.show .modal-dialog-vertical {
+  transform: translateX(0);
+}
+
+
+// Modal card
+
+.modal-card {
+  margin-bottom: 0;
+
+  .card-body {
+    max-height: $modal-card-body-max-height;
+    overflow-y: auto;
+  }
+}
+
+
+// Modal tabs
+
+.modal-header-tabs {
+  margin-top: -$modal-header-padding-y;
+  margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width});
+}