vuexy 0.1.0

data/app/assets/stylesheets/vuexy/bootstrap-extended/_utilities.scss

@@ -0,0 +1,450 @@
+// ================================================================================================
+// 	File Name: utilities.scss
+// 	Description: Utility classes provides color, width, position & background etc..
+// 				 related customization.
+// 	----------------------------------------------------------------------------------------------
+// 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+// 	Author: PIXINVENT
+// 	Author URL: http://www.themeforest.net/user/pixinvent
+// ================================================================================================
+
+// Sizes Variable for height and width mixins
+$sizes-px: (
+  // in px
+  50: 50px,
+  100: 100px,
+  150: 150px,
+  200: 200px,
+  250: 250px,
+  300: 300px,
+  350: 350px,
+  400: 405px,
+  450: 455px,
+  500: 500px,
+  550: 550px,
+  600: 600px,
+  650: 650px,
+  700: 700px,
+  750: 750px,
+  800: 800px
+) !default;
+
+$sizes-per: (
+  // in %
+  5: 5%,
+  10: 10%,
+  15: 15%,
+  20: 20%,
+  25: 25%,
+  30: 30%,
+  35: 35%,
+  40: 40%,
+  45: 45%,
+  50: 50%,
+  55: 55%,
+  60: 60%,
+  65: 65%,
+  70: 70%,
+  75: 75%,
+  80: 80%,
+  85: 85%,
+  90: 90%,
+  95: 95%
+) !default;
+
+//--------------- Text ---------------
+//------------------------------------
+
+// Font Size
+//----------
+//small
+.font-small-1 {
+  font-size: 0.7rem !important;
+
+  // for Feather SVG icons as we are using base size as 1rem
+  @at-root svg#{&} {
+    height: 0.7rem !important;
+    width: 0.7rem !important;
+  }
+}
+.font-small-2 {
+  font-size: 0.8rem !important;
+  @at-root svg#{&} {
+    height: 0.8rem !important;
+    width: 0.8rem !important;
+  }
+}
+.font-small-3 {
+  font-size: 0.9rem !important;
+  @at-root svg#{&} {
+    height: 0.9rem !important;
+    width: 0.9rem !important;
+  }
+}
+.font-small-4 {
+  font-size: 1rem !important;
+  @at-root svg#{&} {
+    height: 1rem !important;
+    width: 1rem !important;
+  }
+}
+//medium
+.font-medium-1 {
+  font-size: 1.1rem !important;
+  @at-root svg#{&} {
+    height: 1.1rem !important;
+    width: 1.1rem !important;
+  }
+}
+.font-medium-2 {
+  font-size: 1.2rem !important;
+  @at-root svg#{&} {
+    height: 1.2rem !important;
+    width: 1.2rem !important;
+  }
+}
+.font-medium-3 {
+  font-size: 1.3rem !important;
+  @at-root svg#{&} {
+    height: 1.3rem !important;
+    width: 1.3rem !important;
+  }
+}
+.font-medium-4 {
+  font-size: 1.4rem !important;
+  @at-root svg#{&} {
+    height: 1.4rem !important;
+    width: 1.4rem !important;
+  }
+}
+.font-medium-5 {
+  font-size: 1.5rem !important;
+  @at-root svg#{&} {
+    height: 1.5rem !important;
+    width: 1.5rem !important;
+  }
+}
+//large
+.font-large-1 {
+  font-size: 2rem !important;
+  @at-root svg#{&} {
+    height: 2rem !important;
+    width: 2rem !important;
+  }
+}
+.font-large-2 {
+  font-size: 3rem !important;
+  @at-root svg#{&} {
+    height: 3rem !important;
+    width: 3rem !important;
+  }
+}
+.font-large-3 {
+  font-size: 4rem !important;
+  @at-root svg#{&} {
+    height: 4rem !important;
+    width: 4rem !important;
+  }
+}
+.font-large-4 {
+  font-size: 5rem !important;
+  @at-root svg#{&} {
+    height: 5rem !important;
+    width: 5rem !important;
+  }
+}
+.font-large-5 {
+  font-size: 6rem !important;
+  @at-root svg#{&} {
+    height: 6rem !important;
+    width: 6rem !important;
+  }
+}
+
+// Line height
+//----------
+.line-height-1 {
+  line-height: 1 !important;
+}
+.line-height-condensed {
+  line-height: 1.5 !important;
+}
+.line-height-inherit {
+  line-height: inherit !important;
+}
+
+// Transform
+//----------
+.rotate-45 {
+  transform: rotate(45deg);
+}
+.rotate-45-inverse {
+  transform: rotate(-45deg);
+}
+.rotate-90 {
+  transform: rotate(90deg);
+}
+.rotate-90-inverse {
+  transform: rotate(-90deg);
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+.rotate-180-inverse {
+  transform: rotate(-180deg);
+}
+
+//-------------- Borders --------------
+//-------------------------------------
+
+// Border width - 2px
+.border-2 {
+  border-width: 2px !important;
+}
+.border-top-2 {
+  border-top-width: 2px !important;
+}
+.border-bottom-2 {
+  border-bottom-width: 2px !important;
+}
+.border-start-2 {
+  border-left-width: 2px !important;
+}
+.border-end-2 {
+  border-right-width: 2px !important;
+}
+
+// Border width - 3px
+.border-3 {
+  border-width: 3px !important;
+}
+.border-top-3 {
+  border-top-width: 3px !important;
+}
+.border-bottom-3 {
+  border-bottom-width: 3px !important;
+}
+.border-start-3 {
+  border-left-width: 3px !important;
+}
+.border-end-3 {
+  border-right-width: 3px !important;
+}
+
+// Shapes radius : Round / Square
+.round {
+  @include border-radius(1.5rem);
+}
+.square {
+  @include border-radius(0);
+}
+
+//-------------- Sizing --------------
+//------------------------------------
+
+// Width && Height
+.fit {
+  max-width: 100% !important;
+}
+.half-width {
+  width: 50% !important;
+}
+.full-width {
+  width: 100% !important;
+}
+.full-height {
+  height: 100% !important;
+}
+
+// height & width in PX
+@each $name, $size in $sizes-px {
+  .height-#{$name} {
+    height: $size !important;
+  }
+
+  .width-#{$name} {
+    width: $size !important;
+  }
+}
+
+// height & width in %
+@each $name, $size in $sizes-per {
+  .height-#{$name}-per {
+    height: $size !important;
+  }
+
+  .width-#{$name}-per {
+    width: $size !important;
+  }
+}
+
+//------------- Overflow -------------
+//------------------------------------
+.overflow-visible {
+  overflow: visible;
+}
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow: scroll;
+}
+.overflow-y-scroll {
+  overflow: scroll;
+}
+
+//-------------- Cursor --------------
+//------------------------------------
+.cursor-pointer {
+  cursor: pointer;
+}
+.cursor-move {
+  cursor: move;
+}
+.cursor-default {
+  cursor: default;
+}
+.cursor-progress {
+  cursor: progress;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+//-------------- Z-index --------------
+//-------------------------------------
+.zindex-1 {
+  z-index: 1 !important;
+}
+.zindex-2 {
+  z-index: 2 !important;
+}
+.zindex-3 {
+  z-index: 3 !important;
+}
+.zindex-4 {
+  z-index: 4 !important;
+}
+.zindex-0 {
+  z-index: 0 !important;
+}
+.zindex-minus-1 {
+  z-index: -1 !important;
+}
+.zindex-minus-2 {
+  z-index: -2 !important;
+}
+.zindex-minus-3 {
+  z-index: -3 !important;
+}
+.zindex-minus-4 {
+  z-index: -4 !important;
+}
+
+//------------ Box Shadow ------------
+//------------------------------------
+.box-shadow-0 {
+  box-shadow: none !important;
+}
+.box-shadow-1 {
+  box-shadow: 0 2px 5px 0 rgba($black, 0.16), 0 2px 10px 0 rgba($black, 0.12);
+}
+.box-shadow-2 {
+  box-shadow: 0 8px 17px 0 rgba($black, 0.2), 0 6px 20px 0 rgba($black, 0.19);
+}
+.box-shadow-3 {
+  box-shadow: 0 12px 15px 0 rgba($black, 0.24), 0 17px 50px 0 rgba($black, 0.19);
+}
+.box-shadow-4 {
+  box-shadow: 0 16px 28px 0 rgba($black, 0.22), 0 25px 55px 0 rgba($black, 0.21);
+}
+.box-shadow-5 {
+  box-shadow: 0 27px 24px 0 rgba($black, 0.2), 0 40px 77px 0 rgba($black, 0.22);
+}
+.box-shadow-6 {
+  box-shadow: 0 4px 8px 0 rgba($black, 0.12), 0 2px 4px 0 rgba($black, 0.08);
+}
+
+//-------------- Outline --------------
+//-------------------------------------
+.outline-none {
+  outline: none !important;
+}
+
+//-------------- Lists --------------
+//-----------------------------------
+.list-style-inside {
+  list-style: inside;
+}
+.list-style-circle {
+  list-style: circle;
+}
+.list-style-square {
+  list-style: square;
+}
+
+//--------- Background Image ---------
+//------------------------------------
+.bg-cover {
+  background-size: cover !important;
+}
+.background-repeat {
+  background-repeat: repeat !important;
+}
+.background-no-repeat {
+  background-repeat: no-repeat !important;
+}
+
+//-------------- Icons --------------
+//-----------------------------------
+.icon-bg-circle {
+  color: $white;
+  padding: 0.5rem;
+  border-radius: 50%;
+}
+.icon-left {
+  margin-right: 0.5rem;
+}
+.icon-right {
+  margin-right: 0.5rem;
+}
+
+// Used for blockUI
+.blockOverlay {
+  z-index: 1050 !important;
+}
+.blockElement,
+.blockPage {
+  z-index: 1051 !important;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+a {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+//Tables
+//--------------------------
+.table-middle {
+  td {
+    vertical-align: middle;
+  }
+}
+
+//SVG
+//--------------------------
+.fill-current {
+  fill: currentColor;
+}
+
+//Cursor
+//--------------------------
+.pointer-events-none {
+  pointer-events: none;
+}