viniBaxter-desk_front 0.2.0

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

@@ -0,0 +1,298 @@
+// 
+// card.scss
+// Extended from Bootstrap
+//
+
+// 
+// Bootstrap Overrides =====================================
+//
+
+.card {
+  margin-bottom: $card-margin-bottom;
+  border-color: $card-outline-color;
+  box-shadow: $card-box-shadow;
+}
+
+.card > * {
+  flex-shrink: 0;
+}
+
+// Header
+
+.card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: $card-header-height;
+  padding-top: $card-spacer-y / 2;
+  padding-bottom: $card-spacer-y / 2;
+
+  > *:first-child {
+    flex: 1;
+  }
+}
+
+// Title
+
+.card-title {
+  margin-bottom: $card-spacer-y / 2;
+}
+
+
+//
+// Dashkit ===================================
+//
+
+// Card header
+//
+// Make sure the card header is always the same height with its content
+// centered vertically
+
+.card-header-title {
+  margin-bottom: 0;
+}
+
+.card-header-tabs {
+  margin-top: -$card-spacer-y / 2;
+  margin-bottom: -$card-spacer-y / 2;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.card-header-tabs .nav-link {
+  padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
+  padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
+}
+
+
+// Card table
+//
+// Make sure the card table content is aligned with the rest of the card content
+
+.card-table {
+  margin-bottom: 0;
+}
+
+.card-table thead th {
+  border-top-width: 0;
+}
+
+.card-table thead th,
+.card-table tbody td {
+
+  &:first-child {
+    padding-left: $card-spacer-x !important;
+  }
+
+  &:last-child {
+    padding-right: $card-spacer-x !important;
+  }
+}
+
+.card > .card-table:first-child,
+.card > .table-responsive:first-child > .card-table {
+
+  > thead, > tbody, > tfoot {
+
+    &:first-child {
+
+      > tr:first-child {
+
+        > th, > td {
+
+          &:first-child {
+            border-top-left-radius: $card-border-radius;
+          }
+
+          &:last-child {
+            border-top-right-radius: $card-border-radius;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// Card avatar
+//
+// Moves card avatar up by 50%
+
+.card-avatar {
+  display: block !important;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: $card-spacer-y;
+}
+
+.card-avatar-top {
+  margin-top: -($card-spacer-x + $avatar-size-base / 2);
+}
+
+.card-avatar-top.avatar-xs {
+  margin-top: -($card-spacer-x + $avatar-size-xs / 2);
+}
+
+.card-avatar-top.avatar-sm {
+  margin-top: -($card-spacer-x + $avatar-size-sm / 2);
+}
+
+.card-avatar-top.avatar-lg {
+  margin-top: -($card-spacer-x + $avatar-size-lg / 2);
+}
+
+.card-avatar-top.avatar-xl {
+  margin-top: -($card-spacer-x + $avatar-size-xl / 2);
+}
+
+.card-avatar-top.avatar-xxl {
+  margin-top: -($card-spacer-x + $avatar-size-xxl / 2);
+}
+
+
+// Card dropdown
+//
+// Places dropdowns in the top right corner
+
+.card-dropdown {
+  position: absolute;
+  top: $card-spacer-x;
+  right: $card-spacer-x;
+}
+
+
+// Card inactive
+//
+// Adds dashed border and removes background
+
+.card-inactive {
+  border-color: $border-color;
+  border-style: dashed;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+
+// Card flush
+//
+// Removes borders and background
+
+.card-flush {
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+
+// Card sizing
+//
+// Affects card padding
+
+.card-sm .card-body,
+.card-sm .card-footer-boxed {
+  padding: $card-spacer-x-sm;
+}
+
+
+// Card header flush
+//
+// Removes border between card header and body and adjusts spacing
+
+.card-header-flush {
+  border-bottom: 0;
+}
+
+.card-header-flush + .card-body {
+  padding-top: 0;
+}
+
+
+// Card fill
+//
+// Fills the whole available space to fit the height of the neighboring card
+
+.card-fill {
+  height: calc(100% - #{$card-margin-bottom});
+}
+
+.card-fill .card-body {
+  flex-grow: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+// Responsive
+
+.card-fill {
+
+  @each $breakpoint, $value in $grid-breakpoints {
+
+    &-#{$breakpoint} {
+
+      @include media-breakpoint-up(#{$breakpoint}) {
+        height: calc(100% - #{$card-margin-bottom});
+
+        .card-body {
+          flex-grow: 0;
+          margin-top: auto;
+          margin-bottom: auto;
+        }
+      }
+    }
+  }
+}
+
+
+// Card adjust
+//
+// Limits the height to the height of the neighboring card and adds a scrollbar to the card body
+
+.card-adjust {
+  height: 0;
+  min-height: 100%;
+}
+
+.card-adjust .card {
+  height: calc(100% - #{$card-margin-bottom});
+}
+
+.card-adjust .card-body {
+  height: calc(100% - #{$card-header-height});
+  overflow-y: auto;
+}
+
+// Responsive
+
+.card-adjust {
+
+  @each $breakpoint, $value in $grid-breakpoints {
+
+    &-#{$breakpoint} {
+
+      @include media-breakpoint-up(#{$breakpoint}) {
+        height: 0;
+        min-height: 100%;
+
+        .card {
+          height: calc(100% - #{$card-margin-bottom});
+        }
+
+        .card-body {
+          height: calc(100% - #{$card-header-height});
+          overflow-y: auto;
+        }
+      }
+    }
+  }
+}
+
+
+// Card footer boxed
+
+.card-footer-boxed {
+  padding-right: 0;
+  padding-bottom: $card-spacer-x;
+  padding-left: 0;
+  margin-left: $card-spacer-x;
+  margin-right: $card-spacer-x;
+}

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

@@ -0,0 +1,79 @@
+//
+// chart.scss
+// Dashkit component
+//
+
+// Chart
+//
+// General styles
+
+.chart {
+  position: relative;
+  height: $chart-height;
+}
+
+.chart.chart-appended {
+  height: calc(#{$chart-height} - #{$chart-legend-height});
+}
+
+.chart-sm {
+  height: $chart-height-sm;
+}
+
+.chart-sm.chart-appended {
+  height: calc(#{$chart-height-sm} - #{$chart-legend-height});
+}
+
+
+// Sparkline
+
+.chart-sparkline {
+  width: $chart-sparkline-width;
+  height: $chart-sparkline-height;
+}
+
+
+// Legend
+//
+// Custom legend
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  margin-top: $chart-legend-margin-top;
+  font-size: $chart-legend-font-size;
+  text-align: center;
+  color: $chart-legend-color;
+}
+
+.chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+
+  + .chart-legend-item {
+    margin-left: 1rem;
+  }
+}
+
+.chart-legend-indicator {
+  display: inline-block;
+  width: .5rem;
+  height: .5rem;
+  margin-right: 0.375rem;
+  border-radius: 50%;
+}
+
+
+// Tooltip
+//
+// Custom tooltip
+
+#chart-tooltip {
+  z-index: 0;
+}
+
+#chart-tooltip .arrow {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateX(-.5rem);
+}

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

@@ -0,0 +1,36 @@
+//
+// checklist.scss
+// Dashkit component
+//
+
+.checklist {
+  outline: none;
+}
+
+.checklist-control {
+  display: flex;
+  flex-wrap: nowrap;
+  outline: none;
+  user-select: none;
+}
+
+.checklist-control .custom-control-input:checked ~ .custom-control-caption {
+  text-decoration: line-through;
+  color: $checklist-control-checked-color;
+}
+
+.checklist-control + .checklist-control {
+  margin-top: $checklist-control-spacer;
+}
+
+.checklist-control:first-child[style*="display: none"] + .checklist-control {
+  margin-top: 0;
+}
+
+.checklist-control.draggable-mirror {
+  z-index: $zindex-fixed;
+}
+
+.checklist-control.draggable-source--is-dragging {
+  opacity: .2;
+}

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

@@ -0,0 +1,10 @@
+//
+// close.scss
+// Extended from Bootstrap
+//
+
+// Small
+
+.close-sm {
+  font-size: $close-font-size-sm;
+}

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

@@ -0,0 +1,16 @@
+//
+// code.scss
+// Extended from Bootstrap
+//
+
+// 
+// Dashkit =================================
+//
+
+// Highlight
+//
+// Hightlight.js overrides
+
+.highlight {
+  padding: 0;
+}

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

@@ -0,0 +1,34 @@
+//
+// comment.scss
+// Dashkit component
+//
+
+// Comment
+//
+// General styles
+
+.comment {
+  margin-bottom: $comment-margin-bottom;
+}
+
+.comment-body {
+  display: inline-block;
+  padding: $comment-body-padding-y $comment-body-padding-x;
+  background-color: $comment-body-bg;
+  border-radius: $comment-body-border-radius;
+}
+
+.comment-time {
+  display: block;
+  margin-bottom: $comment-time-margin-bottom;
+  font-size: $comment-time-font-size;
+  color: $comment-time-color;
+}
+
+.comment-text {
+  font-size: $comment-body-font-size;
+}
+
+.comment-text:last-child {
+  margin-bottom: 0;
+}

data/lib/viniBaxter/sass/desk_front/dashkit/_custom-forms.scss

@@ -0,0 +1,37 @@
+//
+// custom-forms.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap Overrides ===================================
+//
+
+// Switch
+
+.custom-switch {
+  min-height: $custom-switch-height;
+
+  .custom-control-label {
+
+    &::before {
+      top: 0;
+      height: $custom-switch-height;
+      border-radius: $custom-switch-height / 2;
+    }
+
+    &::after {
+      top: $custom-switch-spacing;
+      left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width;
+      background-color: $custom-switch-indicator-bg;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+
+    &::after {
+      background-color: $custom-switch-indicator-active-bg;
+      transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+// Extended Bootstrap components
+
+@import 'mixins';
+@import 'alert';
+@import 'badge';
+@import 'breadcrumb';
+@import 'buttons';
+@import 'card';
+@import 'close';
+@import 'code';
+@import 'custom-forms';
+@import 'dropdowns';
+@import 'forms';
+@import 'jumbotron';
+@import 'list-group';
+@import 'modal';
+@import 'nav';
+@import 'navbar';
+@import 'popover';
+@import 'progress';
+@import 'reboot';
+@import 'root';
+@import 'tables';
+@import 'toasts';
+@import 'type';
+@import 'utilities';
+
+// Dashkit only components
+
+@import 'avatar';
+@import 'chart';
+@import 'comment';
+@import 'checklist';
+@import 'header';
+@import 'icon';
+@import 'kanban';
+@import 'main-content';
+@import 'vendors';

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

@@ -0,0 +1,124 @@
+//
+// dropdowns.scss
+// Extended from Bootstrap
+// 
+
+//
+// Bootstrap overrides ==================================
+//
+
+// Dropdown arrows
+//
+// Replace original arrows with Feather icons
+
+.dropdown-toggle {
+
+  &::after {
+    width: auto;
+    height: auto;
+    border: none !important;
+    vertical-align: middle;
+    font-family: 'Feather';
+  }
+
+  &::after {
+    content: '\e92e';
+  }
+}
+
+.dropup > .dropdown-toggle {
+
+  &::after {
+    content: '\e931';
+  }
+}
+
+.dropright > .dropdown-toggle {
+
+  &::after {
+    content: '\e930';
+  }
+}
+
+.dropleft > .dropdown-toggle {
+
+  &::before {
+    content: '\e92f';
+    width: auto;
+    height: auto;
+    border: none !important;
+    vertical-align: middle;
+    font-family: 'Feather';
+  }
+}
+
+
+// Dropdown toggle
+//
+// Right align arrows
+
+.dropdown-item.dropdown-toggle {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+// Dropdown menu animation
+//
+// Animate dropdown menu appearance
+
+.dropdown-menu {
+  animation: dropdownMenu .15s;
+}
+
+@keyframes dropdownMenu {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+
+
+//
+// Dashkit ===================================
+//
+
+
+// Dropdown ellipses
+//
+// Styles the ellipses icon and removes the dropdown arrow
+
+.dropdown-ellipses {
+  font-size: $font-size-lg;
+  color: $gray-400;
+}
+
+.dropdown-ellipses::after {
+  display: none;
+}
+
+
+// Dropdown card
+//
+// Makes the dropdown menu act like a card
+
+.dropdown-menu-card {
+  min-width: $dropdown-card-min-width;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: $card-bg;
+  border-color: $dropdown-card-border-color;
+
+  .card-header {
+    min-height: $dropdown-card-header-min-height;
+  }
+
+  .card-body {
+    max-height: $dropdown-card-body-max-height;
+    overflow-y: auto;
+  }
+}