@posiwise/shared-components 0.0.9 → 0.0.11

package/assets/scss/dashboard/_helper.scss

@@ -0,0 +1,736 @@
+// ================================================================================================
+// 	File Name: helper
+// 	Description: Helper classes provides color, width, position & background etc..
+// 				 related customiztion.
+// ================================================================================================
+
+// Content helpers
+// -------------------------
+// Display
+
+.display-inline {
+    display: inline !important;
+}
+
+.display-block {
+    display: block !important;
+}
+
+.display-inline-block {
+    display: inline-block !important;
+}
+
+.display-hidden {
+    display: none !important;
+}
+
+.display-table-cell {
+    display: table-cell !important;
+}
+
+// Position
+
+.position-fixed {
+    position: fixed !important;
+}
+
+.position-relative {
+    position: relative !important;
+}
+
+.position-absolute {
+    position: absolute !important;
+}
+
+.position-static {
+    position: static !important;
+}
+
+.position-top-0 {
+    top: 0;
+}
+
+.position-right-0 {
+    right: 0;
+}
+
+.position-bottom-0 {
+    bottom: 0;
+}
+
+.position-left-0 {
+    left: 0;
+}
+
+// Edges
+.no-edge-top {
+    top: 0 !important;
+}
+
+.no-edge-bottom {
+    bottom: 0 !important;
+}
+
+.no-edge-left {
+    left: 0 !important;
+}
+
+.no-edge-right {
+    right: 0 !important;
+}
+
+// Cursors
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-move {
+    cursor: move;
+}
+
+.cursor-default {
+    cursor: default;
+}
+
+.cursor-progress {
+    cursor: progress;
+}
+
+.cursor-not-allowed {
+    cursor: not-allowed;
+}
+
+// Vertical alignment
+.valign-top {
+    vertical-align: top !important;
+}
+
+.valign-middle {
+    vertical-align: middle !important;
+}
+
+.valign-bottom {
+    vertical-align: bottom !important;
+}
+
+.valign-baseline {
+    vertical-align: baseline !important;
+}
+
+.valign-text-top {
+    vertical-align: top !important;
+}
+
+.valign-text-bottom {
+    vertical-align: text-bottom !important;
+}
+
+// Overflow
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.overflow-visible {
+    overflow: visible;
+}
+
+.overflow-auto {
+    overflow: auto;
+}
+
+.overflow-scroll {
+    overflow: scroll;
+}
+
+.overflow-x-scroll {
+    overflow: scroll;
+}
+
+.overflow-y-scroll {
+    overflow: scroll;
+}
+
+// Lists
+.bullets-inside {
+    list-style: inside;
+}
+
+.list-style-circle {
+    list-style: circle;
+}
+
+.list-style-square {
+    list-style: square;
+}
+
+.list-style-icons {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 10px;
+
+    > li i {
+        float: left;
+        margin: 5px 12px 0 0;
+        width: 1em;
+    }
+}
+
+// Borders
+// -------------------------
+
+// Add borders
+.border {
+    border: 1px solid;
+}
+
+.border-top {
+    border-top: 1px solid;
+}
+
+.border-bottom {
+    border-bottom: 1px solid;
+}
+
+.border-left {
+    border-left: 1px solid;
+}
+
+.border-right {
+    border-right: 1px solid;
+}
+
+// Border widths
+
+// Med - 2px
+.border-2 {
+    border-width: 2px !important;
+}
+
+.border-top-2 {
+    border-top-width: 2px !important;
+}
+
+.border-bottom-2 {
+    border-bottom-width: 2px !important;
+}
+
+.border-left-2 {
+    border-left-width: 2px !important;
+}
+
+.border-right-2 {
+    border-right-width: 2px !important;
+}
+
+// Large - 3px
+.border-3 {
+    border-width: 3px !important;
+}
+
+.border-top-3 {
+    border-top-width: 3px !important;
+}
+
+.border-bottom-3 {
+    border-bottom-width: 3px !important;
+}
+
+.border-left-3 {
+    border-left-width: 3px !important;
+}
+
+.border-right-3 {
+    border-right-width: 3px !important;
+}
+
+// Remove borders
+.no-border {
+    border: 0 !important;
+}
+
+.no-border-top {
+    border-top: 0 !important;
+}
+
+.no-border-bottom {
+    border-bottom: 0 !important;
+}
+
+.no-border-left {
+    border-left: 0 !important;
+}
+
+.no-border-right {
+    border-right: 0 !important;
+}
+
+// No border radious
+.no-radius {
+    border-radius: unset !important;
+}
+
+.no-border-top-radius {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+
+.no-border-bottom-radius {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.no-border-top-left-radius {
+    border-top-left-radius: 0 !important;
+}
+
+.no-border-top-right-radius {
+    border-top-right-radius: 0 !important;
+}
+
+.no-border-bottom-left-radius {
+    border-bottom-left-radius: 0 !important;
+}
+
+.no-border-bottom-right-radius {
+    border-bottom-right-radius: 0 !important;
+}
+
+// Box Shadow
+
+.box-shadow-0 {
+    box-shadow: none !important;
+}
+
+.box-shadow-1 {
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
+}
+
+.box-shadow-2 {
+    box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+}
+
+.box-shadow-3 {
+    box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
+}
+
+.box-shadow-4 {
+    box-shadow: 0 16px 28px 0 rgb(0 0 0 / 22%), 0 25px 55px 0 rgb(0 0 0 / 21%);
+}
+
+.box-shadow-5 {
+    box-shadow: 0 27px 24px 0 rgb(0 0 0 / 20%), 0 40px 77px 0 rgb(0 0 0 / 22%);
+}
+
+// Sizing
+// -------------------------
+
+// Width && Height
+
+.fit {
+    max-width: 100% !important;
+}
+
+.half-width {
+    width: 50% !important;
+}
+
+.full-width {
+    width: 100% !important;
+}
+
+.full-height {
+    height: 100% !important;
+}
+
+.full-height-vh {
+    height: 100vh !important;
+}
+
+// Fixed widths
+.width-50 {
+    width: 50px !important;
+}
+
+.width-100 {
+    width: 100px !important;
+}
+
+.width-150 {
+    width: 150px !important;
+}
+
+.width-200 {
+    width: 200px !important;
+}
+
+.width-250 {
+    width: 250px !important;
+}
+
+.width-300 {
+    width: 300px !important;
+}
+
+.width-350 {
+    width: 350px !important;
+}
+
+.width-400 {
+    width: 400px !important;
+}
+
+.width-450 {
+    width: 450px !important;
+}
+
+.width-500 {
+    width: 500px !important;
+}
+
+.width-550 {
+    width: 550px !important;
+}
+
+.width-600 {
+    width: 600px !important;
+}
+
+.width-650 {
+    width: 650px !important;
+}
+
+.width-700 {
+    width: 700px !important;
+}
+
+.width-750 {
+    width: 750px !important;
+}
+
+.width-800 {
+    width: 800px !important;
+}
+
+// Width in %
+.width-5-per {
+    width: 5% !important;
+}
+
+.width-10-per {
+    width: 10% !important;
+}
+
+.width-15-per {
+    width: 15% !important;
+}
+
+.width-20-per {
+    width: 20% !important;
+}
+
+.width-25-per {
+    width: 25% !important;
+}
+
+.width-30-per {
+    width: 30% !important;
+}
+
+.width-35-per {
+    width: 35% !important;
+}
+
+.width-40-per {
+    width: 40% !important;
+}
+
+.width-45-per {
+    width: 45% !important;
+}
+
+.width-50-per {
+    width: 50% !important;
+}
+
+.width-55-per {
+    width: 55% !important;
+}
+
+.width-60-per {
+    width: 60% !important;
+}
+
+.width-65-per {
+    width: 65% !important;
+}
+
+.width-70-per {
+    width: 70% !important;
+}
+
+.width-75-per {
+    width: 75% !important;
+}
+
+.width-80-per {
+    width: 80% !important;
+}
+
+.width-90-per {
+    width: 90% !important;
+}
+
+.width-95-per {
+    width: 95% !important;
+}
+
+// Fixed Height in px
+.height-0 {
+    height: 0 !important;
+}
+
+.height-50 {
+    height: 50px !important;
+}
+
+.height-75 {
+    height: 75px !important;
+}
+
+.height-100 {
+    height: 100px !important;
+}
+
+.height-150 {
+    height: 150px !important;
+}
+
+.height-200 {
+    height: 200px !important;
+}
+
+.height-250 {
+    height: 250px !important;
+}
+
+.height-300 {
+    height: 300px !important;
+}
+
+.height-350 {
+    height: 350px !important;
+}
+
+.height-400 {
+    height: 400px !important;
+}
+
+.height-450 {
+    height: 450px !important;
+}
+
+.height-500 {
+    height: 500px !important;
+}
+
+.height-550 {
+    height: 550px !important;
+}
+
+.height-600 {
+    height: 600px !important;
+}
+
+.height-650 {
+    height: 650px !important;
+}
+
+.height-700 {
+    height: 700px !important;
+}
+
+.height-750 {
+    height: 750px !important;
+}
+
+.height-800 {
+    height: 800px !important;
+}
+
+// Fixed Height in %
+
+.height-5-per {
+    height: 5% !important;
+}
+
+.height-10-per {
+    height: 10% !important;
+}
+
+.height-15-per {
+    height: 15% !important;
+}
+
+.height-20-per {
+    height: 20% !important;
+}
+
+.height-25-per {
+    height: 25% !important;
+}
+
+.height-30-per {
+    height: 30% !important;
+}
+
+.height-35-per {
+    height: 35% !important;
+}
+
+.height-40-per {
+    height: 40% !important;
+}
+
+.height-45-per {
+    height: 45% !important;
+}
+
+.height-50-per {
+    height: 50% !important;
+}
+
+.height-55-per {
+    height: 55% !important;
+}
+
+.height-60-per {
+    height: 60% !important;
+}
+
+.height-65-per {
+    height: 65% !important;
+}
+
+.height-70-per {
+    height: 70% !important;
+}
+
+.height-75-per {
+    height: 75% !important;
+}
+
+.height-80-per {
+    height: 80% !important;
+}
+
+// Line height
+.line-height-0 {
+    line-height: 0 !important;
+}
+
+.line-height-1 {
+    line-height: 1 !important;
+}
+
+.line-height-1p5 {
+    line-height: 1.5 !important;
+}
+
+.line-height-2 {
+    line-height: 2 !important;
+}
+
+// Transformations
+
+.rotate-45 {
+    transform: rotate(45deg);
+}
+
+.rotate-45-inverse {
+    transform: rotate(-45deg);
+}
+
+.rotate-90 {
+    transform: rotate(45deg);
+}
+
+.rotate-90-inverse {
+    transform: rotate(-45deg);
+}
+
+.rotate-180 {
+    transform: rotate(45deg);
+}
+
+.rotate-180-inverse {
+    transform: rotate(-45deg);
+}
+
+// Spinner classes
+.spinner {
+    animation: spin 1s linear infinite;
+    display: inline-block;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner-reverse {
+    animation: spin-reverse 1s linear infinite;
+    display: inline-block;
+}
+
+@keyframes spin-reverse {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+
+// Image
+// Background Image
+.bg-cover {
+    background-size: cover !important;
+}
+
+.bg-repeat {
+    background-repeat: repeat !important;
+}
+
+.bg-no-repeat {
+    background-repeat: no-repeat !important;
+}
+
+// Extra large
+.img-xl {
+    height: 64px !important;
+    width: 64px !important;
+}
+
+// Large
+.img-lg {
+    height: 44px !important;
+    width: 44px !important;
+}
+
+// Small
+.img-sm {
+    height: 36px !important;
+    width: 36px !important;
+}
+
+// Mini
+.img-xs {
+    height: 32px !important;
+    width: 32px !important;
+}