mazer-rails 0.1.1 → 0.1.2

data/assets/stylesheets/app.scss

@@ -0,0 +1,20 @@
+// Import mazer Variables
+@import "./variables";
+
+// Bootstrap + Icons
+@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap-icons/font/bootstrap-icons";
+
+// Fix icon placement
+body .bi::before, [class^=bi-]::before, [class*=" bi-"]::before {
+    vertical-align: sub;
+}
+
+// Import fonts
+@import "./fonts";
+
+// Perfect Scrollbar
+@import "~perfect-scrollbar/css/perfect-scrollbar.css";
+
+// Mazer CSS
+@import "./mazer";

data/assets/stylesheets/bootstrap.scss

@@ -0,0 +1,58 @@
+/*!
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+// Override variables
+@import "variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
+
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
+// scss-docs-end import-stack

data/assets/stylesheets/components/_alert.scss

@@ -0,0 +1,43 @@
+
+.alert {
+    border:none;
+    .alert-heading {
+    }
+    p {
+        margin-bottom: 0;
+    }
+    button.close {
+        padding: .75rem;
+        line-height: .75;
+    }
+    .alert-heading {
+        margin-left: .4rem;
+        & + p {
+            margin-left: .4rem;
+        }
+    }
+}
+@each $key, $value in $alert-colors {
+    .alert-#{$key} {
+        background-color: map-get($value, 'background-color');
+        color: map-get($value, 'text-color');
+        
+        a {
+            color: #fff;
+            font-weight: bold;
+        }
+    }
+}
+@each $key, $value in $theme-colors-light {
+    .alert-light-#{$key} {
+        @if($dark-mode == true) {
+            background-color: lighten(saturate($value,30%),10%);
+            color: saturate(shade-color($value, 60%), 40%);
+            border: 1px solid tint-color($value, 10%);
+        }
+        @else {
+            background-color: saturate($value,10%);
+            color: saturate(shade-color($value, 60%), 40%);
+        }
+    }
+}

data/assets/stylesheets/components/_avatar.scss

@@ -0,0 +1,78 @@
+.avatar {
+    display: inline-flex;
+    border-radius: 50%;
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+
+    
+    .avatar-content {
+        width: 32px;
+        height: 32px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: .875rem;
+        svg, i {
+            color: #fff;
+            font-size: 1rem;
+            height: 1rem;
+        }
+        i:before {
+            vertical-align: top;
+        }
+    }
+
+    img {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+
+    .avatar-status {
+        width: .7rem;
+        height: .7rem;
+        position: absolute;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        bottom: 0;
+        right: 0;
+    }
+
+    &.avatar-sm {
+        .avatar-content, img {
+            width: 24px;
+            height: 24px;
+            font-size: .8rem;
+        }
+    }
+    &.avatar-md {
+        .avatar-content, img {
+            width: 32px;
+            height: 32px;
+            font-size: .8rem;
+        }
+    }
+    &.avatar-md2 {
+        .avatar-content, img {
+            width: 40px;
+            height: 40px;
+            font-size: .8rem;
+        }
+    }
+    &.avatar-lg {
+        .avatar-content, img {
+            width: 48px;
+            height: 48px;
+            font-size: 1.2rem;
+        }
+    }
+    &.avatar-xl {
+        .avatar-content, img {
+            width: 60px;
+            height: 60px;
+            font-size: 1.4rem;
+        }
+    }
+}

data/assets/stylesheets/components/_badge.scss

@@ -0,0 +1,20 @@
+.btn {
+    .badge {
+        border-radius: 50%;
+        margin-left: 5px;
+        &.bg-transparent {
+            background-color: rgba(255,255,255,.25) !important;
+            color: #fff;
+        }
+    }
+}
+
+.badge-notification {
+    position: absolute;
+    right: 20px;
+    padding: 3px;
+}
+
+a.badge:hover {
+    
+}

data/assets/stylesheets/components/_breadcrumb.scss

@@ -0,0 +1,10 @@
+.breadcrumb {
+    &.breadcrumb-right {
+        justify-content: flex-end;
+        margin-top: $breadcrumb-margin-top;
+    }
+    &.breadcrumb-center {
+        justify-content: center;
+        margin-top: $breadcrumb-margin-top;
+    }
+}

data/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+
+.btn {
+    i,svg {
+        width: 1rem;
+        height: 1rem;
+    } 
+    &.icon {
+        padding: .4rem .6rem;
+        svg {
+            width: 1rem;
+            height: 1rem;
+        }
+        &.icon-left {
+            svg {
+                margin-right: 3px;
+            }
+        }
+        &.icon-right {
+            svg {
+                margin-left: 3px;
+            }
+        }
+    }
+    &.btn-outline-white {
+        color: #fff;
+        border-color: #fff;
+        &:hover {
+            color: #333;
+            background-color: #fff;
+        }
+    }
+    
+    @each $key, $value in $theme-colors-light {
+        &.btn-light-#{$key} {
+            background-color: $value;
+            color: darken($value,80%)
+        }
+    }
+    
+    @each $key, $value in $btn-colors {
+        &.btn-#{$key} {
+            color: map.get($btn-colors, "key", "text-color");
+        }
+    }
+}
+.btn-block {
+    width: 100%;
+}
+.btn-group {
+    &:not(.dropdown) .btn:not([class*="btn-"]) {
+        border: 1px solid #DFE3E7;
+    }
+    & > .btn {
+        border-radius: .267rem;
+    }
+}
+.buttons {
+    .btn {
+        margin: 0 10px 10px 0;
+    }
+}

data/assets/stylesheets/components/_card.scss

@@ -0,0 +1,126 @@
+.card {
+    margin-bottom: 2.2rem;
+    border: none;
+
+    &.card-statistic {
+        box-shadow: 1px 2px 5px  rgba(#2FAAF4, .5);
+        background: linear-gradient(to bottom, #25a6f1, #54b9ff);
+        .card-title {
+            text-transform: uppercase;
+            color: rgba(255, 255, 255, 0.651);
+            letter-spacing: .8px;
+            font-weight: 400;
+            font-size: 1.3rem;
+            margin-bottom: 0;
+            margin-top: 5px;
+        }
+        .card-right {
+            p {
+                font-size: 1.5rem;
+                color: #fff;
+                margin-bottom: 0;
+            }
+            span.green {
+                color: rgb(111, 255, 111)
+            }
+            span.red {
+                color: rgb(255, 121, 121)
+            }
+        }
+        .chart-wrapper {
+            height: 100px;
+        }
+    }
+    .card-header {
+        border: none;
+        
+        h4 {
+            font-size: $card-title-font-size;
+            font-weight: bold;
+        }
+        & ~ .card-body {
+            padding-top: 0;
+        }
+    }
+    .card-content {
+        position: relative;
+    }
+    .card-body {
+        padding: $card-cap-padding-y $card-cap-padding-x;
+    }
+    .card-heading {
+        color: #555;
+        font-size: 1.5rem;
+    }
+    .card-img-overlay {
+        background-color: rgba(0,0,0,.6);
+
+        p {
+            color: #eee;
+        }
+
+        .card-title {
+            color: #fff;
+        }
+    }
+    
+
+}
+.pricing {
+    .card {
+        box-shadow: none;
+        margin-bottom: 0;
+        border-right: 1px  solid $gray-200;
+        box-shadow: 0 10px 10px $gray-200;
+    }
+    h1 {
+        text-align: center;
+        font-size: 4rem;
+        margin-bottom: 3rem;
+    }
+    .card-header {
+        .card-title {
+            font-size: 2rem !important;
+            margin-bottom: 0;
+        }
+        p {
+            font-size: .8rem;
+        }
+    }
+    ul {
+        li {
+            list-style: none;
+            margin-bottom: .5rem;
+            i, svg {
+                width: 1rem;
+                color: map-get($theme-colors, 'success');
+                font-size: 1rem;
+                margin-right: 7px;
+            }
+        }
+    }
+    .card-highlighted {
+        background-color: map-get($theme-colors, 'primary');
+        padding-top: 20px;
+        padding-bottom: 20px;
+        .card-header, .card-body {
+            background-color: map-get($theme-colors, 'primary');
+            color: $card-bg;
+        }
+        ul {
+            li {
+                i, svg {
+                    color: $teal-400;
+                }
+                color: #fff;
+            }
+        }
+        .card-footer {
+            background-color: map-get($theme-colors, 'primary');
+        }
+        .card-title {
+            color: #fff;
+            font-size: 1.8rem;
+        }
+    }
+}

data/assets/stylesheets/components/_carousel.scss

@@ -0,0 +1,6 @@
+.carousel-inner {
+    border-radius: .7rem;
+}
+.carousel-caption h5 {
+    color: $carousel-caption-color
+}

data/assets/stylesheets/components/_divider.scss

@@ -0,0 +1,37 @@
+.divider {
+    display: block;
+    text-align: center;
+    overflow: hidden;
+    margin: 1rem 0;
+    .divider-text {
+        position: relative;
+        display: inline-block;
+        padding: 0 1rem;
+        background-color: $divider-text-bg;
+        &:before, &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            width: 9999px;
+            border-top: 1px solid $divider-bg;
+        }
+        &:before {
+            right: 100%;
+        }
+        &:after {
+            left: 100%;
+        }
+    }
+    &.divider-left .divider-text {
+        float: left;
+    }
+    &.divider-left-center .divider-text {
+        left: -25%;
+    }
+    &.divider-right-center .divider-text {
+        left: 25%;
+    }
+    &.divider-right .divider-text {
+        float: right;
+    }
+}

data/assets/stylesheets/components/_dropdowns.scss

@@ -0,0 +1,24 @@
+.btn:not(.btn-light):not([class^="btn-outline-"]) .dropdown-toggle:after {
+    color: #fff;
+}
+.dropdown-menu-large {
+    min-width: 16rem;
+}
+.dropdown-menu {
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
+}
+.dropdown-item {
+    transition: all .5s;
+}
+.dropdown-menu-end.show {
+    top: 100%;
+    right: 0;
+}
+.dropdown {
+    .avatar {
+        margin-right: .6rem;
+    }
+}
+.user-dropdown-status, .user-dropdown-name {
+    margin: 0;
+}

data/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,213 @@
+.form-group {
+    margin-bottom: .7rem;
+    label {
+        color: $form-label-color;
+        font-weight: 600;
+    }
+    small {
+        font-size: .7rem;
+    }
+
+    &.with-title {
+        position: relative;
+        label {
+            position: absolute;
+            top: 0;
+            left: 0;
+            padding: 5px;
+            font-size: .6rem;
+            background-color: $form-textarea-title-bg;
+            width: 100%;
+            border-width: 1px 1px 0 1px;
+            border-style: solid;
+            border-color: lighten($input-border-color, 5%);
+            transition: $input-transition;
+        }
+        .form-control, dataTable-input {
+            padding-top: 2rem;
+            &:focus ~ label {
+                border-left: 1px solid map-get($theme-colors, 'primary');
+                border-top: 1px solid map-get($theme-colors, 'primary');
+                border-right: 1px solid map-get($theme-colors, 'primary');
+            }
+        }
+    }
+
+    &[class*="has-icon-"] {
+        &.has-icon-left {
+            .form-control {
+                padding-left: 2.5rem;
+            }
+            .form-control-icon {
+                left: 0;
+            }
+        }
+        &.has-icon-right {
+            .form-control {
+                padding-right: 2.5rem;
+            }
+            .form-control-icon {
+                right: 0;
+            }
+        }
+        .form-control {            
+            &:focus ~ .form-control-icon {
+                i, svg {
+                    color: #5A8DEE
+                }
+            }
+            &.form-control-xl {
+                padding-left: 3rem;
+                & ~ .form-control-icon i{
+                    font-size: 1.6rem;
+                    &:before {
+                        color: #a6a8aa
+                    }
+                }
+            }
+        }
+        .form-control-icon {
+            position: absolute;
+            padding: 0 .6rem;
+            i, svg {
+                width: 1.2rem;
+                color: $input-placeholder-color;
+                font-size: 1.2rem;
+                &:before {
+                    vertical-align: sub;
+                }
+            }
+        }
+
+    }
+
+    &.mandatory .form-label:first-child:after {
+      content: ' *';
+      color: $form-feedback-invalid-color;
+    }
+
+    &.is-invalid * {
+      color: $form-feedback-invalid-color;
+      border-color: $form-feedback-invalid-color;
+    }
+}
+.form-control {
+    & ~ .form-control-icon {
+        top: .28rem;
+    }
+    &.form-control-lg {
+        padding: .55rem 1rem;
+        font-size: 1.05rem;
+        & ~ .form-control-icon {
+            top: .55rem;
+        }
+    }
+    &.form-control-xl {
+        padding: .85rem 1rem;
+        font-size: 1.2rem;
+        & ~ .form-control-icon {
+            top: .55rem;
+        }
+    }
+}
+.form-check {
+    .form-check-input {
+        &[class*="bg-"] {
+            border: 0;
+        }
+        &:focus {
+            box-shadow: none;
+        }
+        @each $key, $value in $theme-colors {
+            &.form-check-#{$key} {
+                background-color: $value;
+                border-color: $value;
+
+                &:not(:checked) {
+                    background-color: transparent;
+                    border: 1px solid $gray-400;
+                }
+
+                &.form-check-glow {
+                    box-shadow: 0 0 5px lighten($value,10%);
+                    &:not(:checked) {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+
+    &.form-check-sm {
+        .form-check-input {
+            width: .9rem;
+            height: .9rem;
+            margin-top: .3em;
+        }
+        label {
+            font-size: .7rem;
+            
+        }
+    }
+    &.form-check-lg {
+        .form-check-input {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-top: .3em;
+        }
+        label {
+            font-size: 1rem;
+        }
+    }
+
+    @each $key, $value in $theme-colors {
+        &.form-check-#{$key} {
+            .form-check-input {
+                background-color: $value;
+                border-color: $value
+            }
+        }
+    }
+}
+
+// Vendor: Datatable
+.dataTable-input {
+    min-height: calc(1.5em + 0.934rem + 2px);
+    padding: 0.467rem 0.6rem;
+    font-size: 0.9025rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #555252;
+    background-color: white;
+    background-clip: padding-box;
+    border: 1px solid #DFE3E7;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:focus {
+        color: #555252;
+        background-color: $input-focus-bg;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+    }
+}
+
+// Vendor: Choices
+.choices__inner {
+    background-color: $choices-bg;
+    border-color: $choices-border-color;
+}
+.choices__input {
+    background-color: $choices-bg !important;
+    color: $choices-input-color;
+}
+.choices__list {
+    background-color: $choices-dropdown-bg;
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+    background-color: $choices-highlight-bg;
+}