first part of new theme integration
This commit is contained in:
@@ -13,7 +13,3 @@
|
||||
*= require_tree .
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: rgb(21, 32, 43);
|
||||
}
|
||||
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
@@ -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/
|
||||
BIN
app/javascript/images/bg-pattern.png
Normal file
BIN
app/javascript/images/bg-pattern.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
app/javascript/images/favicon.ico
Normal file
BIN
app/javascript/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
app/javascript/images/layouts/layout-1.png
Normal file
BIN
app/javascript/images/layouts/layout-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
app/javascript/images/layouts/layout-2.png
Normal file
BIN
app/javascript/images/layouts/layout-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
app/javascript/images/layouts/layout-3.png
Normal file
BIN
app/javascript/images/layouts/layout-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
app/javascript/images/layouts/layout-4.png
Normal file
BIN
app/javascript/images/layouts/layout-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
app/javascript/images/layouts/layout-5.png
Normal file
BIN
app/javascript/images/layouts/layout-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
app/javascript/images/layouts/layout-6.png
Normal file
BIN
app/javascript/images/layouts/layout-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
app/javascript/images/logo-dark.png
Normal file
BIN
app/javascript/images/logo-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
app/javascript/images/logo-light.png
Normal file
BIN
app/javascript/images/logo-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
app/javascript/images/logo.png
Normal file
BIN
app/javascript/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
app/javascript/images/logo_sm.png
Normal file
BIN
app/javascript/images/logo_sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
app/javascript/images/logo_sm_dark.png
Normal file
BIN
app/javascript/images/logo_sm_dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
1
app/javascript/images/startup.svg
Normal file
1
app/javascript/images/startup.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 86 KiB |
BIN
app/javascript/images/waves.png
Normal file
BIN
app/javascript/images/waves.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -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()
|
||||
|
||||
@@ -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";
|
||||
|
||||
112
app/javascript/stylesheets/config/saas/_custom-variables.scss
Normal file
112
app/javascript/stylesheets/config/saas/_custom-variables.scss
Normal file
@@ -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);
|
||||
1606
app/javascript/stylesheets/config/saas/_variables.scss
Normal file
1606
app/javascript/stylesheets/config/saas/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
app/javascript/stylesheets/custom/components/_dropdown.scss
Normal file
92
app/javascript/stylesheets/custom/components/_dropdown.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// mixins.scss
|
||||
//
|
||||
|
||||
// Components
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/badge";
|
||||
46
app/javascript/stylesheets/custom/components/_nav.scss
Normal file
46
app/javascript/stylesheets/custom/components/_nav.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// Background lighten
|
||||
|
||||
@mixin bg-variant-light($color) {
|
||||
background-color: rgba($color, 0.25) !important;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// Button shadow
|
||||
|
||||
@mixin button-shadow($color) {
|
||||
box-shadow: $btn-box-shadow rgba($color, 0.5);
|
||||
}
|
||||
82
app/javascript/stylesheets/custom/structure/_footer.scss
Normal file
82
app/javascript/stylesheets/custom/structure/_footer.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
app/javascript/stylesheets/custom/structure/_general.scss
Normal file
19
app/javascript/stylesheets/custom/structure/_general.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
260
app/javascript/stylesheets/custom/structure/_horizontal-nav.scss
Normal file
260
app/javascript/stylesheets/custom/structure/_horizontal-nav.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
951
app/javascript/stylesheets/custom/structure/_left-menu.scss
Normal file
951
app/javascript/stylesheets/custom/structure/_left-menu.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
72
app/javascript/stylesheets/custom/structure/_page-head.scss
Normal file
72
app/javascript/stylesheets/custom/structure/_page-head.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
388
app/javascript/stylesheets/custom/structure/_topbar.scss
Normal file
388
app/javascript/stylesheets/custom/structure/_topbar.scss
Normal file
@@ -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;
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
<div class="d-grid gap-2">
|
||||
<% wow_achievements.each do |achievement| %>
|
||||
<div class="card">
|
||||
<div class="card-header <% if achievement_completed(achievement.id, current_user) %>bg-success text-white<% else %>bg-secondary text-white<% end %>">
|
||||
<div class="card-header <% if achievement_completed(achievement.id, current_user) %>bg-primary text-white<% else %>bg-secondary text-white<% end %>">
|
||||
<%= achievement.name %><% if Rails.env.development? %> - ID: <%= achievement.achievement_id %><% end %>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
196
app/views/home/_landing.html.erb
Normal file
196
app/views/home/_landing.html.erb
Normal file
@@ -0,0 +1,196 @@
|
||||
<!-- NAVBAR START -->
|
||||
<nav class="navbar navbar-expand-lg py-lg-3 navbar-dark">
|
||||
<div class="container">
|
||||
<!-- logo -->
|
||||
<a href="/" class="navbar-brand me-lg-5">
|
||||
<%= image_pack_tag 'media/images/logo.png', alt: 'logo', height: 18, class: 'logo-dark' %>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
|
||||
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="mdi mdi-menu"></i>
|
||||
</button>
|
||||
<!-- menus -->
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<!-- left menu -->
|
||||
<ul class="navbar-nav me-auto align-items-center">
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link active" href="">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link" href="">Features</a>
|
||||
</li>
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link" href="">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link" href="">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link" href="">Clients</a>
|
||||
</li>
|
||||
<li class="nav-item mx-lg-1">
|
||||
<a class="nav-link" href="">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- right menu -->
|
||||
<ul class="navbar-nav ms-auto align-items-center">
|
||||
<li class="nav-item me-0">
|
||||
<%= button_to user_bnet_omniauth_authorize_path, class: 'btn btn-primary nav-item', name: 'login', form: { 'data-turbo': false } do %>
|
||||
Sign in with <i class="fab fa-battle-net"></i>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- NAVBAR END -->
|
||||
<!-- START HERO -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="mt-md-4">
|
||||
<div>
|
||||
<span class="badge bg-danger rounded-pill">New</span>
|
||||
<span class="text-white-50 ms-1">Welcome to new landing page</span>
|
||||
</div>
|
||||
<h2 class="text-white fw-normal mb-4 mt-3 hero-title">
|
||||
Responsive Web UI Kit & Dashboard Template
|
||||
</h2>
|
||||
<p class="mb-4 font-16 text-white-50">Hyper is a fully featured dashboard and admin template
|
||||
comes with tones of well designed UI elements, components, widgets and pages.</p>
|
||||
<a href="" target="_blank" class="btn btn-success">Preview <i
|
||||
class="mdi mdi-arrow-right ms-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 offset-md-2">
|
||||
<div class="text-md-end mt-3 mt-md-0">
|
||||
<%= image_pack_tag 'media/images/startup.svg', alt: 'startup', class: 'img-fluid' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END HERO -->
|
||||
|
||||
<!-- START FEATURES 1 -->
|
||||
<section class="py-5 bg-light-lighten border-top border-bottom border-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<h3>Flexible <span class="text-primary">Layouts</span></h3>
|
||||
<p class="text-muted mt-2">There are three different layout options available to cater need for
|
||||
any <br /> modern web
|
||||
application.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-1.png', alt: 'demo-img-1', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Vertical Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center mt-3 mt-lg-0">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-2.png', alt: 'demo-img-2', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Horizontal Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center mt-3 mt-lg-0">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-3.png', alt: 'demo-img-3', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Detached Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-5.png', alt: 'demo-img-5', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Light Sidenav Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center mt-3 mt-lg-0">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-6.png', alt: 'demo-img-6', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Boxed Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="demo-box text-center mt-3 mt-lg-0">
|
||||
<%= image_pack_tag 'media/images/layouts/layout-4.png', alt: 'demo-img-4', class: 'img-fluid shadow-sm rounded' %>
|
||||
<h5 class="mt-3 f-17">Semi Dark Layout</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END FEATURES 1 -->
|
||||
|
||||
<!-- START FOOTER -->
|
||||
<footer class="bg-dark py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<%= image_pack_tag 'media/images/logo.png', alt: 'features-1', class: 'logo-dark', height: 18 %>
|
||||
<p class="text-muted mt-4">Hyper makes it easier to build better websites with
|
||||
<br> great speed. Save hundreds of hours of design
|
||||
<br> and development by using it.</p>
|
||||
<ul class="social-list list-inline mt-3">
|
||||
<li class="list-inline-item text-center">
|
||||
<a href="javascript: void(0);" class="social-list-item border-primary text-primary"><i class="mdi mdi-facebook"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item text-center">
|
||||
<a href="javascript: void(0);" class="social-list-item border-danger text-danger"><i class="mdi mdi-google"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item text-center">
|
||||
<a href="javascript: void(0);" class="social-list-item border-info text-info"><i class="mdi mdi-twitter"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item text-center">
|
||||
<a href="javascript: void(0);" class="social-list-item border-secondary text-secondary"><i class="mdi mdi-github"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mt-3 mt-lg-0">
|
||||
<h5 class="text-light">Company</h5>
|
||||
<ul class="list-unstyled ps-0 mb-0 mt-3">
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">About Us</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Documentation</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Blog</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Affiliate Program</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mt-3 mt-lg-0">
|
||||
<h5 class="text-light">Apps</h5>
|
||||
<ul class="list-unstyled ps-0 mb-0 mt-3">
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Ecommerce Pages</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Email</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Social Feed</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Projects</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Tasks Management</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mt-3 mt-lg-0">
|
||||
<h5 class="text-light">Discover</h5>
|
||||
<ul class="list-unstyled ps-0 mb-0 mt-3">
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Help Center</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Our Products</a></li>
|
||||
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="mt-5">
|
||||
<p class="text-muted mt-4 text-center mb-0">© 2018 - 2021 Hyper. Design and coded by
|
||||
Coderthemes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- END FOOTER -->
|
||||
@@ -1,5 +1,7 @@
|
||||
<% if user_signed_in? %>
|
||||
<h1>Welcome <%= current_user.battletag %></h1>
|
||||
<% unless user_signed_in? %>
|
||||
<%= render 'home/landing' %>
|
||||
<% else %>
|
||||
<h1>Welcome guest</h1>
|
||||
<body class="loading" data-layout-config='{"darkMode":false}'>
|
||||
<%= yield %>
|
||||
</body>
|
||||
<% end %>
|
||||
|
||||
72
app/views/layouts/_left-sidebar.html.erb
Normal file
72
app/views/layouts/_left-sidebar.html.erb
Normal file
@@ -0,0 +1,72 @@
|
||||
<!-- ========== Left Sidebar Start ========== -->
|
||||
<div class="leftside-menu">
|
||||
|
||||
<!-- LOGO -->
|
||||
<a href="index.html" class="logo text-center logo-light">
|
||||
<span class="logo-lg">
|
||||
<%= image_pack_tag 'media/images/logo.png', alt: 'startup', height: 16 %>
|
||||
</span>
|
||||
<span class="logo-sm">
|
||||
<%= image_pack_tag 'media/images/logo_sm.png', alt: 'startup', height: 16 %>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="h-100" id="leftside-menu-container" data-simplebar>
|
||||
|
||||
<!--- Sidemenu -->
|
||||
<ul class="side-nav">
|
||||
|
||||
<li class="side-nav-item">
|
||||
<a data-bs-toggle="collapse" href="#sidebarCollection" aria-expanded="false" aria-controls="sidebarCollection" class="side-nav-link">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<span> Collections </span>
|
||||
<span class="fas fa-chevron-right"></span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarCollection">
|
||||
<ul class="side-nav-second-level">
|
||||
<li>
|
||||
<a class="<%= 'active' if current_page?(wow_mounts_path) %>" aria-current="page" href="<%= wow_mounts_path %>"><%= t('layouts.navbar.mounts') %></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="<%= 'active' if current_page?(wow_pets_path) %>" aria-current="page" href="<%= wow_pets_path %>"><%= t('layouts.navbar.pets') %></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="side-nav-item">
|
||||
<a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
<span> Games </span>
|
||||
<span class="fas fa-chevron-right"></span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarEmail">
|
||||
<ul class="side-nav-second-level">
|
||||
<li>
|
||||
<a class="<%= 'active' if current_page?(wow_characters_path) %>" aria-current="page" href="<%= wow_characters_path %>"><%= t('layouts.navbar.characters') %></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="<%= 'active' if current_page?(wow_reputations_path) %>" aria-current="page" href="<%= wow_reputations_path %>"><%= t('layouts.navbar.reputations') %></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="side-nav-item">
|
||||
<a class="side-nav-link <%= 'active' if current_page?(achievements_path) %>" aria-current="page" href="<%= achievements_path %>">
|
||||
<i class="fas fa-book"></i>
|
||||
<span> <%= t('layouts.navbar.achievements') %> </span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- End Sidebar -->
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
<!-- Sidebar -left -->
|
||||
|
||||
</div>
|
||||
<!-- Left Sidebar End -->
|
||||
@@ -1,19 +1,32 @@
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fas fa-globe-europe"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-de"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-gb"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-us"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-mx"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-br"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-es"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-fr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-it"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-ru"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-kr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-tw"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)) %></li>
|
||||
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-cn"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)) %></li>
|
||||
</ul>
|
||||
<li class="dropdown notification-list topbar-dropdown" id="locales">
|
||||
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
||||
<i class="fas fa-globe-europe align-middle"></i>
|
||||
<i class="fas fa-chevron-down d-none d-sm-inline-block align-middle"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu">
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-de align-middle">German</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-gb align-middle">English</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-us align-middle">American</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-mx align-middle">Mexicano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-br align-middle">Portugués</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-es align-middle">Español</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-fr align-middle">Français</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-it align-middle">Italiano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-ru align-middle">Pусский</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-kr align-middle">한국인</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-tw align-middle">台湾</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
|
||||
<%= link_to '<span class="flag-icon flag-icon-cn align-middle">中国人</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)), class: "dropdown-item notify-item" %>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
30
app/views/layouts/_topbar.html.erb
Normal file
30
app/views/layouts/_topbar.html.erb
Normal file
@@ -0,0 +1,30 @@
|
||||
<!-- Topbar Start -->
|
||||
<div class="navbar-custom">
|
||||
<ul class="list-unstyled topbar-menu float-end mb-0">
|
||||
|
||||
<%= render 'layouts/locales' %>
|
||||
|
||||
<li class="dropdown notification-list">
|
||||
<a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
||||
<span class="account-user-name"><%= current_user.battletag %></span>
|
||||
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
|
||||
<!-- item-->
|
||||
<div class=" dropdown-header noti-title">
|
||||
<h6 class="text-overflow m-0">Account</h6>
|
||||
</div>
|
||||
|
||||
<%= link_to '<i class="fas fa-sign-out-alt"> Logout</i>'.html_safe, destroy_user_session_path, method: :delete, class: "dropdown-item notify-item" %>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<button class="button-menu-mobile open-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<!-- end Topbar -->
|
||||
@@ -11,11 +11,26 @@
|
||||
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%= render 'layouts/navbar' %>
|
||||
<%= render partial: 'layouts/flash', flash: flash %>
|
||||
<div class="container-fluid">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<% if user_signed_in? %>
|
||||
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}' style="visibility: visible;" data-leftbar-theme="dark">
|
||||
<!-- Begin page -->
|
||||
<div class="wrapper">
|
||||
<%= render 'layouts/left-sidebar' %>
|
||||
|
||||
<div class="content-page">
|
||||
<div class="content">
|
||||
<%= render 'layouts/topbar' %>
|
||||
|
||||
<div class="container-fluid">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<% else %>
|
||||
<body class="loading" data-layout-config='{"darkMode":false}'>
|
||||
<%= yield %>
|
||||
</body>
|
||||
<% end %>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user