diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index e24b25e..d05ea0f 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,7 +13,3 @@ *= require_tree . *= require_self */ - -body { - background-color: rgb(21, 32, 43); -} diff --git a/app/assets/stylesheets/characters.scss b/app/assets/stylesheets/characters.scss deleted file mode 100644 index 459c569..0000000 --- a/app/assets/stylesheets/characters.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the characters controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss deleted file mode 100644 index 072f44e..0000000 --- a/app/assets/stylesheets/home.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the home controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/protected.scss b/app/assets/stylesheets/protected.scss deleted file mode 100644 index cdae182..0000000 --- a/app/assets/stylesheets/protected.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the protected controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/rp_world.scss b/app/assets/stylesheets/rp_world.scss deleted file mode 100644 index c68ad24..0000000 --- a/app/assets/stylesheets/rp_world.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the RpWorld controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/wow_mounts.scss b/app/assets/stylesheets/wow_mounts.scss deleted file mode 100644 index 440adcd..0000000 --- a/app/assets/stylesheets/wow_mounts.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the wow_mounts controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/wow_pets.scss b/app/assets/stylesheets/wow_pets.scss deleted file mode 100644 index b3d9dd5..0000000 --- a/app/assets/stylesheets/wow_pets.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the wow_pets controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/wow_reputations.scss b/app/assets/stylesheets/wow_reputations.scss deleted file mode 100644 index e8f8968..0000000 --- a/app/assets/stylesheets/wow_reputations.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the WowReputation controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/images/.keep b/app/javascript/images/.keep similarity index 100% rename from app/assets/images/.keep rename to app/javascript/images/.keep diff --git a/app/javascript/images/bg-pattern.png b/app/javascript/images/bg-pattern.png new file mode 100644 index 0000000..8e3e77f Binary files /dev/null and b/app/javascript/images/bg-pattern.png differ diff --git a/app/javascript/images/favicon.ico b/app/javascript/images/favicon.ico new file mode 100644 index 0000000..f5507a4 Binary files /dev/null and b/app/javascript/images/favicon.ico differ diff --git a/app/javascript/images/layouts/layout-1.png b/app/javascript/images/layouts/layout-1.png new file mode 100644 index 0000000..58fd31e Binary files /dev/null and b/app/javascript/images/layouts/layout-1.png differ diff --git a/app/javascript/images/layouts/layout-2.png b/app/javascript/images/layouts/layout-2.png new file mode 100644 index 0000000..2a9be95 Binary files /dev/null and b/app/javascript/images/layouts/layout-2.png differ diff --git a/app/javascript/images/layouts/layout-3.png b/app/javascript/images/layouts/layout-3.png new file mode 100644 index 0000000..6b0d075 Binary files /dev/null and b/app/javascript/images/layouts/layout-3.png differ diff --git a/app/javascript/images/layouts/layout-4.png b/app/javascript/images/layouts/layout-4.png new file mode 100644 index 0000000..13f51f3 Binary files /dev/null and b/app/javascript/images/layouts/layout-4.png differ diff --git a/app/javascript/images/layouts/layout-5.png b/app/javascript/images/layouts/layout-5.png new file mode 100644 index 0000000..0de44c6 Binary files /dev/null and b/app/javascript/images/layouts/layout-5.png differ diff --git a/app/javascript/images/layouts/layout-6.png b/app/javascript/images/layouts/layout-6.png new file mode 100644 index 0000000..c7568d6 Binary files /dev/null and b/app/javascript/images/layouts/layout-6.png differ diff --git a/app/javascript/images/logo-dark.png b/app/javascript/images/logo-dark.png new file mode 100644 index 0000000..cbe7d74 Binary files /dev/null and b/app/javascript/images/logo-dark.png differ diff --git a/app/javascript/images/logo-light.png b/app/javascript/images/logo-light.png new file mode 100644 index 0000000..0e8a6bf Binary files /dev/null and b/app/javascript/images/logo-light.png differ diff --git a/app/javascript/images/logo.png b/app/javascript/images/logo.png new file mode 100644 index 0000000..9576d68 Binary files /dev/null and b/app/javascript/images/logo.png differ diff --git a/app/javascript/images/logo_sm.png b/app/javascript/images/logo_sm.png new file mode 100644 index 0000000..89151d2 Binary files /dev/null and b/app/javascript/images/logo_sm.png differ diff --git a/app/javascript/images/logo_sm_dark.png b/app/javascript/images/logo_sm_dark.png new file mode 100644 index 0000000..e6c3580 Binary files /dev/null and b/app/javascript/images/logo_sm_dark.png differ diff --git a/app/javascript/images/startup.svg b/app/javascript/images/startup.svg new file mode 100644 index 0000000..b4a7ac0 --- /dev/null +++ b/app/javascript/images/startup.svg @@ -0,0 +1 @@ +Business_SVG \ No newline at end of file diff --git a/app/javascript/images/waves.png b/app/javascript/images/waves.png new file mode 100644 index 0000000..cecb67a Binary files /dev/null and b/app/javascript/images/waves.png differ diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 671b032..75f695e 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -8,12 +8,18 @@ import "@hotwired/turbo-rails" import * as ActiveStorage from "@rails/activestorage" import "channels" +// Additional JS import "bootstrap" -import "../stylesheets/application" +import "select2" +import "moment" +// sass +import "../stylesheets/application" import "@fortawesome/fontawesome-free/css/all" import "flag-icon-css/css/flag-icon" +const images = require.context("../images", true); + document.addEventListener("turbolinks:load", () => { $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 19b0ca9..47ffc79 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -1 +1,21 @@ +//Core files +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "config/saas/variables"; +@import "config/saas/custom-variables"; @import "~bootstrap/scss/bootstrap"; + +// Structure +@import "custom/structure/general"; +@import "custom/structure/left-menu"; +@import "custom/structure/topbar"; +@import "custom/structure/right-sidebar"; +@import "custom/structure/page-head"; +@import "custom/structure/footer"; +// horizontal nav +@import "custom/structure/horizontal-nav"; + +@import "custom/components/mixins"; +@import "custom/components/accordions"; +@import "custom/components/dropdown"; +@import "custom/components/nav"; diff --git a/app/javascript/stylesheets/config/saas/_custom-variables.scss b/app/javascript/stylesheets/config/saas/_custom-variables.scss new file mode 100644 index 0000000..031e932 --- /dev/null +++ b/app/javascript/stylesheets/config/saas/_custom-variables.scss @@ -0,0 +1,112 @@ +// +// custom-variables.scss +// + + +// Background left-sidebar +$bg-leftbar: linear-gradient(135deg, #8f75da 0%, #727cf5 60%); +$bg-leftbar-light: #ffffff; +$bg-leftbar-dark: #313a46; +$bg-topnav: #313a46; + +// Deatched left sidenav +$bg-detached-leftbar: #ffffff; + +// Topbar Height +$topbar-height: 70px; + +// Logo Display +$logo-light-display: block; +$logo-dark-display: none; +// Logo auth display +$logo-auth-light-display: none; +$logo-auth-dark-display: block; + +// Leftbar width +$leftbar-width: 260px; + +// Boxed Layout +$boxed-layout-width: 1300px; +$boxed-layout-bg: #ffffff; + +// Menu item colors (Default-dark) +$menu-item: #cedce4; +$menu-item-hover: #ffffff; +$menu-item-active: #ffffff; + +// Menu item colors (light) +$menu-item-light: #6c757d; +$menu-item-light-hover: #727cf5; +$menu-item-light-active: #727cf5; + +// Detached Menu item colors +$menu-item-dark: #6c757d; +$menu-item-dark-hover: #727cf5; +$menu-item-dark-active: #727cf5; + +// Dark sidenav Menu item color +$sidebar-dark-menu-item: #8391a2; +$sidebar-dark-menu-item-hover: #bccee4; +$sidebar-dark-menu-item-active: #ffffff; + +// Rightbar Width +$rightbar-width: 280px; +$rightbar-bg: #ffffff; +$rightbar-title-bg: #313a46; +$rightbar-title-color: #ffffff; +$rightbar-title-btn-bg: #444e5a; +$rightbar-title-btn-color: #ffffff; +$rightbar-overlay-bg: #37404a; + +// Topbar Background +$bg-topbar: #ffffff; +$bg-topbar-dark: #313a46; + +// Topbar Search +$bg-topbar-search: #f1f3fa; +$bg-topbar-dark-search: #3c4655; + +// Helpbox +$help-box-light-bg: rgba(255,255,255,0.07); +$help-box-dark-bg: #727cf5; + +// Font weight +$font-weight-semibold: 600; + +// Dropdown Large +$dropdown-lg-width: 320px; + +// Page title color +$page-title-color: inherit; + +// Nav-pill background +$nav-pills-bg: #eef2f7; + +// Custom-accordion +$custom-accordion-title-color: #313a46; + +// Dragula demo background +$dragula-bg: #f7f9fb; + +// Form wizard header background +$form-wizard-header-bg: #eef2f7; + +// Text title color +$text-title-color: #6c757d; + +// card Loader background +$card-loader-bg: #313a46; + +// Chat widget +$chat-primary-user-bg: #fef5e4; +$chat-secondary-user-bg: #f1f3fa; + +// User authentication Background +$auth-bg: #ffffff; +$auth-bg-pattern-img: url("../images/bg-pattern-light.svg"); + +// Apex chart +$apex-grid-color: #f9f9fd; + +// Hero +$hero-bg: linear-gradient(to bottom,#8669ed,#727cf5); diff --git a/app/javascript/stylesheets/config/saas/_variables.scss b/app/javascript/stylesheets/config/saas/_variables.scss new file mode 100644 index 0000000..a8b2ed3 --- /dev/null +++ b/app/javascript/stylesheets/config/saas/_variables.scss @@ -0,0 +1,1606 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + +// Color system + +// scss-docs-start gray-color-variables +$white: #fff !default; +$gray-100: #f1f3fa; +$gray-200: #eef2f7; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #98a6ad; +$gray-700: #6c757d; +$gray-800: #343a40 !default; +$gray-900: #313a46; +$black: #000 !default; +// scss-docs-end gray-color-variables + +// fusv-disable +// scss-docs-start gray-colors-map +$grays: ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 +); +// scss-docs-end gray-colors-map +// fusv-enable + +// scss-docs-start color-variables +$blue: #2c8ef8; +$indigo: #727cf5; +$purple: #6b5eae; +$pink: #ff679b; +$red: #fa5c7c; +$orange: #fd7e14; +$yellow: #ffbc00; +$green: #0acf97; +$teal: #02a8b5; +$cyan: #39afd1; +// scss-docs-end color-variables + +// scss-docs-start colors-map +$colors: ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 +); +// scss-docs-end colors-map + +// scss-docs-start theme-color-variables +$primary: $indigo; +$secondary: $gray-700; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-200; +$dark: $gray-900; +// scss-docs-end theme-color-variables + +// scss-docs-start theme-colors-map +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +); +// scss-docs-end theme-colors-map + +// scss-docs-start theme-colors-rgb +$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); +// scss-docs-end theme-colors-rgb + +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 1.8; + +// Customize the light and dark text colors for use in our color contrast function. +$color-contrast-dark: $gray-900; +$color-contrast-light: $white; + +// fusv-disable +$blue-100: tint-color($blue, 80%); +$blue-200: tint-color($blue, 60%); +$blue-300: tint-color($blue, 40%); +$blue-400: tint-color($blue, 20%); +$blue-500: $blue; +$blue-600: shade-color($blue, 20%); +$blue-700: shade-color($blue, 40%); +$blue-800: shade-color($blue, 60%); +$blue-900: shade-color($blue, 80%); + +$indigo-100: tint-color($indigo, 80%); +$indigo-200: tint-color($indigo, 60%); +$indigo-300: tint-color($indigo, 40%); +$indigo-400: tint-color($indigo, 20%); +$indigo-500: $indigo; +$indigo-600: shade-color($indigo, 20%); +$indigo-700: shade-color($indigo, 40%); +$indigo-800: shade-color($indigo, 60%); +$indigo-900: shade-color($indigo, 80%); + +$purple-100: tint-color($purple, 80%); +$purple-200: tint-color($purple, 60%); +$purple-300: tint-color($purple, 40%); +$purple-400: tint-color($purple, 20%); +$purple-500: $purple; +$purple-600: shade-color($purple, 20%); +$purple-700: shade-color($purple, 40%); +$purple-800: shade-color($purple, 60%); +$purple-900: shade-color($purple, 80%); + +$pink-100: tint-color($pink, 80%); +$pink-200: tint-color($pink, 60%); +$pink-300: tint-color($pink, 40%); +$pink-400: tint-color($pink, 20%); +$pink-500: $pink; +$pink-600: shade-color($pink, 20%); +$pink-700: shade-color($pink, 40%); +$pink-800: shade-color($pink, 60%); +$pink-900: shade-color($pink, 80%); + +$red-100: tint-color($red, 80%); +$red-200: tint-color($red, 60%); +$red-300: tint-color($red, 40%); +$red-400: tint-color($red, 20%); +$red-500: $red; +$red-600: shade-color($red, 20%); +$red-700: shade-color($red, 40%); +$red-800: shade-color($red, 60%); +$red-900: shade-color($red, 80%); + +$orange-100: tint-color($orange, 80%); +$orange-200: tint-color($orange, 60%); +$orange-300: tint-color($orange, 40%); +$orange-400: tint-color($orange, 20%); +$orange-500: $orange; +$orange-600: shade-color($orange, 20%); +$orange-700: shade-color($orange, 40%); +$orange-800: shade-color($orange, 60%); +$orange-900: shade-color($orange, 80%); + +$yellow-100: tint-color($yellow, 80%); +$yellow-200: tint-color($yellow, 60%); +$yellow-300: tint-color($yellow, 40%); +$yellow-400: tint-color($yellow, 20%); +$yellow-500: $yellow; +$yellow-600: shade-color($yellow, 20%); +$yellow-700: shade-color($yellow, 40%); +$yellow-800: shade-color($yellow, 60%); +$yellow-900: shade-color($yellow, 80%); + +$green-100: tint-color($green, 80%); +$green-200: tint-color($green, 60%); +$green-300: tint-color($green, 40%); +$green-400: tint-color($green, 20%); +$green-500: $green; +$green-600: shade-color($green, 20%); +$green-700: shade-color($green, 40%); +$green-800: shade-color($green, 60%); +$green-900: shade-color($green, 80%); + +$teal-100: tint-color($teal, 80%); +$teal-200: tint-color($teal, 60%); +$teal-300: tint-color($teal, 40%); +$teal-400: tint-color($teal, 20%); +$teal-500: $teal; +$teal-600: shade-color($teal, 20%); +$teal-700: shade-color($teal, 40%); +$teal-800: shade-color($teal, 60%); +$teal-900: shade-color($teal, 80%); + +$cyan-100: tint-color($cyan, 80%); +$cyan-200: tint-color($cyan, 60%); +$cyan-300: tint-color($cyan, 40%); +$cyan-400: tint-color($cyan, 20%); +$cyan-500: $cyan; +$cyan-600: shade-color($cyan, 20%); +$cyan-700: shade-color($cyan, 40%); +$cyan-800: shade-color($cyan, 60%); +$cyan-900: shade-color($cyan, 80%); +$blues: ( + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900 +); + +$indigos: ( + "indigo-100": $indigo-100, + "indigo-200": $indigo-200, + "indigo-300": $indigo-300, + "indigo-400": $indigo-400, + "indigo-500": $indigo-500, + "indigo-600": $indigo-600, + "indigo-700": $indigo-700, + "indigo-800": $indigo-800, + "indigo-900": $indigo-900 +); + +$purples: ( + "purple-100": $purple-200, + "purple-200": $purple-100, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple-500, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900 +); + +$pinks: ( + "pink-100": $pink-100, + "pink-200": $pink-200, + "pink-300": $pink-300, + "pink-400": $pink-400, + "pink-500": $pink-500, + "pink-600": $pink-600, + "pink-700": $pink-700, + "pink-800": $pink-800, + "pink-900": $pink-900 +); + +$reds: ( + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900 +); + +$oranges: ( + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900 +); + +$yellows: ( + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900 +); + +$greens: ( + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900 +); + +$teals: ( + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900 +); + +$cyans: ( + "cyan-100": $cyan-100, + "cyan-200": $cyan-200, + "cyan-300": $cyan-300, + "cyan-400": $cyan-400, + "cyan-500": $cyan-500, + "cyan-600": $cyan-600, + "cyan-700": $cyan-700, + "cyan-800": $cyan-800, + "cyan-900": $cyan-900 +); +// fusv-enable + +// Characters which are escaped by the escape-svg function +$escaped-characters: ( + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +); + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true; +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: true; +$enable-reduced-motion: true; +$enable-smooth-scroll: true; +$enable-grid-classes: true; +$enable-cssgrid: false; +$enable-button-pointers: true; +$enable-rfs: true; +$enable-validation-icons: true; +$enable-negative-margins: true; +$enable-deprecation-messages: true; +$enable-important-utilities: true; + +// Prefix for :root CSS variables + +$variable-prefix: bs-; + +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +// scss-docs-start variable-gradient +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); +// scss-docs-end variable-gradient + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +// scss-docs-start spacer-variables-maps +$spacer: 1.5rem; +$spacers: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, +); + +$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null); +// scss-docs-end spacer-variables-maps + +// Position +// +// Define the edge positioning anchors of the position utilities. + +// scss-docs-start position-map +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +); +// scss-docs-end position-map + +// Body +// +// Settings for the `` element. + +$body-bg: #fafbfe; +$body-color: $gray-700; +$body-text-align: null; + +// Links +// +// Style anchor elements. + +$link-color: $primary; +$link-decoration: none; +$link-shade-percentage: 15%; +$link-hover-color: shade-color($link-color, 15%); +$link-hover-decoration: null; + +$stretched-link-pseudo-element: after; +$stretched-link-z-index: 1; + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem; + + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px +); +// scss-docs-end grid-breakpoints + +// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px +); +// scss-docs-end container-max-widths + +// @include _assert-ascending($container-max-widths, "$container-max-widths"); + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12; +$grid-gutter-width: 24px; +$grid-row-columns: 6; + +$gutters: $spacers; + +// Container padding + +$container-padding-x: $grid-gutter-width * .5; + + +// Components +// +// Define common padding and border radius sizes and more. + +// scss-docs-start border-variables +$border-width: 1px; +$border-widths: ( + 0: 0, + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +); + +$border-color: $gray-300; +// scss-docs-end border-variables + +// scss-docs-start border-radius-variables +$border-radius: .25rem; +$border-radius-sm: .2rem; +$border-radius-lg: .3rem; +$border-radius-pill: 50rem; +// scss-docs-end border-radius-variables + +// scss-docs-start box-shadow-variables +$box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15); +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); +$box-shadow-lg: 0 0 45px 0 rgba(0, 0, 0, 0.12); +$box-shadow-inset: inset 0 1px 2px rgba($black, .075); +// scss-docs-end box-shadow-variables + +$component-active-color: $white; +$component-active-bg: $primary; + +// scss-docs-start caret-variables +$caret-width: .25em; +$caret-vertical-align: $caret-width * .85; +$caret-spacing: $caret-width * .85; +// scss-docs-end caret-variables + +$transition-base: all .2s ease-in-out; +$transition-fade: opacity .15s linear; +// scss-docs-start collapse-transition +$transition-collapse: height .35s ease; +$transition-collapse-width: width .35s ease; +// scss-docs-end collapse-transition + +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) +); +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// scss-docs-start font-variables +// stylelint-disable value-keyword-case +$font-family-sans-serif: 'Nunito', sans-serif; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +// stylelint-enable value-keyword-case +$font-family-base: $font-family-sans-serif; +$font-family-code: var(--#{$variable-prefix}font-monospace); + +// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins +// $font-size-base effects the font size of the body text +$font-size-root: null; +$font-size-base: 0.9rem; // Assumes the browser default, typically `16px` +$font-size-sm: $font-size-base - .025; +$font-size-lg: $font-size-base * 1.390; + +$font-weight-lighter: lighter; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 700; +$font-weight-bolder: bolder; + +$font-weight-base: $font-weight-normal; + +$line-height-base: 1.5; +$line-height-sm: 1.25; +$line-height-lg: 2; + +$h1-font-size: 2.25rem; +$h2-font-size: 1.875rem; +$h3-font-size: 1.5rem; +$h4-font-size: 1.125rem; +$h5-font-size: 0.9375rem; +$h6-font-size: 0.75rem; +// scss-docs-end font-variables + +// scss-docs-start font-sizes +$font-sizes: ( + 1: $h1-font-size, + 2: $h2-font-size, + 3: $h3-font-size, + 4: $h4-font-size, + 5: $h5-font-size, + 6: $h6-font-size +); +// scss-docs-end font-sizes + +// scss-docs-start headings-variables +$headings-margin-bottom: $spacer * .5; +$headings-font-family: null; +$headings-font-style: null; +$headings-font-weight: 500; +$headings-line-height: 1.1; +$headings-color: null; +// scss-docs-end headings-variables + +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +); + +$display-font-weight: 300; +$display-line-height: $headings-line-height; +// scss-docs-end display-headings + +// scss-docs-start type-variables +$lead-font-size: $font-size-base * 1.25; +$lead-font-weight: 300; + +$small-font-size: 0.75rem; + +$sub-sup-font-size: .75em; + +$text-muted: $gray-600; + +$initialism-font-size: $small-font-size; + +$blockquote-margin-y: $spacer; +$blockquote-font-size: $font-size-base * 1.25; +$blockquote-footer-color: $gray-600; +$blockquote-footer-font-size: $small-font-size; + +$hr-margin-y: $spacer - 0.5rem; +$hr-color: inherit; +$hr-height: $border-width; +$hr-opacity: .25; + +$legend-margin-bottom: .5rem; +$legend-font-size: 1.5rem; +$legend-font-weight: null; + +$mark-padding: .2em; + +$dt-font-weight: $font-weight-bold; + +$nested-kbd-font-weight: $font-weight-bold; + +$list-inline-padding: 6px; + +$mark-bg: #fcf8e3; +// scss-docs-end type-variables + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +// scss-docs-start table-variables +$table-cell-padding-y: .95rem; +$table-cell-padding-x: .95rem; +$table-cell-padding-y-sm: .5rem; +$table-cell-padding-x-sm: .5rem; + +$table-cell-vertical-align: top; + +$table-color: $body-color; +$table-bg: transparent; +$table-accent-bg: transparent; + +$table-th-font-weight: null; + +$table-striped-color: $gray-700; +$table-striped-bg-factor: 1; +$table-striped-bg: rgba($gray-100, $table-striped-bg-factor); + +$table-active-color: $table-color; +$table-active-bg-factor: .4; +$table-active-bg: rgba($gray-300, $table-active-bg-factor); + +$table-hover-color: $table-color; +$table-hover-bg-factor: .075; +$table-hover-bg: $gray-100; + +$table-border-factor: .1; +$table-border-width: $border-width; +$table-border-color: $gray-200; + +$table-striped-order: odd; + +$table-group-separator-color: lighten($gray-300, 5%); + +$table-caption-color: $text-muted; + +$table-bg-scale: -80%; +// scss-docs-end table-variables + +// scss-docs-start table-loop +$table-variants: ( + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, +); +// scss-docs-end table-loop + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +// scss-docs-start input-btn-variables +$input-btn-padding-y: .45rem; +$input-btn-padding-x: .90rem; +$input-btn-font-family: null; +$input-btn-font-size: $font-size-base; +$input-btn-line-height: $line-height-base; + +$input-btn-focus-width: .2rem; +$input-btn-focus-color-opacity: .25; +$input-btn-focus-color: rgba($primary, .25); +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color; + +$input-btn-padding-y-sm: .28rem; +$input-btn-padding-x-sm: .8rem; +$input-btn-font-size-sm: $font-size-sm; + +$input-btn-padding-y-lg: .5rem; +$input-btn-padding-x-lg: 1rem; +$input-btn-font-size-lg: $font-size-lg; + +$input-btn-border-width: $border-width; +// scss-docs-end input-btn-variables + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +// scss-docs-start btn-variables +$btn-padding-y: $input-btn-padding-y; +$btn-padding-x: $input-btn-padding-x; +$btn-font-family: $input-btn-font-family; +$btn-font-size: $input-btn-font-size; +$btn-line-height: $input-btn-line-height; +$btn-white-space: null; // Set to `nowrap` to prevent text wrapping + +$btn-padding-y-sm: $input-btn-padding-y-sm; +$btn-padding-x-sm: $input-btn-padding-x-sm; +$btn-font-size-sm: $input-btn-font-size-sm; + +$btn-padding-y-lg: $input-btn-padding-y-lg; +$btn-padding-x-lg: $input-btn-padding-x-lg; +$btn-font-size-lg: $input-btn-font-size-lg; + +$btn-border-width: $input-btn-border-width; + +$btn-font-weight: $font-weight-normal; +$btn-box-shadow: 0px 2px 6px 0px; // button box shadow +$btn-focus-width: $input-btn-focus-width; +$btn-focus-box-shadow: $input-btn-focus-box-shadow; +$btn-disabled-opacity: .65; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); + +$btn-link-color: $link-color; +$btn-link-hover-color: $link-hover-color; +$btn-link-disabled-color: $gray-500; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: .15rem; +$btn-border-radius-sm: .15rem; +$btn-border-radius-lg: .15rem; + +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$btn-hover-bg-shade-amount: 15%; +$btn-hover-bg-tint-amount: 15%; +$btn-hover-border-shade-amount: 20%; +$btn-hover-border-tint-amount: 10%; +$btn-active-bg-shade-amount: 20%; +$btn-active-bg-tint-amount: 20%; +$btn-active-border-shade-amount: 25%; +$btn-active-border-tint-amount: 10%; +// scss-docs-end btn-variables + +// Forms + +// scss-docs-start form-text-variables +$form-text-margin-top: .25rem; +$form-text-font-size: $small-font-size; +$form-text-font-style: null; +$form-text-font-weight: null; +$form-text-color: $text-muted; +// scss-docs-end form-text-variables + +// scss-docs-start form-label-variables +$form-label-margin-bottom: .5rem; +$form-label-font-size: null; +$form-label-font-style: null; +$form-label-font-weight: null; +$form-label-color: null; +// scss-docs-end form-label-variables + +// scss-docs-start form-input-variables +$input-padding-y: $input-btn-padding-y; +$input-padding-x: $input-btn-padding-x; +$input-font-family: $input-btn-font-family; +$input-font-size: $input-btn-font-size; +$input-font-weight: $font-weight-base; +$input-line-height: $input-btn-line-height; + +$input-padding-y-sm: $input-btn-padding-y-sm; +$input-padding-x-sm: $input-btn-padding-x-sm; +$input-font-size-sm: $input-btn-font-size-sm; + +$input-padding-y-lg: $input-btn-padding-y-lg; +$input-padding-x-lg: $input-btn-padding-x-lg; +$input-font-size-lg: $input-btn-font-size-lg; + +$input-bg: $white; +$input-disabled-bg: $gray-200; +$input-disabled-border-color: null; + +$input-color: $body-color; +$input-border-color: $gray-300; +$input-border-width: 1px; +$input-box-shadow: $box-shadow-inset; + +$input-border-radius: 0.25rem; +$input-border-radius-sm: $border-radius-sm; +$input-border-radius-lg: $border-radius-lg; + +$input-focus-bg: $input-bg; +$input-focus-border-color: shade-color($input-border-color,10%); +$input-focus-color: $input-color; +$input-focus-width: $input-btn-focus-width; +$input-focus-box-shadow: none; + +$input-placeholder-color: $gray-500; +$input-plaintext-color: $body-color; + +$input-height-border: $input-border-width * 2; + +$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); +$input-height-inner-half: add($input-line-height * .5em, $input-padding-y); +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5); + +$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); +$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); +$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); + +$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$form-color-width: 3rem; +// scss-docs-end form-input-variables + +// scss-docs-start form-check-variables +$form-check-input-width: 1.112em; +$form-check-min-height: $font-size-base * $line-height-base; +$form-check-padding-start: $form-check-input-width + .5em; +$form-check-margin-bottom: 0; +$form-check-label-color: null; +$form-check-label-cursor: null; +$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$form-check-input-active-filter: brightness(90%); + +$form-check-input-bg: $white; +$form-check-input-border: 1px solid $gray-300; +$form-check-input-border-radius: .25em; +$form-check-radio-border-radius: 50%; +$form-check-input-focus-border: $input-focus-border-color; +$form-check-input-focus-box-shadow: none; + +$form-check-input-checked-color: $component-active-color; +$form-check-input-checked-bg-color: $component-active-bg; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color; +$form-check-input-checked-bg-image: url("data:image/svg+xml,"); +$form-check-radio-checked-bg-image: url("data:image/svg+xml,"); + +$form-check-input-indeterminate-color: $component-active-color; +$form-check-input-indeterminate-bg-color: $component-active-bg; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,"); + +$form-check-input-disabled-opacity: .5; +$form-check-label-disabled-opacity: $form-check-input-disabled-opacity; +$form-check-btn-check-disabled-opacity: $btn-disabled-opacity; + +$form-check-inline-margin-end: 1rem; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables +$form-switch-color: $gray-300; +$form-switch-width: 2em; +$form-switch-padding-start: $form-switch-width + .5em; +$form-switch-bg-image: url("data:image/svg+xml,"); +$form-switch-border-radius: $form-switch-width; +$form-switch-transition: background-position .15s ease-in-out; + +$form-switch-focus-color: $input-focus-border-color; +$form-switch-focus-bg-image: url("data:image/svg+xml,"); + +$form-switch-checked-color: $component-active-color; +$form-switch-checked-bg-image: url("data:image/svg+xml,"); +$form-switch-checked-bg-position: right center; +// scss-docs-end form-switch-variables + +// scss-docs-start input-group-variables +$input-group-addon-padding-y: $input-padding-y; +$input-group-addon-padding-x: $input-padding-x; +$input-group-addon-font-weight: $input-font-weight; +$input-group-addon-color: $input-color; +$input-group-addon-bg: $gray-200; +$input-group-addon-border-color: $input-border-color; +// scss-docs-end input-group-variables + +// scss-docs-start form-select-variables +$form-select-padding-y: .45rem; +$form-select-padding-x: .90rem; +$form-select-font-family: $input-font-family; +$form-select-font-size: $input-font-size; +$form-select-indicator-padding: 2.5rem; // Extra padding to account for the presence of the background-image based indicator +$form-select-font-weight: $input-font-weight; +$form-select-line-height: $input-line-height; +$form-select-color: $input-color; +$form-select-bg: $input-bg; +$form-select-disabled-color: $gray-600; +$form-select-disabled-bg: $gray-200; +$form-select-disabled-border-color: $input-disabled-border-color; +$form-select-bg-position: right $form-select-padding-x center; +$form-select-bg-size: 16px 12px; // In pixels because image dimensions +$form-select-indicator-color: $gray-800; +$form-select-indicator: url("data:image/svg+xml,"); + +$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; +$form-select-feedback-icon-position: center right $form-select-indicator-padding; +$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half; + +$form-select-border-width: $input-border-width; +$form-select-border-color: $input-border-color; +$form-select-border-radius: $border-radius; +$form-select-box-shadow: none; + +$form-select-focus-border-color: $input-focus-border-color; +$form-select-focus-width: $input-focus-width; +$form-select-focus-box-shadow: none; + +$form-select-padding-y-sm: $input-padding-y-sm; +$form-select-padding-x-sm: $input-padding-x-sm; +$form-select-font-size-sm: $input-font-size-sm; + +$form-select-padding-y-lg: $input-padding-y-lg; +$form-select-padding-x-lg: $input-padding-x-lg; +$form-select-font-size-lg: $input-font-size-lg; + +$form-select-transition: $input-transition; +// scss-docs-end form-select-variables + +// scss-docs-start form-range-variables +$form-range-track-width: 100%; +$form-range-track-height: .5rem; +$form-range-track-cursor: pointer; +$form-range-track-bg: $gray-300; +$form-range-track-border-radius: 1rem; +$form-range-track-box-shadow: $box-shadow-inset; + +$form-range-thumb-width: 1rem; +$form-range-thumb-height: $form-range-thumb-width; +$form-range-thumb-bg: $component-active-bg; +$form-range-thumb-border: 0; +$form-range-thumb-border-radius: 1rem; +$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1); +$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow; +$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge +$form-range-thumb-active-bg: tint-color($component-active-bg, 70%); +$form-range-thumb-disabled-bg: $gray-500; +$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; +// scss-docs-end form-range-variables + +// scss-docs-start form-file-variables +$form-file-button-color: $input-color; +$form-file-button-bg: $input-group-addon-bg; +$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%); +// scss-docs-end form-file-variables + +// scss-docs-start form-floating-variables +$form-floating-height: add(3.5rem, $input-height-border); +$form-floating-line-height: 1.25; +$form-floating-padding-x: $input-padding-x; +$form-floating-padding-y: 1rem; +$form-floating-input-padding-t: 1.625rem; +$form-floating-input-padding-b: .625rem; +$form-floating-label-opacity: .65; +$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); +$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out; +// scss-docs-end form-floating-variables + +// Form validation + +// scss-docs-start form-feedback-variables +$form-feedback-margin-top: $form-text-margin-top; +$form-feedback-font-size: $form-text-font-size; +$form-feedback-font-style: $form-text-font-style; +$form-feedback-valid-color: $success; +$form-feedback-invalid-color: $danger; + +$form-feedback-icon-valid-color: $form-feedback-valid-color; +$form-feedback-icon-valid: url("data:image/svg+xml,"); +$form-feedback-icon-invalid-color: $form-feedback-invalid-color; +$form-feedback-icon-invalid: url("data:image/svg+xml,"); +// scss-docs-end form-feedback-variables + +// scss-docs-start form-validation-states +$form-validation-states: ( + "valid": ( + "color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid + ), + "invalid": ( + "color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid + ) +); +// scss-docs-end form-validation-states + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +// scss-docs-start zindex-stack +$zindex-dropdown: 1000; +$zindex-sticky: 1020; +$zindex-fixed: 1030; +$zindex-offcanvas-backdrop: 1040; +$zindex-offcanvas: 1045; +$zindex-modal-backdrop: 1050; +$zindex-modal: 1055; +$zindex-popover: 1070; +$zindex-tooltip: 1080; +// scss-docs-end zindex-stack + + +// Navs + +// scss-docs-start nav-variables +$nav-link-padding-y: .5rem; +$nav-link-padding-x: 1rem; +$nav-link-font-size: null; +$nav-link-font-weight: null; +$nav-link-color: null; +$nav-link-hover-color: null; +$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; +$nav-link-disabled-color: $gray-600; + +$nav-tabs-border-color: $gray-300; +$nav-tabs-border-width: $border-width; +$nav-tabs-border-radius: $border-radius; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color; +$nav-tabs-link-active-color: shade-color($gray-700, 20%); +$nav-tabs-link-active-bg: $white; +$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg; + +$nav-pills-border-radius: $border-radius; +$nav-pills-link-active-color: $component-active-color; +$nav-pills-link-active-bg: $component-active-bg; +// scss-docs-end nav-variables + + +// Navbar + +// scss-docs-start navbar-variables +$navbar-padding-y: $spacer * .5; +$navbar-padding-x: null; + +$navbar-nav-link-padding-x: .5rem; + +$navbar-brand-font-size: $font-size-lg; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5; +$navbar-brand-margin-end: 1rem; + +$navbar-toggler-padding-y: .25rem; +$navbar-toggler-padding-x: .75rem; +$navbar-toggler-font-size: $font-size-lg; +$navbar-toggler-border-radius: $btn-border-radius; +$navbar-toggler-focus-width: $btn-focus-width; +$navbar-toggler-transition: box-shadow .15s ease-in-out; +// scss-docs-end navbar-variables + +// scss-docs-start navbar-theme-variables +$navbar-dark-color: rgba($white, .55); +$navbar-dark-hover-color: rgba($white, .75); +$navbar-dark-active-color: $white; +$navbar-dark-disabled-color: rgba($white, .25); +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-dark-toggler-border-color: rgba($white, .1); + +$navbar-light-color: shade-color($gray-700,5%); +$navbar-light-hover-color: $gray-800; +$navbar-light-active-color: rgba($black, .9); +$navbar-light-disabled-color: $gray-500; +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-light-toggler-border-color: rgba($black, .1); + +$navbar-light-brand-color: $navbar-light-active-color; +$navbar-light-brand-hover-color: $navbar-light-active-color; +$navbar-dark-brand-color: $navbar-dark-active-color; +$navbar-dark-brand-hover-color: $navbar-dark-active-color; +// scss-docs-end navbar-theme-variables + + +// Dropdowns +// +// Dropdown menu container and contents. + +// scss-docs-start dropdown-variables +$dropdown-min-width: 10rem; +$dropdown-padding-x: 0; +$dropdown-padding-y: .25rem; +$dropdown-spacer: .125rem; +$dropdown-font-size: $font-size-base; +$dropdown-color: $body-color; +$dropdown-bg: $white; +$dropdown-border-color: shade-color($light, 3%); +$dropdown-border-radius: $border-radius; +$dropdown-border-width: $border-width; +$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width); +$dropdown-divider-bg: $dropdown-border-color; +$dropdown-divider-margin-y: $spacer * .5; +$dropdown-box-shadow: $box-shadow; + +$dropdown-link-color: $body-color; +$dropdown-link-hover-color: shade-color($gray-900, 10%); +$dropdown-link-hover-bg: tint-color($gray-100, 22%); + +$dropdown-link-active-color: $dark; +$dropdown-link-active-bg: tint-color($light, 24%); + +$dropdown-link-disabled-color: $gray-600; + +$dropdown-item-padding-y: .375rem; +$dropdown-item-padding-x: $spacer; + +$dropdown-header-color: inherit; +$dropdown-header-padding: .5rem 1.5rem; +// scss-docs-end dropdown-variables + +// scss-docs-start dropdown-dark-variables +$dropdown-dark-color: $gray-300; +$dropdown-dark-bg: $gray-800; +$dropdown-dark-border-color: $dropdown-border-color; +$dropdown-dark-divider-bg: $dropdown-divider-bg; +$dropdown-dark-box-shadow: null; +$dropdown-dark-link-color: $dropdown-dark-color; +$dropdown-dark-link-hover-color: $white; +$dropdown-dark-link-hover-bg: rgba($white, .15); +$dropdown-dark-link-active-color: $dropdown-link-active-color; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg; +$dropdown-dark-link-disabled-color: $gray-500; +$dropdown-dark-header-color: $gray-500; +// scss-docs-end dropdown-dark-variables + + +// Pagination + +// scss-docs-start pagination-variables +$pagination-padding-y: .375rem; +$pagination-padding-x: .75rem; +$pagination-padding-y-sm: .25rem; +$pagination-padding-x-sm: .5rem; +$pagination-padding-y-lg: .75rem; +$pagination-padding-x-lg: 1.5rem; + +$pagination-color: $dark; +$pagination-bg: $white; +$pagination-border-width: $border-width; +$pagination-border-radius: $border-radius; +$pagination-margin-start: -$pagination-border-width; +$pagination-border-color: $gray-300; + +$pagination-focus-color: $link-hover-color; +$pagination-focus-bg: $gray-200; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow; +$pagination-focus-outline: 0; + +$pagination-hover-color: $dark; +$pagination-hover-bg: $gray-200; +$pagination-hover-border-color: $gray-300; + +$pagination-active-color: $component-active-color; +$pagination-active-bg: $component-active-bg; +$pagination-active-border-color: $pagination-active-bg; + +$pagination-disabled-color: $gray-600; +$pagination-disabled-bg: $white; +$pagination-disabled-border-color: $gray-300; + +$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$pagination-border-radius-sm: $border-radius-sm; +$pagination-border-radius-lg: $border-radius-lg; +// scss-docs-end pagination-variables + + +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: .5; +$placeholder-opacity-min: .2; +// scss-docs-end placeholders + +// Cards + +// scss-docs-start card-variables +$card-spacer-y: $spacer; +$card-spacer-x: $spacer; +$card-title-spacer-y: $spacer * .5; +$card-border-width: $border-width; +$card-border-color: rgba($black, .125); +$card-border-radius: $border-radius; +$card-box-shadow: $box-shadow; +$card-inner-border-radius: subtract($card-border-radius, $card-border-width); +$card-cap-padding-y: $card-spacer-y * .5; +$card-cap-padding-x: $card-spacer-x; +$card-cap-bg: $white; +$card-cap-color: null; +$card-height: null; +$card-color: null; +$card-bg: $white; +$card-img-overlay-padding: $spacer - 0.25rem; +$card-group-margin: $grid-gutter-width * .5; +// scss-docs-end card-variables + +// Accordion +// scss-docs-start accordion-variables +$accordion-padding-y: 1rem; +$accordion-padding-x: 1.25rem; +$accordion-color: $body-color; +$accordion-bg: transparent; +$accordion-border-width: $border-width; +$accordion-border-color: rgba($black, .125); +$accordion-border-radius: $border-radius; +$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width); + +$accordion-body-padding-y: $accordion-padding-y; +$accordion-body-padding-x: $accordion-padding-x; + +$accordion-button-padding-y: $accordion-padding-y; +$accordion-button-padding-x: $accordion-padding-x; +$accordion-button-color: $accordion-color; +$accordion-button-bg: $accordion-bg; +$accordion-transition: $btn-transition, border-radius .15s ease; +$accordion-button-active-bg: tint-color($component-active-bg, 90%); +$accordion-button-active-color: shade-color($primary, 10%); + +$accordion-button-focus-border-color: $input-focus-border-color; +$accordion-button-focus-box-shadow: $btn-focus-box-shadow; + +$accordion-icon-width: 1.25rem; +$accordion-icon-color: $accordion-color; +$accordion-icon-active-color: $accordion-button-active-color; +$accordion-icon-transition: transform .2s ease-in-out; +$accordion-icon-transform: rotate(180deg); + +$accordion-button-icon: url("data:image/svg+xml,"); +$accordion-button-active-icon: url("data:image/svg+xml,"); +// scss-docs-end accordion-variables + +// Tooltips + +// scss-docs-start tooltip-variables +$tooltip-font-size: 13px; +$tooltip-max-width: 200px; +$tooltip-color: $gray-100; +$tooltip-bg: $gray-800; +$tooltip-border-radius: 0.2rem; +$tooltip-opacity: .9; +$tooltip-padding-y: .4rem; +$tooltip-padding-x: .8rem; +$tooltip-margin: 0; + +$tooltip-arrow-width: .8rem; +$tooltip-arrow-height: .4rem; +$tooltip-arrow-color: $tooltip-bg; +// scss-docs-end tooltip-variables + +// Form tooltips must come after regular tooltips +// scss-docs-start tooltip-feedback-variables +$form-feedback-tooltip-padding-y: $tooltip-padding-y; +$form-feedback-tooltip-padding-x: $tooltip-padding-x; +$form-feedback-tooltip-font-size: $tooltip-font-size; +$form-feedback-tooltip-line-height: null; +$form-feedback-tooltip-opacity: $tooltip-opacity; +$form-feedback-tooltip-border-radius: $tooltip-border-radius; +// scss-docs-start tooltip-feedback-variables + + +// Popovers + +// scss-docs-start popover-variables +$popover-font-size: $font-size-sm; +$popover-bg: $white; +$popover-max-width: 276px; +$popover-border-width: $border-width; +$popover-border-color: $gray-300; +$popover-border-radius: $border-radius-lg; +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width); +$popover-box-shadow: $box-shadow; + +$popover-header-bg: $gray-100; +$popover-header-color: $headings-color; +$popover-header-padding-y: .7rem; +$popover-header-padding-x: .8rem; + +$popover-body-color: $body-color; +$popover-body-padding-y: .5rem; +$popover-body-padding-x: .75rem; + +$popover-arrow-width: 1rem; +$popover-arrow-height: .5rem; +$popover-arrow-color: $popover-bg; + +$popover-arrow-outer-color: $gray-400; +// scss-docs-end popover-variables + + +// Toasts + +// scss-docs-start toast-variables +$toast-max-width: 350px; +$toast-padding-x: .75rem; +$toast-padding-y: .5rem; +$toast-font-size: .875rem; +$toast-color: null; +$toast-background-color: rgba($white, .85); +$toast-border-width: 1px; +$toast-border-color: rgba(0, 0, 0, .1); +$toast-border-radius: $border-radius; +$toast-box-shadow: $box-shadow; +$toast-spacing: $container-padding-x; + +$toast-header-color: $gray-600; +$toast-header-background-color: rgba($white, .85); +$toast-header-border-color: rgba(0, 0, 0, .05); +// scss-docs-end toast-variables + + +// Badges + +// scss-docs-start badge-variables +$badge-font-size: .75em; +$badge-font-weight: $font-weight-bold; +$badge-color: $white; +$badge-padding-y: .25em; +$badge-padding-x: .4em; +$badge-border-radius: $border-radius; +// scss-docs-end badge-variables + + +// Modals + +// scss-docs-start modal-variables +$modal-inner-padding: $spacer - 0.5rem; + +// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding +$modal-footer-margin-between: .5rem; + +$modal-dialog-margin: .5rem; +$modal-dialog-margin-y-sm-up: 1.75rem; + +$modal-title-line-height: $line-height-base; + +$modal-content-color: null; +$modal-content-bg: $white; +$modal-content-border-color: transparent; +$modal-content-border-width: $border-width; +$modal-content-border-radius: 0.2rem; +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width); +$modal-content-box-shadow-xs: $box-shadow-sm; +$modal-content-box-shadow-sm-up: $box-shadow; + +$modal-backdrop-bg: $gray-900; +$modal-backdrop-opacity: .7; +$modal-header-border-color: $border-color; +$modal-footer-border-color: $modal-header-border-color; +$modal-header-border-width: $modal-content-border-width; +$modal-footer-border-width: $modal-header-border-width; +$modal-header-padding-y: $modal-inner-padding; +$modal-header-padding-x: $modal-inner-padding; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility + +$modal-sm: 300px; +$modal-md: 500px; +$modal-lg: 800px; +$modal-xl: 1140px; + +$modal-fade-transform: translate(0, -50px); +$modal-show-transform: none; +$modal-transition: transform .3s ease-out; +$modal-scale-transform: scale(1.02); +// scss-docs-end modal-variables + + +// Alerts +// +// Define alert colors, border radius, and padding. + +// scss-docs-start alert-variables +$alert-padding-y: .75rem; +$alert-padding-x: 1.25rem; +$alert-margin-bottom: 1rem; +$alert-border-radius: $border-radius; +$alert-link-font-weight: $font-weight-bold; +$alert-border-width: $border-width; + +$alert-bg-scale: -80%; +$alert-border-scale: -70%; +$alert-color-scale: 40%; + +$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables + + +// Progress bars + +// scss-docs-start progress-variables +$progress-height: 1rem; +$progress-font-size: $font-size-base * .75; +$progress-bg: $gray-200; +$progress-border-radius: $border-radius; +$progress-box-shadow: $box-shadow-inset; +$progress-bar-color: $white; +$progress-bar-bg: $primary; +$progress-bar-animation-timing: 1s linear infinite; +$progress-bar-transition: width .6s ease; +// scss-docs-end progress-variables + + +// List group + +// scss-docs-start list-group-variables +$list-group-color: null; +$list-group-bg: $white; +$list-group-border-color: $gray-200; +$list-group-border-width: $border-width; +$list-group-border-radius: $border-radius; + +$list-group-item-padding-y: $spacer * .5; +$list-group-item-padding-x: $spacer * .8; +$list-group-item-bg-scale: -70%; +$list-group-item-color-scale: 40%; + +$list-group-hover-bg: $gray-100; +$list-group-active-color: $component-active-color; +$list-group-active-bg: $component-active-bg; +$list-group-active-border-color: $list-group-active-bg; + +$list-group-disabled-color: $gray-700; +$list-group-disabled-bg: tint-color($gray-100,30%); + +$list-group-action-color: $gray-700; +$list-group-action-hover-color: $list-group-action-color; + +$list-group-action-active-color: $body-color; +$list-group-action-active-bg: $gray-200; +// scss-docs-end list-group-variables + + +// Image thumbnails + +// scss-docs-start thumbnail-variables +$thumbnail-padding: .25rem; +$thumbnail-bg: $white; +$thumbnail-border-width: $border-width; +$thumbnail-border-color: $gray-300; +$thumbnail-border-radius: $border-radius; +$thumbnail-box-shadow: $box-shadow-sm; +// scss-docs-end thumbnail-variables + + +// Figures + +// scss-docs-start figure-variables +$figure-caption-font-size: $small-font-size; +$figure-caption-color: $gray-600; +// scss-docs-end figure-variables + + +// Breadcrumbs + +// scss-docs-start breadcrumb-variables +$breadcrumb-font-size: null; +$breadcrumb-padding-y: $spacer * 1; +$breadcrumb-padding-x: 0; +$breadcrumb-item-padding-x: .5rem; +$breadcrumb-margin-bottom: 1rem; +$breadcrumb-bg: null; +$breadcrumb-divider-color: $gray-400; +$breadcrumb-active-color: $gray-500; +$breadcrumb-divider: quote("\F0142"); +$breadcrumb-divider-flipped: $breadcrumb-divider; +$breadcrumb-border-radius: null; +// scss-docs-end breadcrumb-variables + +// Carousel + +// scss-docs-start carousel-variables +$carousel-control-color: $white; +$carousel-control-width: 15%; +$carousel-control-opacity: .5; +$carousel-control-hover-opacity: .9; +$carousel-control-transition: opacity .15s ease; + +$carousel-indicator-width: 30px; +$carousel-indicator-height: 3px; +$carousel-indicator-hit-area-height: 10px; +$carousel-indicator-spacer: 3px; +$carousel-indicator-opacity: .5; +$carousel-indicator-active-bg: $white; +$carousel-indicator-active-opacity: 1; +$carousel-indicator-transition: opacity .6s ease; + +$carousel-caption-width: 70%; +$carousel-caption-color: $white; +$carousel-caption-padding-y: 1.25rem; +$carousel-caption-spacer: 1.25rem; + +$carousel-control-icon-width: 2rem; + +$carousel-control-prev-icon-bg: url("data:image/svg+xml,"); +$carousel-control-next-icon-bg: url("data:image/svg+xml,"); + +$carousel-transition-duration: .6s; +$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) + +$carousel-dark-indicator-active-bg: $black; +$carousel-dark-caption-color: $black; +$carousel-dark-control-icon-filter: invert(1) grayscale(100); +// scss-docs-end carousel-variables + + +// Spinners + +// scss-docs-start spinner-variables +$spinner-width: 2rem; +$spinner-height: $spinner-width; +$spinner-vertical-align: -.125em; +$spinner-border-width: .25em; +$spinner-animation-speed: .75s; + +$spinner-width-sm: 1rem; +$spinner-height-sm: $spinner-width-sm; +$spinner-border-width-sm: .2em; +// scss-docs-end spinner-variables + + +// Close + +// scss-docs-start close-variables +$btn-close-width: 1em; +$btn-close-height: $btn-close-width; +$btn-close-padding-x: .25em; +$btn-close-padding-y: $btn-close-padding-x; +$btn-close-color: $gray-900; +$btn-close-bg: url("data:image/svg+xml,"); +$btn-close-focus-shadow: none; +$btn-close-opacity: .65; +$btn-close-hover-opacity: .8; +$btn-close-focus-opacity: 1; +$btn-close-disabled-opacity: .25; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); +// scss-docs-end close-variables + + +// Offcanvas + +// scss-docs-start offcanvas-variables +$offcanvas-padding-y: $modal-inner-padding; +$offcanvas-padding-x: $modal-inner-padding; +$offcanvas-horizontal-width: 400px; +$offcanvas-vertical-height: 30vh; +$offcanvas-transition-duration: .3s; +$offcanvas-border-color: $modal-content-border-color; +$offcanvas-border-width: $modal-content-border-width; +$offcanvas-title-line-height: $modal-title-line-height; +$offcanvas-bg-color: $modal-content-bg; +$offcanvas-color: $modal-content-color; +$offcanvas-box-shadow: $modal-content-box-shadow-xs; +$offcanvas-backdrop-bg: $modal-backdrop-bg; +$offcanvas-backdrop-opacity: $modal-backdrop-opacity; +// scss-docs-end offcanvas-variables + +// Code + +$code-font-size: 87.5%; +$code-color: $cyan; + +$kbd-padding-y: .2rem; +$kbd-padding-x: .4rem; +$kbd-font-size: $code-font-size; +$kbd-color: $white; +$kbd-bg: $gray-900; + +$pre-color: null; \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/_accordions.scss b/app/javascript/stylesheets/custom/components/_accordions.scss new file mode 100644 index 0000000..398624b --- /dev/null +++ b/app/javascript/stylesheets/custom/components/_accordions.scss @@ -0,0 +1,51 @@ +// +// accordions.scss +// + +.custom-accordion { + + .card { + box-shadow: none; + } + + .card-header { + background-color: $gray-100; + } + + .card-body { + border: 1px solid $gray-100; + } + + .accordion-arrow { + font-size: 1.2rem; + position: absolute; + right: 0; + } + a { + &.collapsed { + i.accordion-arrow { + &:before { + content: "\F142"; + } + } + } + } +} + +.custom-accordion-title { + color: $custom-accordion-title-color; + position: relative; + + &:hover { + color: lighten($custom-accordion-title-color,7.5%) + } +} + +.accordion { + >.card { + >.card-header { + border-radius: 0; + margin-bottom: -1px; + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/_dropdown.scss b/app/javascript/stylesheets/custom/components/_dropdown.scss new file mode 100644 index 0000000..ba02a14 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/_dropdown.scss @@ -0,0 +1,92 @@ +// +// dropdown.scss +// + +.dropdown-menu { + box-shadow: $box-shadow; +} + +.dropdown-menu-animated { + &.dropdown-menu-end[style] { + left: auto!important; + right: 0!important; + } +} + +// Dropdown Animated (Custom) +.dropdown-menu-animated { + animation-name: DropDownSlide; + animation-duration: .3s; + animation-fill-mode: both; + position: absolute; + margin: 0; + z-index: 1000; + + &.show { + top: 100%!important; + } + + i { + display: inline-block; + } + + &.dropdown-menu[data-popper-placement^=right], + &.dropdown-menu[data-popper-placement^=top], + &.dropdown-menu[data-popper-placement^=left]{ + top: auto !important; + animation: none !important; + } +} + +@keyframes DropDownSlide { + 100% { + transform: translateY(0) + } + 0% { + transform: translateY(10px) + } +} + + +// Dropdown Large (Custom) +@media (min-width: 600px) { + .dropdown-lg { + width: $dropdown-lg-width; + } +} + +// Dropdown with Icons +.dropdown-icon-item { + display: block; + border-radius: 3px; + line-height: 34px; + text-align: center; + padding: 15px 0 9px; + display: block; + border: 1px solid transparent; + color: $dropdown-link-color; + + img { + height: 24px; + } + + span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &:hover { + background-color: $dropdown-link-hover-bg; + color: $dropdown-link-hover-color; + } +} + + +// Dropdown arrow hide +.arrow-none { + &:after { + display: none; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/_mixins.scss b/app/javascript/stylesheets/custom/components/_mixins.scss new file mode 100644 index 0000000..4cfc683 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/_mixins.scss @@ -0,0 +1,8 @@ +// +// mixins.scss +// + +// Components +@import "mixins/background-variant"; +@import "mixins/buttons"; +@import "mixins/badge"; \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/_nav.scss b/app/javascript/stylesheets/custom/components/_nav.scss new file mode 100644 index 0000000..ecc67a7 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/_nav.scss @@ -0,0 +1,46 @@ +// +// tabs.scss +// + +.nav-tabs,.nav-pills { + > li { + > a { + color: $gray-700; + font-weight: $font-weight-semibold; + } + } +} + +.nav-pills { + > a { + color: $gray-700; + font-weight: $font-weight-semibold; + } +} + + +.bg-nav-pills { + background-color: $nav-pills-bg; +} + +// +// nav-bordered +// + +.nav-tabs.nav-bordered { + border-bottom: 2px solid rgba($gray-600, 0.2); + + .nav-item { + margin-bottom: -1px; + } + + li { + a { + border: 0; + padding: 0.625rem 1.25rem; + } + a.active { + border-bottom: 2px solid $primary; + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/mixins/_background-variant.scss b/app/javascript/stylesheets/custom/components/mixins/_background-variant.scss new file mode 100644 index 0000000..379a8d0 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/mixins/_background-variant.scss @@ -0,0 +1,5 @@ +// Background lighten + +@mixin bg-variant-light($color) { + background-color: rgba($color, 0.25) !important; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/mixins/_badge.scss b/app/javascript/stylesheets/custom/components/mixins/_badge.scss new file mode 100644 index 0000000..822a476 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/mixins/_badge.scss @@ -0,0 +1,14 @@ + +// Lighten badge +@mixin badge-variant-light($bg) { + color: $bg; + background-color: rgba($bg, 0.18); +} + +// Outline badge + +@mixin badge-variant-outline($bg) { + color: $bg; + border: 1px solid $bg; + background-color: transparent; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/components/mixins/_buttons.scss b/app/javascript/stylesheets/custom/components/mixins/_buttons.scss new file mode 100644 index 0000000..8c3c345 --- /dev/null +++ b/app/javascript/stylesheets/custom/components/mixins/_buttons.scss @@ -0,0 +1,5 @@ +// Button shadow + +@mixin button-shadow($color) { + box-shadow: $btn-box-shadow rgba($color, 0.5); +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_footer.scss b/app/javascript/stylesheets/custom/structure/_footer.scss new file mode 100644 index 0000000..d06bb1f --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_footer.scss @@ -0,0 +1,82 @@ +// +// footer.scss +// + +.footer { + border-top: 1px solid rgba($gray-600, 0.2); + bottom: 0; + padding: 19px 24px 20px; + position: absolute; + right: 0; + color: $gray-600; + left: $leftbar-width; + + .footer-links { + a { + color: $gray-600; + margin-left: 1.5rem; + transition: all .4s; + &:hover { + color: $gray-900; + } + &:first-of-type { + margin-left: 0; + } + } + } +} + +@include media-breakpoint-down(md) { + .footer { + left: 0 !important; + text-align: center; + } +} + + +// Used for account authentication pages +.footer-alt { + left: 0; + border: none; + text-align: center; +} + +// Layout - Topnav +body[data-layout="topnav"] { + .footer { + left: 0 !important; + padding: 19px 0 20px; + } + &[data-layout-mode="boxed"] { + .footer { + max-width: $boxed-layout-width; + } + } +} + +body[data-layout-mode="boxed"] { + .footer { + border: none; + margin: 0 auto; + background-color: $body-bg; + box-shadow: $box-shadow; + max-width: calc(#{$boxed-layout-width} - #{$leftbar-width}); + } + + &[data-leftbar-compact-mode="condensed"] { + .footer { + max-width: calc(#{$boxed-layout-width} - 70px); + } + } +} + +body[data-layout="detached"] { + .footer { + left: 0; + + .container-fluid { + max-width: 100%; + padding: 0; + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_general.scss b/app/javascript/stylesheets/custom/structure/_general.scss new file mode 100644 index 0000000..134519e --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_general.scss @@ -0,0 +1,19 @@ +// +// general.scss +// + +html { + position: relative; + min-height: 100%; +} + +body { + overflow-x: hidden; +} + +// Fix event bubbling on iOS devices +@supports (-webkit-overflow-scrolling: touch) { + body { + cursor: pointer; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_horizontal-nav.scss b/app/javascript/stylesheets/custom/structure/_horizontal-nav.scss new file mode 100644 index 0000000..dbaab4b --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_horizontal-nav.scss @@ -0,0 +1,260 @@ +// +// horizontal-nav.scss +// + +.topnav-navbar { + padding: 0; + margin: 0; + min-height: 70px; + position: relative; + left: 0 !important; + z-index: 1002; + + .topnav-logo { + line-height: 70px; + float: left; + padding-right: 20px; + min-width: 160px; + + .topnav-logo-sm { + display: none; + } + } + + .navbar-toggle { + position: relative; + cursor: pointer; + float: left; + margin: 27px 20px; + padding: 0; + background-color: transparent; + border: none; + + .lines { + width: 25px; + display: block; + position: relative; + height: 16px; + transition: all .5s ease; + } + span { + height: 2px; + width: 100%; + background-color: rgba($dark, 0.8); + display: block; + margin-bottom: 5px; + transition: transform .5s ease; + } + &.open { + span { + position: absolute; + &:first-child { + top: 7px; + transform: rotate(45deg); + } + &:nth-child(2) { + visibility: hidden; + } + &:last-child { + width: 100%; + top: 7px; + transform: rotate(-45deg); + } + } + } + } + + .app-search { + float: left; + } +} + +.topnav { + background: $bg-topnav; + + .topnav-menu { + margin: 0; + padding: 0; + } + .navbar-nav { + .nav-link { + font-size: .9375rem; + position: relative; + padding: 1rem 1.3rem; + } + } + .nav-item { + &.active { + > a { + color: $menu-item-light-active; + } + } + } + .navbar-dark { + .dropdown { + &.active, &:active { + >.nav-link { + color: $white; + } + } + } + } +} + +.arrow-down { + display: inline-block; + + &:after { + border-color: initial; + border-style: solid; + border-width: 0 0 1px 1px; + content: ""; + height: .4em; + display: inline-block; + right: 5px; + top: 50%; + margin-left: 10px; + transform: rotate(-45deg) translateY(-50%); + transform-origin: top; + transition: all .3s ease-out; + width: .4em; + } +} + +body[data-layout="topnav"] { + .container-fluid { + padding-right: $grid-gutter-width; + padding-left: $grid-gutter-width; + } +} + +@include media-breakpoint-up(lg) { + body[data-layout="topnav"] { + .container-fluid { + max-width: 95%; + } + &[data-layout-mode="boxed"]{ + .container-fluid { + max-width: 97%; + } + } + } + + .topnav { + .navbar-nav { + .nav-item { + &:first-of-type { + .nav-link { + padding-left: 0; + } + } + } + } + .dropdown { + .dropdown-menu { + margin-top: 0; + border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius; + min-width: calc(#{$dropdown-min-width} + 1.5rem); + @include font-size(calc(#{$dropdown-font-size} - 0.01rem)); + + .arrow-down { + &::after { + right: 15px; + transform: rotate(-135deg) translateY(-50%); + position: absolute; + } + } + + .dropdown { + .dropdown-menu { + position: absolute; + top: 0; + left: 100%; + display: none + } + } + } + + &:hover { + > .dropdown-menu { + display: block; + } + } + } + .dropdown:hover > .dropdown-menu >.dropdown:hover > .dropdown-menu { + display: block + } + } + + .dropdown.active > a.dropdown-item { + color: $dropdown-link-active-color; + @include gradient-bg($dropdown-link-active-bg); + } +} + +@include media-breakpoint-up(xxl) { + body[data-layout="topnav"] { + .container-fluid { + max-width: 85%; + } + } +} + +@include media-breakpoint-up(lg) { + .navbar-toggle { + display: none; + } +} + +@include media-breakpoint-down(lg) { + .topnav-navbar { + .topnav-logo-lg { + display: none; + } + .topnav-logo { + min-width: 50px; + padding-right: 0; + text-align: center; + } + .topnav-logo-sm { + display: block !important; + } + } + + .topnav { + .navbar-nav { + .nav-link { + padding: 0.75rem 1.3rem; + } + } + .dropdown { + .dropdown-menu { + background-color: transparent; + border: none; + box-shadow: none; + padding-left: 15px; + } + .dropdown-item { + position: relative; + background-color: transparent; + } + } + .navbar-dark { + .dropdown { + .dropdown-item { + color: rgba($white, 0.5); + + &.active, &:active { + color: $white; + } + } + } + } + .arrow-down { + &::after { + right: 15px; + position: absolute; + } + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_left-menu.scss b/app/javascript/stylesheets/custom/structure/_left-menu.scss new file mode 100644 index 0000000..389fa4e --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_left-menu.scss @@ -0,0 +1,951 @@ +// +// menu.scss +// + +// Logo +.logo { + display: block; + line-height: $topbar-height; + width: $leftbar-width; + position: fixed; + top: 0; + + span.logo-lg { + display: block; + } + span.logo-sm { + display: none; + } + + &.logo-light { + display: $logo-light-display; + } + &.logo-dark { + display: $logo-dark-display; + } +} + +// Wrapper +.wrapper { + height: 100%; + overflow: hidden; + width: 100%; +} + +//Content Page +.content-page { + margin-left: $leftbar-width; + overflow: hidden; + padding: $topbar-height 12px 65px; + min-height: 100vh; +} + +// Left Side-menu (Default dark) +.leftside-menu { + width: $leftbar-width; + z-index: 10; + background: $bg-leftbar; + bottom: 0; + position: fixed; + top: 0; + padding-top: $topbar-height; + box-shadow: $box-shadow; +} + +// Side-nav +.side-nav { + padding-left: 0; + list-style-type: none; + ul { + list-style-type: none; + } + .side-nav-link { + color: $menu-item; + display: block; + padding: 10px 30px; + font-size: 0.9375rem; + position: relative; + transition: all 0.4s; + list-style: none; + + &:hover, + &:focus, + &:active { + color: $menu-item-hover; + text-decoration: none; + } + + span { + vertical-align: middle; + } + + i { + display: inline-block; + line-height: 1.0625rem; + margin: 0 10px 0 0; + font-size: 1.1rem; + vertical-align: middle; + width: 20px; + } + } + + .menu-arrow { + transition: transform .15s; + position: absolute; + right: 30px; + display: inline-block; + font-family: 'Material Design Icons'; + text-rendering: auto; + line-height: 1.5rem; + font-size: 1.1rem; + transform: translate(0, 0); + &:before { + content: "\F0142"; + } + } + + .fa-chevron-right { + transition: transform .15s; + position: absolute; + right: 30px; + display: inline-block; + text-rendering: auto; + line-height: 1.5rem; + font-size: 1.1rem; + transform: translate(0, 0); + } + + .badge{ + margin-top: 3px; + } + + .side-nav-item { + >a[aria-expanded="true"] { + > span.menu-arrow { + transform: rotate(90deg); + } + > span.fa-chevron-right { + transform: rotate(90deg); + } + } + + &.menuitem-active { + > a:not(.collapsed) { + > span.menu-arrow { + transform: rotate(90deg); + } + > span.fa-chevron-right { + transform: rotate(90deg); + } + } + } + } + + .side-nav-title { + padding: 12px 30px; + letter-spacing: .05em; + pointer-events: none; + cursor: default; + font-size: 0.6875rem; + text-transform: uppercase; + color: $menu-item; + font-weight: $font-weight-bold; + } + + .menuitem-active { + > a { + color: $menu-item-active !important; + } + } +} + +*[dir="ltr"] { + .side-nav { + .side-nav-item { + .menu-arrow { + &:before { + content: "\F0141" !important; + } + } + } + } +} + +.side-nav-second-level, +.side-nav-third-level, +.side-nav-forth-level { + padding-left: 0; + + li { + a { + padding: 8px 30px 8px 65px; + color: $menu-item; + display: block; + position: relative; + transition: all 0.4s; + font-size: 0.89rem; + &:focus, + &:hover { + color: $menu-item-hover; + } + + .menu-arrow { + line-height: 1.3rem; + } + } + &.active { + >a { + color: $menu-item-active; + } + } + } +} + +.side-nav-third-level { + li { + a { + padding: 8px 30px 8px 80px; + } + } +} + +.side-nav-forth-level { + li { + a { + padding: 8px 30px 8px 100px; + } + } +} + +// Enlarge menu +body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) { + min-height: 1600px; + + .wrapper { + // Side menu + .leftside-menu { + position: absolute; + padding-top: 0; + width: 70px; + z-index: 5; + padding-top: $topbar-height; + + .simplebar-mask, + .simplebar-content-wrapper { + overflow: visible !important; + } + + .simplebar-scrollbar { + display: none !important; + } + + .simplebar-offset { + bottom: 0 !important; + } + + .logo { + width: 70px; + z-index: 1; + background: $bg-leftbar; + } + } + + // Help Box + .help-box { + display: none; + } + + // Content Page + .content-page { + margin-left: 70px; + } + + //Navbar & Footer + .navbar-custom, + .footer { + left: 70px; + } + } + + // Sidebar Menu + .side-nav { + .side-nav-title, + .badge, + .menu-arrow{ + display: none !important; + } + .collapse, + .collapsing{ + display: none; + height: inherit !important; + transition: none !important; + + .side-nav-second-level, + .side-nav-third-level, + .side-nav-forth-level { + display: none !important; + } + } + + .side-nav-item { + position: relative; + white-space: nowrap; + + .side-nav-link { + padding: 15px 20px; + min-height: 54px; + transition: none; + + &:hover, + &:active, + &:focus { + color: $menu-item-hover; + } + + i { + font-size: 1.125rem; + margin-right: 20px; + margin-left: 6px; + } + + span { + display: none; + padding-left: 10px; + } + } + + &:hover { + .side-nav-link { + position: relative; + width: 260px; + color: $white; + background: $bg-leftbar; + + span { + display: inline; + } + } + + > ul { + display: block !important; + left: 70px; + position: absolute; + width: 190px; + height: auto !important; + padding: 5px 0; + z-index: 9999; + background: $bg-leftbar; + box-shadow: $box-shadow; + + a { + padding: 8px 20px; + position: relative; + width: 190px; + + &:hover { + color: $menu-item-hover; + } + } + } + + > .collapse, + > .collapsing { + display: block !important; + transition: none !important; + + > ul { + display: block !important; + left: 70px; + position: absolute; + width: 190px; + background: $bg-leftbar; + box-shadow: $box-shadow; + + a { + box-shadow: none; + padding: 8px 20px; + position: relative; + width: 190px; + z-index: 6; + + &:hover { + color: $menu-item-hover; + } + } + + li { + &:hover { + > .collapse { + display: block !important; + height: auto !important; + transition: none !important; + + >ul { + display: block; + left: 190px; + top: 0; + position: absolute; + width: 190px; + } + } + } + } + } + } + } + } + } + + .logo { + span.logo-lg { + display: none; + } + span.logo-sm { + display: block; + line-height: 70px; + color: $primary; + } + } +} + +@include media-breakpoint-down(md) { + body { + overflow-x: hidden; + } + .leftside-menu { + box-shadow: $box-shadow; + display: none; + z-index: 10 !important; + } + .sidebar-enable { + .leftside-menu { + display: block; + } + } + .navbar-nav.navbar-right { + float: right; + } + .content-page { + margin-left: 0 !important; + padding: 65px 10px 65px; + } + body[data-leftbar-compact-mode="condensed"] { + .leftside-menu { + margin-left: 0px; + } + } + .logo { + span.logo-lg { + display: block; + } + span.logo-sm { + display: none; + } + } +} + +/// Help-box +.help-box { + border-radius: 5px; + padding: 20px; + margin: 65px 25px 25px; + position: relative; + background-color: $help-box-light-bg; + + .close-btn { + position: absolute; + right: 10px; + top: 10px; + } +} +// Light +body[data-leftbar-theme="light"] { + .help-box { + background-color: $primary; + } + + .logo { + &.logo-light { + display: $logo-dark-display; + } + &.logo-dark { + display: $logo-light-display; + } + } +} + +// Layout -topnav +body[data-layout="topnav"] { + .content-page { + margin-left: 0 !important; + padding: 0 0 60px 0; + } +} + +// Layout-boxed +body[data-layout-mode="boxed"] { + background-color: $boxed-layout-bg; + + .wrapper { + max-width: $boxed-layout-width; + margin: 0 auto; + background-color: $body-bg; + box-shadow: $box-shadow; + } + + &[data-leftbar-compact-mode="condensed"] { + .logo { + position: relative; + margin-top: -$topbar-height; + } + } +} + +// Scrollable Layout + +@include media-breakpoint-up(xl) { + body[data-leftbar-compact-mode="scrollable"]:not([data-layout="topnav"]) { + padding-bottom: 0; + + .wrapper { + display: flex; + } + + .leftside-menu { + position: relative; + min-width: $leftbar-width; + max-width: $leftbar-width; + padding-top: 0; + } + + .logo { + position: relative; + margin-top: 0; + } + + .content-page { + margin-left: 0; + width: 100%; + padding-bottom: 60px; + } + } +} + +// Detached Left sidebar + +body[data-layout="detached"] { + padding-bottom: 0; + + @include media-breakpoint-up(lg) { + .container-fluid { + max-width: 95%; + } + } + + &[data-layout-mode="boxed"] { + .wrapper { + max-width: 100%; + } + } + + + .wrapper { + display: flex; + overflow: inherit; + } + .content-page { + margin-left: 0; + overflow: hidden; + padding: 0 15px 5px 30px; + position: relative; + margin-right: -15px; + width: 100%; + padding-bottom: 60px; + } + + .leftside-menu { + position: relative; + background: $bg-detached-leftbar !important; + min-width: $leftbar-width; + max-width: $leftbar-width; + box-shadow: $box-shadow; + margin-top: 30px; + padding-top: 0 !important; + z-index: 1001 !important; + + .side-nav { + .side-nav-link { + color: $menu-item-dark !important; + &:hover, + &:focus, + &:active { + color: $menu-item-dark-hover !important; + } + } + + .side-nav-second-level, + .side-nav-third-level, + .side-nav-forth-level { + li { + a { + color: $menu-item-dark; + &:focus, + &:hover { + color: $menu-item-dark-hover; + } + } + &.mm-active { + > a { + color: $menu-item-dark-active; + } + } + } + } + + .menuitem-active { + > a { + color: $menu-item-dark-active !important; + } + } + + .side-nav-title { + color: $menu-item-dark; + } + } + } + + .leftbar-user { + padding: 30px 20px; + text-align: center; + + .leftbar-user-name { + font-weight: 700; + color: $dark; + margin-left: 12px; + margin-top: 8px; + display: block; + } + } + + @include media-breakpoint-down(md) { + + &.sidebar-enable { + .leftside-menu { + position: fixed; + left: 0; + overflow-y: auto; + margin-top: 70px; + } + } + .wrapper { + max-width: 100%; + } + .content-page { + margin-left: 0 !important; + padding: 0 10px 60px 10px; + } + + .lang-switch { + display: none; + } + &[data-leftbar-compact-mode="condensed"] { + &.sidebar-enable { + .leftside-menu { + margin-top: 0px; + } + } + } + } + + // Enlarge menu + &[data-leftbar-compact-mode="condensed"] { + .wrapper { + // Side menu + .leftside-menu { + max-width: 70px; + min-width: 70px; + position: relative; + } + .leftbar-user { + display: none; + } + + // Content Page + .content-page { + margin-left: 0; + } + + //Footer + .footer { + left: 0; + } + } + // Sidebar Menu + .side-nav { + .side-nav-item { + .side-nav-link { + &:hover, + &:active, + &:focus { + color: $menu-item-hover; + } + } + + &:hover { + .side-nav-link { + background: $primary; + color: $white !important; + transition: none; + } + + ul { + background: $bg-leftbar-light !important; + box-shadow: $box-shadow; + + a { + &:hover { + color: $menu-item-light-hover !important; + } + } + } + } + } + } + } +} + +// reaponsive detached mode +@include media-breakpoint-up(lg) { + body[data-layout="detached"] { + &[data-leftbar-compact-mode="scrollable"] { + .wrapper { + padding-top: 70px; + } + } + } +} + +.button-menu-mobile { + .lines { + width: 18px; + display: block; + position: relative; + height: 16px; + transition: all .5s ease; + margin-top: 26px; + margin-left: 10px; + } + span { + height: 2px; + width: 100%; + background-color: rgba($white, 0.8); + display: block; + margin-bottom: 5px; + transition: transform .5s ease; + + &:nth-of-type(2) { + width: 24px; + } + } + + &.disable-btn { + display: none; + } +} + +// Light sidebar + +body[data-leftbar-theme="light"] { + .leftside-menu { + background: $bg-leftbar-light; + + .logo { + background: $bg-leftbar-light !important; + } + } + + .side-nav { + .side-nav-link { + color: $menu-item-light; + &:hover, + &:focus, + &:active { + color: $menu-item-light-hover; + } + } + + .menuitem-active { + > a { + color: $menu-item-dark-active !important; + } + } + + .side-nav-title { + color: $menu-item-light; + } + + .side-nav-second-level, + .side-nav-third-level, + .side-nav-forth-level { + li { + a { + color: $menu-item-light; + &:focus, + &:hover { + color: $menu-item-light-hover; + } + } + &.active { + >a { + color: $menu-item-light-active; + } + } + } + } + } + + // Enlarge menu + &[data-leftbar-compact-mode="condensed"] { + // Sidebar Menu + .side-nav { + .side-nav-item { + + .side-nav-link { + &:hover, + &:active, + &:focus { + color: $menu-item-hover; + } + } + + &:hover { + .side-nav-link { + background: $primary; + color: $white !important; + transition: none; + } + + > ul { + background: $bg-leftbar-light; + box-shadow: $box-shadow; + + a { + &:hover { + color: $menu-item-light-hover; + } + } + } + + > .collapse, + > .collapsing { + + > ul { + background: $bg-leftbar-light; + + a { + &:hover { + color: $menu-item-light-hover; + } + } + } + } + } + } + } + } +} + +// Dark sidenav +body[data-leftbar-theme="dark"] { + .leftside-menu { + background: $bg-leftbar-dark; + + .logo { + background: $bg-leftbar-dark !important; + } + } + + .side-nav { + .side-nav-link { + color: $sidebar-dark-menu-item; + &:hover, + &:focus, + &:active { + color: $sidebar-dark-menu-item-hover; + } + } + + .menuitem-active { + > a { + color: $sidebar-dark-menu-item-active !important; + } + } + + .side-nav-title { + color: $sidebar-dark-menu-item; + } + + .side-nav-second-level, + .side-nav-third-level, + .side-nav-forth-level { + li { + a { + color: $sidebar-dark-menu-item; + &:focus, + &:hover { + color: $sidebar-dark-menu-item-hover; + } + } + &.active { + >a { + color: $sidebar-dark-menu-item-active; + } + } + } + } + } + + // Enlarge menu + &[data-leftbar-compact-mode="condensed"] { + // Sidebar Menu + .side-nav { + .side-nav-item { + + .side-nav-link { + &:hover, + &:active, + &:focus { + color: $sidebar-dark-menu-item-hover; + } + } + + &:hover { + .side-nav-link { + background: $primary; + color: $white !important; + transition: none; + } + + > ul { + background: $bg-leftbar-dark; + box-shadow: $box-shadow; + + a { + &:hover { + color: $sidebar-dark-menu-item-hover; + } + } + } + + > .collapse, + > .collapsing { + + > ul { + background: $bg-leftbar-dark; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_page-head.scss b/app/javascript/stylesheets/custom/structure/_page-head.scss new file mode 100644 index 0000000..3f559bf --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_page-head.scss @@ -0,0 +1,72 @@ +// +// page-head.scss +// + +.page-title-box { + .page-title { + font-size: 18px; + margin: 0; + line-height: 75px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: $page-title-color; + } + .page-title-right { + float: right; + margin-top: 20px; + } + + .breadcrumb { + padding-top: 8px; + } +} + +.page-title-box-sm { + .page-title { + line-height: 1 !important; + margin-bottom: 25px; + } + .page-title-right { + float: right; + margin-top: 0; + } + + .breadcrumb { + padding-top: 0; + margin-top: -3px !important; + } +} + + +.text-title { + color: $text-title-color; + + &:hover { + color: $text-title-color; + } +} + +@include media-breakpoint-down(md) { + .page-title-box { + .page-title { + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 70px; + } + .breadcrumb { + display: none; + } + .page-title-right { + display: none; + } + } +} + +@media (max-width: 419px) { + .page-title-box .breadcrumb { + display: none; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_right-sidebar.scss b/app/javascript/stylesheets/custom/structure/_right-sidebar.scss new file mode 100644 index 0000000..69ae281 --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_right-sidebar.scss @@ -0,0 +1,68 @@ +// +// right-sidebar.scss +// + +/* rtl:begin:options: { + "autoRename": true, + "stringMap":[] +} */ + +.end-bar { + background-color: $rightbar-bg; + box-shadow: 0 0 24px 0 rgba($dark, 0.1), 0 1px 0 0 rgba($dark, 0.08); + display: block; + position: fixed; + transition: all 200ms ease-out; + width: $rightbar-width; + z-index: 9999; + float: right !important; + right: -($rightbar-width + 10px); + top: 0; + bottom: 0; + padding-bottom: 80px; + + .rightbar-title { + background-color: $rightbar-title-bg; + padding: 27px 25px; + color: $rightbar-title-color; + } + .end-bar-toggle { + background-color: $rightbar-title-btn-bg; + height: 24px; + width: 24px; + line-height: 22px; + color: $rightbar-title-btn-color; + text-align: center; + border-radius: 50%; + margin-top: -4px; + } +} + +.rightbar-overlay { + background-color: $rightbar-overlay-bg; + opacity: 0.1; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: none; + z-index: 9998; + transition: all .2s ease-out; +} + +.end-bar-enabled { + .end-bar { + right: 0; + } + .rightbar-overlay { + display: block; + } +} + + +@include media-breakpoint-down(md) { + .end-bar { + overflow: auto; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/custom/structure/_topbar.scss b/app/javascript/stylesheets/custom/structure/_topbar.scss new file mode 100644 index 0000000..4dc5278 --- /dev/null +++ b/app/javascript/stylesheets/custom/structure/_topbar.scss @@ -0,0 +1,388 @@ +// +// topbar.scss +// + +.navbar-custom { + padding: 0 $grid-gutter-width; + background-color: $bg-topbar; + box-shadow: $box-shadow; + min-height: $topbar-height; + position: fixed; + left: $leftbar-width; + top: 0; + right: 0; + z-index: 1001; + + .topbar-left { + background-color: $bg-topbar; + height: $topbar-height; + position: fixed; + z-index: 1; + width: $leftbar-width; + text-align: center; + top: 0; + left: 0; + .logo { + line-height: $topbar-height; + i { + display: none; + } + } + } + .topbar-menu { + position: relative; + z-index: 1; + + li { + float: left; + max-height: $topbar-height; + + .show { + &.nav-link { + color: $gray-700; + } + } + } + .nav-link { + padding: 0; + color: $gray-600; + min-width: 32px; + display: block; + text-align: center; + margin: 0 10px; + position: relative; + } + } + + .app-search { + position: static; + overflow-y: hidden; + + form { + padding: calc(#{$topbar-height - 38px} / 2) 5px calc(#{$topbar-height - 38px} / 2) 0; + overflow: hidden; + max-width: 320px; + } + } +} + +.topbar-dropdown { + .nav-link { + line-height: $topbar-height; + } +} + +/* Search */ + +.app-search { + .form-control { + border: none; + height: $input-height; + padding-left: 40px; + padding-right: 20px; + background-color: $bg-topbar-search; + box-shadow: none; + } + span.search-icon { + position: absolute; + z-index: 9; + font-size: 20px; + line-height: 38px; + left: 10px; + top: 0; + } + .input-group-text { + margin-left: 0; + z-index: 4; + } +} + + +/* Notification */ +.notification-list { + margin-left: 0; + + .noti-title { + background-color: transparent; + padding: 15px 20px; + } + + .noti-icon { + font-size: 22px; + vertical-align: middle; + line-height: $topbar-height; + } + + .noti-icon-badge { + display: inline-block; + position: absolute; + top: 22px; + right: 6px; + border-radius: 50%; + height: 7px; + width: 7px; + background-color: $danger; + } + + .notify-item { + padding: 10px 20px; + + .notify-icon { + float: left; + height: 36px; + width: 36px; + line-height: 36px; + text-align: center; + margin-right: 10px; + border-radius: 50%; + color: $white; + } + + .notify-details { + margin-bottom: 0; + overflow: hidden; + margin-left: 45px; + text-overflow: ellipsis; + white-space: nowrap; + b { + font-weight: 500; + } + small { + display: block; + } + span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 13px; + } + } + + .user-msg { + margin-left: 45px; + white-space: normal; + line-height: 16px; + } + } + .topbar-dropdown-menu { + .notify-item { + padding: 7px 20px; + } + } +} + +.profile-dropdown { + min-width: 170px; + + i,span { + vertical-align: middle; + } +} + +.nav-user { + padding: calc(#{$topbar-height - 39px} / 2) 20px calc(#{$topbar-height - 39px} / 2) 57px !important; + text-align: left !important; + position: relative; + background-color: lighten($gray-100, 2.5%); + border: 1px solid $gray-100; + border-width: 0 1px; + min-height: $topbar-height; + + .account-user-avatar { + position: absolute; + top: calc(#{$topbar-height - 32px} / 2); + left: 15px; + + img { + height: 32px; + width: 32px; + } + } + .account-position { + display: block; + font-size: 12px; + margin-top: -3px; + } + .account-user-name { + display: block; + font-weight: $font-weight-semibold; + } +} + +.button-menu-mobile { + border: none; + color: $dark; + height: $topbar-height; + line-height: $topbar-height; + width: 60px; + background-color: transparent; + font-size: 24px; + cursor: pointer; + float: left; + z-index: 1; + position: relative; + margin-left: -$grid-gutter-width; + + &.disable-btn { + display: none; + } + + @include media-breakpoint-down(md) { + margin: 0 !important; + } +} + +[data-keep-enlarged="true"] { + .navbar-custom { + padding-left: 0; + } + + .button-menu-mobile { + margin: 0; + + &.disable-btn { + display: inline-block; + } + } +} + +@media (max-width: 600px) { + .navbar-custom { + .topbar-menu { + position: initial; + } + + .dropdown { + position: static; + + .dropdown-menu { + left: 10px!important; + right: 10px!important; + } + } + } +} + +@media (max-width: 1200px) { + .navbar-custom { + right: 0; + + .app-search { + display: none; + } + } +} + +@include media-breakpoint-down(lg) { + .nav-user { + padding: 17px 5px 17px 57px !important; + + .account-position, + .account-user-name { + display: none; + } + } +} + +@include media-breakpoint-down(md) { + + .navbar-custom { + left: 0 !important; + padding: 0; + } + .button-menu-mobile { + &.disable-btn { + display: inline-block; + } + } +} + +@media (max-width:375px) { + .navbar-custom { + .topbar-menu { + .nav-link { + margin: 0 6px; + } + } + + &.topnav-navbar { + .container-fluid { + padding-right: 12px; + padding-left: 12px; + } + .navbar-toggle { + margin: 27px 3px + } + .button-menu-mobile { + width: auto; + } + } + } +} + +// Scrollable Layout + +@include media-breakpoint-up(lg) { + body[data-leftbar-compact-mode="scrollable"]:not([data-layout="topnav"]) { + .navbar-custom { + position: absolute; + } + } +} + +// Topbar Dark +.topnav-navbar-dark { + background-color: $bg-topbar-dark; + + .nav-user { + background-color: lighten($bg-topbar-dark,5%); + border: 1px solid lighten($bg-topbar-dark,7.5%); + } + + .topbar-menu { + + li { + .show { + &.nav-link { + color: $white !important; + } + } + } + } + + .app-search { + .form-control { + background-color: $bg-topbar-dark-search; + color: $white; + } + span { + color: $gray-600; + } + } + + .navbar-toggle { + span { + background-color: rgba($white, 0.8) !important; + } + } +} + +body[data-layout-mode="boxed"] { + .navbar-custom { + position: relative; + left: 0 !important; + margin: -$topbar-height (-$grid-gutter-width / 2) 0; + } + + &[data-layout="topnav"] { + .navbar-custom { + margin: 0; + } + } +} + +// Locales dropdown +li#locales div a span { + padding-left: 20px; +} diff --git a/app/views/achievements/_achievements.html.erb b/app/views/achievements/_achievements.html.erb index 70548dc..1093af7 100644 --- a/app/views/achievements/_achievements.html.erb +++ b/app/views/achievements/_achievements.html.erb @@ -27,7 +27,7 @@
<% wow_achievements.each do |achievement| %>
-
+
<%= achievement.name %><% if Rails.env.development? %> - ID: <%= achievement.achievement_id %><% end %>
diff --git a/app/views/home/_landing.html.erb b/app/views/home/_landing.html.erb new file mode 100644 index 0000000..0a8d088 --- /dev/null +++ b/app/views/home/_landing.html.erb @@ -0,0 +1,196 @@ + + + + +
+
+
+
+
+
+ New + Welcome to new landing page +
+

+ Responsive Web UI Kit & Dashboard Template +

+

Hyper is a fully featured dashboard and admin template + comes with tones of well designed UI elements, components, widgets and pages.

+ Preview +
+
+
+
+ <%= image_pack_tag 'media/images/startup.svg', alt: 'startup', class: 'img-fluid' %> +
+
+
+
+
+ + + +
+
+
+
+
+

Flexible Layouts

+

There are three different layout options available to cater need for + any
modern web + application.

+
+
+
+
+
+
+ <%= image_pack_tag 'media/images/layouts/layout-1.png', alt: 'demo-img-1', class: 'img-fluid shadow-sm rounded' %> +
Vertical Layout
+
+
+
+
+ <%= image_pack_tag 'media/images/layouts/layout-2.png', alt: 'demo-img-2', class: 'img-fluid shadow-sm rounded' %> +
Horizontal Layout
+
+
+
+
+ <%= image_pack_tag 'media/images/layouts/layout-3.png', alt: 'demo-img-3', class: 'img-fluid shadow-sm rounded' %> +
Detached Layout
+
+
+
+
+ +
+
+ <%= image_pack_tag 'media/images/layouts/layout-5.png', alt: 'demo-img-5', class: 'img-fluid shadow-sm rounded' %> +
Light Sidenav Layout
+
+
+
+
+ <%= image_pack_tag 'media/images/layouts/layout-6.png', alt: 'demo-img-6', class: 'img-fluid shadow-sm rounded' %> +
Boxed Layout
+
+
+
+
+ <%= image_pack_tag 'media/images/layouts/layout-4.png', alt: 'demo-img-4', class: 'img-fluid shadow-sm rounded' %> +
Semi Dark Layout
+
+
+
+
+
+ + + + + diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 750f390..873d7f9 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,5 +1,7 @@ -<% if user_signed_in? %> -

Welcome <%= current_user.battletag %>

+<% unless user_signed_in? %> + <%= render 'home/landing' %> <% else %> -

Welcome guest

+ + <%= yield %> + <% end %> diff --git a/app/views/layouts/_left-sidebar.html.erb b/app/views/layouts/_left-sidebar.html.erb new file mode 100644 index 0000000..88a7ea5 --- /dev/null +++ b/app/views/layouts/_left-sidebar.html.erb @@ -0,0 +1,72 @@ + +
+ + + + + + + +
+ \ No newline at end of file diff --git a/app/views/layouts/_locales.html.erb b/app/views/layouts/_locales.html.erb index 2b58af6..68bc2cd 100644 --- a/app/views/layouts/_locales.html.erb +++ b/app/views/layouts/_locales.html.erb @@ -1,19 +1,32 @@ -
  • - -
      -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)) %>
      • -
    • <%= link_to ''.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)) %>
      • -
    +
    • diff --git a/app/views/layouts/_topbar.html.erb b/app/views/layouts/_topbar.html.erb new file mode 100644 index 0000000..57a2d8a --- /dev/null +++ b/app/views/layouts/_topbar.html.erb @@ -0,0 +1,30 @@ + +
    +
      + + <%= render 'layouts/locales' %> + +
    • + +
      + +
      +
      Account
      +
      + + <%= link_to ' Logout'.html_safe, destroy_user_session_path, method: :delete, class: "dropdown-item notify-item" %> + +
      +
      • + +
    + + + +
    + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 72582a8..92f30f7 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,11 +11,26 @@ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - - <%= render 'layouts/navbar' %> - <%= render partial: 'layouts/flash', flash: flash %> -
    - <%= yield %> -
    + <% if user_signed_in? %> + + +
    + <%= render 'layouts/left-sidebar' %> + +
    +
    + <%= render 'layouts/topbar' %> + +
    + <%= yield %> +
    +
    +
    +
    + <% else %> + + <%= yield %> + + <% end %> diff --git a/config/webpacker.yml b/config/webpacker.yml index a6b1465..959433f 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -71,7 +71,6 @@ development: watch_options: ignored: '**/node_modules/**' - test: <<: *default compile: true diff --git a/package.json b/package.json index 93c6e21..d0e17b1 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,14 @@ "@rails/ujs": "^6.1.4", "@rails/webpacker": "5.2.1", "bootstrap": "^5.1.0", + "bootstrap-datepicker": "^1.9.0", + "bootstrap-maxlength": "^1.10.0", + "bootstrap-timepicker": "^0.5.2", + "bootstrap-touchspin": "^4.3.0", "flag-icon-css": "^3.5.0", - "jquery": "^3.6.0" + "jquery": "^3.6.0", + "moment": "^2.29.1", + "select2": "^4.0.13" }, "version": "0.1.0", "devDependencies": { diff --git a/public/favicon.ico b/public/favicon.ico index e69de29..f5507a4 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/yarn.lock b/yarn.lock index 4c8a550..a1508ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1560,6 +1560,37 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bootstrap-datepicker@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/bootstrap-datepicker/-/bootstrap-datepicker-1.9.0.tgz#e4bfce3fcce1967876b21dc6833ec5994aaed090" + integrity sha512-9rYYbaVOheGYxjOr/+bJCmRPihfy+LkLSg4fIFMT9Od8WwWB/MB50w0JO1eBgKUMbb7PFHQD5uAfI3ArAxZRXA== + dependencies: + jquery ">=1.7.1 <4.0.0" + +bootstrap-maxlength@^1.10.0: + version "1.10.1" + resolved "https://registry.yarnpkg.com/bootstrap-maxlength/-/bootstrap-maxlength-1.10.1.tgz#6b818f4397eed9302477d00f7d2f69fccf2b7740" + integrity sha512-VYQosg0ojUNq05PlZcTwETm0E0Aoe/cclRmCC27QrHk/sY0Q75PUvgHYujN0gb2CD3n2olJfPeqx3EGAqpKjww== + dependencies: + bootstrap "^4.4.1" + jquery "^3.5.1" + qunit "^2.10.0" + +bootstrap-timepicker@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/bootstrap-timepicker/-/bootstrap-timepicker-0.5.2.tgz#10ed9f2a2f0b8ccaefcde0fcf6a0738b919a3835" + integrity sha1-EO2fKi8LjMrvzeD89qBzi5GaODU= + +bootstrap-touchspin@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/bootstrap-touchspin/-/bootstrap-touchspin-4.3.0.tgz#a1dde0f12c331244fcb0e19f99c397f0f73f7793" + integrity sha512-jLynvVHYknc5c+90K0CTHzXADKxFGNCqD4u2N5MZwWuVNy2MovNRyKWGa/puuSebkdIFCqydVkziGWclhx3KKA== + +bootstrap@^4.4.1: + version "4.6.0" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7" + integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw== + bootstrap@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55" @@ -2023,6 +2054,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6: dependencies: delayed-stream "~1.0.0" +commander@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff" + integrity sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg== + commander@^2.20.0: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" @@ -3338,6 +3374,11 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== +globalyzer@0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465" + integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q== + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" @@ -3349,6 +3390,11 @@ globby@^6.1.0: pify "^2.0.0" pinkie-promise "^2.0.0" +globrex@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098" + integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg== + globule@^1.0.0: version "1.3.2" resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4" @@ -4074,7 +4120,7 @@ jest-worker@^26.5.0: merge-stream "^2.0.0" supports-color "^7.0.0" -jquery@^3.6.0: +"jquery@>=1.7.1 <4.0.0", jquery@^3.5.1, jquery@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== @@ -4578,6 +4624,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +moment@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -4740,6 +4791,11 @@ node-sass@^4.14.1: stdout-stream "^1.4.0" "true-case-path" "^1.0.2" +node-watch@0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/node-watch/-/node-watch-0.7.1.tgz#0caaa6a6833b0d533487f953c52a6c787769ba7c" + integrity sha512-UWblPYuZYrkCQCW5PxAwYSxaELNBLUckrTBBk8xr1/bUgyOkYYTsUcV4e3ytcazFEOyiRyiUrsG37pu6I0I05g== + "nopt@2 || 3": version "3.0.6" resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" @@ -6024,6 +6080,15 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== +qunit@^2.10.0: + version "2.16.0" + resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.16.0.tgz#b8ed63d512e5d4eaada5afc0c6c9e8b844181ba1" + integrity sha512-88x9t+rRMbB6IrCIUZvYU4pJy7NiBEv7SX8jD4LZAsIj+dV+kwGnFStOmPNvqa6HM96VZMD8CIIFKH2+3qvluA== + dependencies: + commander "7.1.0" + node-watch "0.7.1" + tiny-glob "0.2.8" + randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -6426,6 +6491,11 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= +select2@^4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.13.tgz#0dbe377df3f96167c4c1626033e924372d8ef44d" + integrity sha512-1JeB87s6oN/TDxQQYCvS5EFoQyvV6eYMZZ0AeA4tdFDYWN3BAGZ8npr17UBFddU0lgAt3H0yjX3X6/ekOj1yjw== + selfsigned@^1.10.8: version "1.10.8" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30" @@ -7101,6 +7171,14 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-glob@0.2.8: + version "0.2.8" + resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.8.tgz#b2792c396cc62db891ffa161fe8b33e76123e531" + integrity sha512-vkQP7qOslq63XRX9kMswlby99kyO5OvKptw7AMwBVMjXEI7Tb61eoI5DydyEMOseyGS5anDN1VPoVxEvH01q8w== + dependencies: + globalyzer "0.1.0" + globrex "^0.1.2" + to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"