File manager - Edit - /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/rd-navbar_includes.tar
Back
_rd-navbar-mixins.scss 0000644 00000020242 15116256333 0010766 0 ustar 00 @keyframes rd-navbar-slide-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes rd-navbar-slide-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } // // Navbar Toggle Presets // @mixin toggle($width-size: 48px, $height-size: 48px, $font-size: 24px) { display: inline-block; position: relative; width: $width-size; height: $height-size; font-size: $font-size; line-height: $height-size; text-align: center; cursor: pointer; background: none; border: none; outline: none; padding: 0; } @mixin toggle-icons-via-rotation($width-size: 48px, $height-size: 48px, $font-size: 24px, $icon-before: '\f002', $icon-after: '\f00d', $icon-before-family: 'Material Design Icons', $icon-after-family: 'Material Design Icons') { span { @include toggle($width-size, $height-size, $font-size); &, &::before, &::after { transition: .3s all ease-in-out; } &::before, &::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } &::before { content: $icon-before; transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; font-family: $icon-before-family; } &::after { content: $icon-after; transform: rotate(-90deg) scale(.4); opacity: 0; visibility: hidden; font-family: $icon-after-family; } } &.active { span { &::before { opacity: 0; visibility: hidden; transform: rotate(90deg) scale(.4); } &::after { transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } } } } // Hamburger @mixin button-lines($size: 48px, $font-size: 24px, $border-radius: 2px, $color: #111111) { span { position: relative; display: block; margin: auto; transition: .3s all ease; &::after, &::before { content: ""; position: absolute; left: 0; top: -6px; transition: .3s all ease; } &::after { top: 6px; } &::after, &::before, & { width: $font-size; height: 2px; background-color: $color; backface-visibility: hidden; border-radius: $border-radius; } } } // Hamburger to Cross @mixin button-lines__cross-1($size: 48px, $font-size: 24px, $color: #111111) { &.active span { background: transparent; transition: .01s; &::before, &::after { transform-origin: 50% 50%; top: 0; } &::before { transform: rotate(45deg); } &::after { transform: rotate(-45deg); } } } @mixin button-lines__cross-2($size: 48px, $font-size: 24px, $color: #111111) { span { &::before, &::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; transition-property: top, transform; } } &.active span { transition: background .3s 0s ease; background: transparent; &::before, &::after { top: 0; transition-delay: 0s, 0.3s; } &::before { transform: rotate(45deg); } &::after { transform: rotate(-45deg); } } } @mixin button-lines__cross-3($size: 48px, $font-size: 24px, $color: #111111) { span { &::before, &::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; transition-property: top, transform; } } &.active span { transform: rotate(180deg); transition: background .3s 0s ease; background: transparent; &::before, &::after { top: 0; transition-delay: 0s, 0.3s; } &::before { transform: rotate(45deg); } &::after { transform: rotate(-45deg); } } } // Hamburger to Arrow @mixin button-lines__arrow-1($size: 48px, $font-size: 24px, $color: #111111) { span { &::before, &::after { transform-origin: $font-size/14 center; } } &.active span { &::before, &::after { top: 0; width: $font-size/1.6; } &::before { transform: rotate(-40deg); } &::after { transform: rotate(40deg); } } } // Hamburger to Arrow (Material Design) @mixin button-lines__arrow-2($size: 48px, $font-size: 24px, $color: #111111) { span { transform: rotate(180deg); &::before, &::after { transform-origin: $font-size/14 center; } } &.active span { transform: rotate(360deg); &::before, &::after { top: 0; width: $font-size/1.6; } &::before { transform: rotate3d(0, 0, 1, -40deg); } &::after { transform: rotate3d(0, 0, 1, 40deg); } } } // Hamburger to Minus @mixin button-lines__minus-1($size: 48px, $font-size: 24px, $color: #111111) { span { &::before, &::after { transition: .3s all ease; } } &.active span { &::before, &::after { top: 0; } } } @mixin search-preset-1($size: 48px, $font-size: 24px, $color: #111111) { text-align: center; font-size: $font-size; &::before { content: "\f002"; font-weight: 400; font-family: "FontAwesome"; } &.active { transform: scale(0.7); } } @mixin collapse-preset-1($size: 48px, $font-size: 24px, $color: #111111) { span { top: 50%; margin-top: -($size / 16); &, &::before, &::after { position: absolute; width: $size / 8; height: $size / 8; line-height: $size / 8; text-align: center; background: $color; left: 50%; margin-left: -($size / 16); border-radius: 50%; transition: .3s all ease; } &::before, &::after { content: ''; } &::before { bottom: 100%; margin-bottom: ($size / 16); } &::after { top: 100%; margin-top: ($size / 16); } } &.active { span { transform: scale(0.7); &::before { transform: translateY(($size / 8)*2 + ($size / 16)*2); } &::after { transform: translateY(-(($size / 8)*2 + ($size / 16)*2)); } } } } @mixin make-toggle($preset: "button-lines-arrow-2", $size: 48px, $font-size: 24px, $border-radius: 2px, $color: #111111) { display: inline-block; position: relative; width: $size; height: $size; line-height: $size; cursor: pointer; color: $color; @if ($preset == "collapse-preset-1") { @include collapse-preset-1($size, $font-size, $color); } @if ($preset == "search-preset-1") { @include search-preset-1($size, $font-size, $color); } @if ($preset == "button-lines-cross-1") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__cross-1($size, $font-size, $color); } @if ($preset == "button-lines-cross-2") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__cross-2($size, $font-size, $color); } @if ($preset == "button-lines-cross-3") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__cross-3($size, $font-size, $color); } @if ($preset == "button-lines-arrow-1") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__arrow-1($size, $font-size, $color); } @if ($preset == "button-lines-arrow-2") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__arrow-2($size, $font-size, $color); } @if ($preset == "button-lines-minus-1") { @include button-lines($size, $font-size, $border-radius, $color); @include button-lines__minus-1($size, $font-size, $color); } } // RD Navbar Submenu with Arrow @mixin submenu-with-arrow() { li { > a { position: relative; left: -13px; display: flex; padding: 4px 18px 4px 0; text-align: left; @include link($rd-navbar-dropdown-item-color, $rd-navbar-dropdown-item-hover-color); &, &::before { transition: all .2s ease-in-out; } &::before { position: relative; top: -1px; left: -6px; display: inline-block; content: '\f238'; font-family: 'Material Design Icons'; font-size: inherit; line-height: inherit; color: $rd-navbar-dropdown-item-hover-color; opacity: 0; visibility: hidden; } } &.focus > a, &.opened > a, > a:hover { left: -13px; padding-left: 18px; padding-right: 0; &::before { left: -7px; opacity: 1; visibility: visible; } } } } _rd-navbar-static.scss 0000644 00000015453 15116256333 0010756 0 ustar 00 /* * @subsection RD Navbar Static */ // - li first level and li // - link first level and link // - menus // - dropdowns // - megamenus // - rd-search // - submenus .rd-navbar-static { display: block; // RD Navbar Nav // // RD Nav item 1-st level .rd-nav-item { display: inline-block; &.focus, &.opened { .rd-nav-link { color: $rd-navbar-nav-hover-color; background: $rd-navbar-nav-hover-background; } > .rd-navbar-submenu-toggle { color: $rd-navbar-nav-hover-color; } } &.active { .rd-nav-link { color: $rd-navbar-nav-active-color; background: $rd-navbar-nav-active-background; } > .rd-navbar-submenu-toggle { color: $rd-navbar-nav-active-color; } } &.focus > .rd-navbar-submenu-toggle, &.opened > .rd-navbar-submenu-toggle, .rd-nav-link:hover + .rd-navbar-submenu-toggle { &::before { transform: rotate(180deg); } } > .rd-navbar-submenu-toggle { margin-left: 4px; font-family: "Material Design Icons"; font-size: 16px; cursor: pointer; &::before { position: relative; display: inline-block; transition: .22s; content: '\f236'; } &:hover { color: $rd-navbar-nav-hover-color; } } // If Have submenu > .rd-navbar-submenu { margin-top: 20px; } } .rd-nav-item + .rd-nav-item { margin-left: 25px; @include media-breakpoint-up(xl) { margin-left: 35px; } } // Rd Nav Link 1-st level .rd-nav-link { position: relative; display: inline-block; color: $rd-navbar-nav-color; transition: .25s; &:hover { color: $rd-navbar-nav-hover-color; } } // Rd Menu (dropdown and megamenu) .rd-menu { position: absolute; z-index: 15; display: block; padding: $rd-navbar-menu-padding; margin-top: 22px; margin-left: - nth($rd-navbar-menu-padding, 2); visibility: hidden; opacity: 0; text-align: left; box-shadow: 0 5px 10px 1px rgba(darken($rd-navbar-dropdown-background, 10%), .3); border-radius: $border-radius-lg; transform: translate3d(0, 30px, 0); @extend %rd-navbar-transition; } .rd-dropdown-item + .rd-dropdown-item, .rd-megamenu-list-item + .rd-megamenu-list-item { margin-top: 7px; } // RD Dropdown 1-st level .rd-navbar-dropdown { position: absolute; left: 0; width: $rd-navbar-dropdown-width; background: $rd-navbar-dropdown-background; z-index: 5; .rd-navbar-dropdown { top: -1px; left: 100%; z-index: 2; margin-top: -15px; margin-left: 15px; transform: translate3d(30px, 0, 0); // If the menu is on the right edge window &.rd-navbar-open-left { left: auto; right: 100%; margin-left: 0; margin-right: 15px; transform: translate3d(-30px, 0, 0); } } } .rd-dropdown-item { &.focus, &.opened { .rd-dropdown-link { color: $rd-navbar-dropdown-item-active-color; } } } .rd-dropdown-link { color: $rd-navbar-dropdown-item-color; &:hover { color: $rd-navbar-dropdown-item-hover-color; } } .rd-navbar-dropdown, .rd-megamenu-list { @include submenu-with-arrow; } // RD all megamenu .rd-navbar-megamenu { display: flex; left: 0; width: 100%; overflow: hidden; max-width: $rd-navbar-width; background: $rd-navbar-megamenu-background; } // Megamenu item 1st level .rd-megamenu-item { flex-basis: 50%; flex-grow: 1; + .rd-megamenu-item { padding-left: 20px; } } .rd-megamenu-item { display: flex; .banner { position: relative; display: flex; align-items: flex-end; justify-content: center; text-align: center; min-width: 100%; padding: 35px; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba($black, .1); } .button-primary { &:hover { background: $primary-lighten; border-color: $primary-lighten; } } > * { opacity: 0; visibility: hidden; transform: translate(0, -20%); transition: .22s; } &:hover { > * { opacity: 1; visibility: visible; transform: translate(0, 0); } } } &:first-child, &:last-child { .banner { margin-top: - nth($rd-navbar-menu-padding, 1); margin-right: - nth($rd-navbar-menu-padding, 2); margin-bottom: - nth($rd-navbar-menu-padding, 1); margin-left: - nth($rd-navbar-menu-padding, 2); } } } // Megamenu title .rd-megamenu-title { padding-bottom: 10px; border-bottom: 1px solid $gray-200; } // Megamenu list link .rd-megamenu-list-link { color: $rd-navbar-megamenu-item-color; background: $rd-navbar-megamenu-item-background; &:hover { color: $rd-navbar-megamenu-item-hover-color; background: $rd-navbar-megamenu-item-hover-background; } } // Megamenu list offset * + .rd-megamenu-list { margin-top: 10px; } // RD all submenus .rd-navbar-submenu { &.focus, &.opened { > .rd-menu { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } } } // RD navbar search .rd-navbar-search { &.active { .rd-search { visibility: visible; opacity: 1; } .not-empty ~ .form-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .rd-search { margin-top: 40px; } .form-input { padding-right: $form-input-padding-horizontal; } .rd-search-form-submit { display: none; } } .rd-search { position: absolute; top: 100%; right: 0; width: 370px; opacity: 0; visibility: hidden; transition: .3s; margin-top: 20px; z-index: 2; } // RD search offset * + .rd-navbar-search { margin-left: $navbar-static-nav-indent; } .rd-navbar-search-toggle { display: inline-flex; @include toggle-icons-via-rotation(32px, 32px, 26px, '\f43b', '\f24c', 'Material Design Icons', 'Material Design Icons'); color: $rd-navbar-nav-color; &:hover { color: $rd-navbar-nav-hover-color; } } @include media-breakpoint-up(xl) { .rd-nav-item + .rd-nav-item { margin-left: 45px; } } // RD navbar Clone &.rd-navbar--is-clone { display: block; transform: translate3d(0, -100%, 0); &.rd-navbar--is-stuck { transform: translate3d(0, 0, 0); } } // RD Navbar Stuck || Clone &.rd-navbar--is-stuck, &.rd-navbar--is-clone { position: fixed; left: 0; top: 0; right: 0; z-index: $zindex-rd-navbar; background: $rd-navbar-background; will-change: transform; } // RD Navbar States .rd-navbar--has-dropdown { position: relative; } .rd-navbar-nav{ padding-left: 50px; @include media-breakpoint-up(xl) { padding-left: 0; } } } _rd-navbar-sidebar.scss 0000644 00000013700 15116256333 0011071 0 ustar 00 /* * * RD Navbar Sidebar */ $rd-navbar-sidebar-width: map-get($container-max-widths, xl); .rd-navbar-sidebar { display: block; background: $white; .rd-navbar-main-outer { padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; } // RD Navbar Main .rd-navbar-main { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 60px 22px 0; max-width: $rd-navbar-sidebar-width; margin-left: auto; margin-right: auto; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .rd-navbar-main-element { display: flex; align-items: center; > * + * { margin-left: 20px; } } // RD Navbar Toggle .rd-navbar-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; z-index: $zindex-layout-panel + 2; } // RD Navbar Panel .rd-navbar-panel { min-width: 200px; text-align: center; } // RD Navbar Brand .rd-navbar-brand { img { width: auto; height: auto; max-width: 200px; max-height: 200px; } } // RD Navbar Nav Wrap Inner .rd-navbar-nav-wrap { position: fixed; top: 0; bottom: 0; right: 0; z-index: $zindex-layout-panel + 1; width: 450px; padding: 94px 0 0 0; background: $white; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); box-shadow: 0 0 13px 0 rgba($gray-300, .16); &.active { transition-delay: .1s; transform: translateX(0); } } .rd-navbar-nav { height: calc(100vh - 100px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid $gray-200; } .rd-nav-item { position: relative; display: block; padding: 19px 30px 19px 40px; &.active { .rd-nav-link { color: $primary; } } .rd-nav-link, > .rd-navbar-submenu-toggle { font-size: 18px; } + .rd-nav-item { border-top: 1px solid $gray-200; } &:last-child { border-bottom: 1px solid $gray-200; margin-bottom: 30px; } } .rd-nav-link { max-width: calc(100% - 30px); word-break: break-all; font-size: 18px; line-height: 1.4; text-transform: none; color: $gray-300; &:hover { color: $primary; } } // RD Navbar Submenu .rd-navbar-submenu { .opened > .rd-navbar-submenu-toggle { &::after { transform: rotate(180deg); } } > .rd-navbar-dropdown, > .rd-navbar-megamenu { display: none; opacity: 0; visibility: hidden; will-change: opacity, visibility; transition: opacity .2s; } &.opened { > .rd-navbar-dropdown, > .rd-navbar-megamenu { display: block; opacity: 1; visibility: visible; } } > .rd-navbar-submenu { > .rd-navbar-dropdown, > .rd-navbar-megamenu { transform: translateY(30px); } &.opened { > .rd-navbar-dropdown, > .rd-navbar-megamenu { transform: translateY(0); } } .rd-navbar-submenu { > .rd-navbar-dropdown { transform: translateX(-20px); } &.opened { > .rd-navbar-dropdown { transform: translateX(0); } } } } } // RD Navbar Submenu Toggle .rd-nav-item > .rd-navbar-submenu-toggle, .rd-nav-item .rd-navbar--has-dropdown > .rd-navbar-submenu-toggle { position: absolute; top: 0; right: 0; padding-top: inherit; padding-right: inherit; padding-left: 10px; margin-bottom: inherit; display: inline-block; width: 30px; margin-left: 5px; text-align: center; cursor: pointer; color: $rd-navbar-nav-color; &:hover { color: $primary; } &::after { content: '\f107'; position: relative; display: inline-block; font-family: "FontAwesome"; font-size: inherit; line-height: inherit; text-align: center; vertical-align: middle; transition: 0.4s all ease; z-index: 2; will-change: transform; } } .rd-nav-item .rd-navbar--has-dropdown > .rd-navbar-submenu-toggle { font-size: 14px; color: $gray-300; margin-left: 7px; } // RD Navbar Submenu .rd-menu { margin-top: 31px; } .rd-navbar-dropdown, .rd-megamenu-list { font-size: 14px; @include submenu-with-arrow; } // RD Navbar Megamenu .rd-navbar-megamenu { max-width: 450px; @include groupY(30px); > li { display: inline-block; vertical-align: top; width: 45%; } } .rd-megamenu-title { display: none; } .rd-megamenu-list { margin-top: 0; > li + li { margin-top: 10px; } } // RD Navbar Dropdown .rd-navbar-dropdown { .rd-navbar--has-dropdown { > a { padding-right: 0; &::before { display: none; } &:hover { padding-left: 0; } } &.focus > a { padding-left: 0; } } .rd-navbar--has-dropdown.opened > .rd-navbar-submenu-toggle { color: $primary; &::after { top: 1px; } } > li + li { margin-top: 10px; } } .rd-nav-item > .rd-navbar-dropdown { margin-top: 25px; .rd-navbar-dropdown { margin-top: 10px; padding-left: 15px; > li > a { font-size: 12px; } } } @include media-breakpoint-up(xl) { .rd-navbar-megamenu { @include groupY(30px); } .rd-navbar-dropdown, .rd-megamenu-list { > li + li { margin-top: 18px; } } } @include media-breakpoint-up(xl) { .rd-navbar-nav-wrap { width: auto; left: calc(50% + 600px - 80px); } } // States &.rd-navbar--is-clone { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transform: translateY(-101%); &.rd-navbar--is-stuck { transform: translateY(0); } } &.rd-navbar--is-stuck { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; box-shadow: 0 2px 10px 1px rgba($black, .1); .rd-navbar-main { padding-top: 11px; padding-bottom: 11px; } } } rd-navbar_themes/_rd-navbar-corporate.scss 0000644 00000005014 15116256333 0014676 0 ustar 00 /** * * RD Navbar Corporate * */ .rd-navbar-corporate { // Static &.rd-navbar-static { border-bottom: 1px solid transparent; .rd-navbar-aside-outer, .rd-navbar-main-outer { padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; } .rd-navbar-aside, .rd-navbar-main { max-width: $rd-navbar-static-width; margin-left: auto; margin-right: auto; } // RD Navbar Aside .rd-navbar-aside { display: flex; align-items: center; justify-content: space-between; padding: 30px 0 40px; } // RD Navbar Brand .rd-navbar-brand { img { width: auto; height: auto; max-width: 200px; max-height: 200px; } } // RD Navbar Main .rd-navbar-main-outer { background: $gray-100; } .rd-navbar-main { position: relative; padding: 16px 0; } .rd-navbar-nav-wrap { position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; min-width: 690px; } // RD Navbar Collapse .ie-10 &, .ie-11 & { .rd-navbar-collapse { width: 100%; max-width: 870px; } .unit { flex: auto; } } .rd-navbar-panel + .rd-navbar-collapse { margin-left: 50px; } .rd-navbar-collapse-content { display: flex; align-items: center; justify-content: center; .button { flex-shrink: 0; } > * { margin-top: 0; } > * + * { margin-left: 50px; } } .rd-menu { margin-top: 21px; } .rd-navbar-megamenu { margin-top: 24px; max-width: 750px; } // RD Navbar Search .rd-navbar-search {} .rd-navbar-search-toggle { } @include media-breakpoint-up(xl) { .rd-navbar-collapse-content { > * + * { margin-left: 92px; } } .rd-nav-item + .rd-nav-item { margin-left: 55px; } } &.rd-navbar--is-stuck, &.rd-navbar--is-clone { border-bottom-color: nth($rd-navbar-border, 3); .rd-navbar-aside-outer { display: none; } .rd-navbar-nav-item { > .rd-navbar-submenu { margin-top: 17px; } } } } // Fixed &.rd-navbar-fixed { // RD Search .rd-navbar-search { margin: 20px 5px; } .rd-navbar-search-toggle { display: none; } .rd-search { position: relative; top: 0; left: 0; transform: none; opacity: 1; visibility: visible; z-index: 1; } .rd-navbar-nav { margin: 0; } } } rd-navbar_themes/_rd-navbar-minimal.scss 0000644 00000005566 15116256333 0014342 0 ustar 00 /** * * RD Navbar Minimal * */ .rd-navbar-minimal { // Static &.rd-navbar-static { border-bottom: 1px solid transparent; .rd-navbar-main-outer { padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; } .rd-navbar-main { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: $rd-navbar-static-width; padding: 20px 0; margin-left: auto; margin-right: auto; } .rd-navbar-main-element { position: relative; display: flex; align-items: center; justify-content: space-between; min-width: 690px; } // RD Navbar Brand .rd-navbar-brand { img { width: auto; height: auto; max-width: 233px; max-height: 200px; } } .rd-navbar-megamenu { margin-top: 24px; width: calc(100% + #{nth($rd-navbar-menu-padding, 2)} + 15px); } // RD Navbar Search .rd-navbar-search {} .rd-navbar-search-toggle { span { font-size: 20px; } } @include media-breakpoint-up(xl) { .rd-navbar-main { padding: 30px 0; } .rd-menu { margin-top: 34px; } } &.rd-navbar--is-stuck, &.rd-navbar--is-clone { border-bottom-color: nth($rd-navbar-border, 3); .rd-navbar-main { padding: 20px 0; } .rd-menu { margin-top: 24px; } .rd-navbar-nav-item { > .rd-navbar-submenu { margin-top: 17px; } } } } // Fixed &.rd-navbar-fixed { .rd-navbar-search-toggle { position: fixed; right: 10px; top: 5px; } .rd-navbar-search { .form-input { border-width: 1px 0 1px 0; border-radius: 0; } } } .rd-menu{ .rd-dropdown-item{ .rd-dropdown-link{ @include link($accent-dark, $primary) } } .rd-megamenu-item{ .rd-megamenu-list-item{ .rd-megamenu-list-link{ @include link($accent-dark, $primary) } } } } } .rd-navbar-minimal-wide { &.rd-navbar-static { .rd-navbar-main { padding: 54px 0; } &.rd-navbar--is-stuck { .rd-navbar-main { padding: 21px 0; } } } } %context-dark { .rd-navbar-minimal { .rd-nav-link, .rd-navbar-submenu-toggle, .rd-navbar-search-toggle { color: $white; } &.rd-navbar-static { background-color: transparent; .rd-nav-item.opened .rd-nav-link, .rd-nav-item.focus .rd-nav-link, .rd-nav-item.active .rd-nav-link, .rd-nav-item.opened .rd-navbar-submenu-toggle, .rd-nav-item.focus .rd-navbar-submenu-toggle, .rd-nav-item.active .rd-navbar-submenu-toggle, .rd-nav-link:hover, .rd-nav-link:hover ~ .rd-navbar-submenu-toggle, .rd-navbar-search-toggle:hover { color: lighten($primary, 20%); } &.rd-navbar--is-stuck { background: $gray-700; border-bottom-color: $gray-800; } } } } rd-navbar_themes/_rd-navbar-thin.scss 0000644 00000012747 15116256333 0013655 0 ustar 00 /** * * RD Navbar Thin * */ .rd-navbar-thin { // Static &.rd-navbar-static { background-color: $gray-700; border-bottom: 1px solid transparent; .rd-navbar-main-outer { padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; } .rd-navbar-main { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: $rd-navbar-static-width; padding: 23px 0; margin-left: auto; margin-right: auto; } .rd-navbar-nav-wrap { position: absolute; top: 0; bottom: 0; left: 200px; right: 80px; z-index: 102; display: flex; align-items: center; justify-content: flex-end; min-width: 690px; background: $gray-700; opacity: 0; visibility: hidden; transition: .44s ease-in-out; .rd-navbar-brand { display: none; } &.active { opacity: 1; visibility: visible; } } .rd-navbar-panel { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 50px; } .ie-10 &, .ie-11 & { .rd-navbar-panel { justify-content: flex-start; } .rd-navbar-block { width: 100%; justify-content: flex-end; } } .rd-navbar-toggle { position: absolute; right: 0; top: 50%; display: block; transform: translate3d(0, -50%, 0); } .rd-navbar-block { display: flex; align-items: center; } // RD Navbar Brand .rd-navbar-brand { max-width: 300px; img { width: auto; height: auto; max-width: 200px; max-height: 200px; } } .rd-nav-link, .rd-navbar-submenu-toggle, .rd-navbar-search-toggle { color: $white; } .rd-nav-item.opened .rd-nav-link, .rd-nav-item.focus .rd-nav-link, .rd-nav-item.active .rd-nav-link, .rd-nav-item.opened .rd-navbar-submenu-toggle, .rd-nav-item.focus .rd-navbar-submenu-toggle, .rd-nav-item.active .rd-navbar-submenu-toggle, .rd-nav-link:hover, .rd-nav-link:hover ~ .rd-navbar-submenu-toggle, .rd-navbar-search-toggle:hover { color: lighten($primary, 20%); } .rd-menu { margin-top: 27px; } .rd-navbar-megamenu { margin-top: 24px; width: calc(100% + #{nth($rd-navbar-menu-padding, 2)} + 15px); } // RD Navbar Search .rd-navbar-search { position: static; } * + .rd-navbar-search-toggle { margin-left: 60px; } .rd-search { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; width: calc(100% - 70px); margin: 0; .form-wrap { display: flex; width: 100%; background: $gray-700; &::before { content: '\f43b'; position: absolute; top: 50%; transform: translate3d(0, -50%, 0); font-family: 'Material Design Icons'; font-size: 30px; line-height: 1; color: $white; } } .form-input, .form-label { padding-left: 40px; font-size: 30px; color: $white; } .form-input { background-color: transparent; border: 0; border-radius: 0; } .form-label { top: 50%; transform: translate3d(0, -50%, 0); } } .rd-search-results-live { height: 100vh; margin: 1px 0 0 0; } .search-list { display: flex; flex-wrap: wrap; margin-bottom: -20px; } .search-list-item { width: 25%; padding-left: 15px; padding-right: 15px; margin-bottom: 20px; } .search-list-item + .search-list-item { margin-top: 0; } .rd-navbar-search-toggle { position: relative; z-index: 12; } // RD Navbar Popup .rd-navbar-popup-toggle { } .rd-navbar-popup { left: 50%; z-index: 110; transform: translateX(-50%); margin-top: 30px; } .list-inline-bordered { position: relative; } @include media-breakpoint-between(lg, lg) { .rd-nav-item + .rd-nav-item { margin-left: 30px; } } @include media-breakpoint-up(xl) { .rd-navbar-panel { padding-right: 70px; } .rd-navbar-nav-wrap { left: 300px; right: 70px; } } @include media-breakpoint-up(xxl) { .rd-navbar-popup { right: auto; } } &.rd-navbar--is-stuck, &.rd-navbar--is-clone { border-bottom-color: $gray-800; .rd-menu { margin-top: 27px; } } } // Fixed &.rd-navbar-fixed { // RD Search .rd-navbar-search { .form-input { border-width: 0 0 1px 0; border-radius: 0; } } .rd-search { } .rd-navbar-search-toggle { position: fixed; top: 5px; right: 8px; color: $white; span { font-size: 20px; } } // RD Navbar Block .rd-navbar-block { position: absolute; top: 14px; right: 65px; } // RD Navbar Popup .rd-navbar-popup { position: fixed; right: 5px; margin-top: 20px; overflow-y: auto; max-height: calc(100vh - #{$rd-navbar-fixed-height} - 10px); } // RD Navbar Brand .rd-navbar-brand { display: none; } .rd-navbar-nav-wrap { .rd-navbar-brand { display: inline-block; line-height: 0; font-size: 0; margin: 30px 20px 20px; } } @media (min-width: 480px) { .rd-navbar-brand { display: block; } .rd-navbar-nav-wrap { .rd-navbar-brand { display: none; } } } } } _rd-navbar-fixed.scss 0000644 00000023636 15116256333 0010570 0 ustar 00 /* * * RD Navbar Fixed */ $rd-navbar-fixed-height: $rd-navbar-min-height; $rd-navbar-fixed-line-height: $rd-navbar-min-line-height; $rd-navbar-fixed-panel-color: $gray-700; $rd-navbar-fixed-panel-background: $white; $rd-navbar-fixed-shadow: 0 0 10px 0 rgba($black, .05); $rd-navbar-fixed-border: $rd-navbar-border; $rd-navbar-fixed-nav-color: $rd-navbar-color; $rd-navbar-fixed-nav-background: $rd-navbar-background; $rd-navbar-fixed-nav-active-color: $white; $rd-navbar-fixed-nav-active-background: $primary; $rd-navbar-fixed-menu-item-color: $gray-700; $rd-navbar-fixed-menu-item-hover-color: $white; $rd-navbar-fixed-menu-item-background: $rd-navbar-fixed-panel-background; $rd-navbar-fixed-menu-item-hover-background: $primary; $rd-navbar-fixed-menu-item-font-size: 14px; $rd-navbar-fixed-menu-item-line-height: 24px; $rd-navbar-fixed-menu-item-height: 52px; $rd-navbar-fixed-menu-item-padding-vertical: ($rd-navbar-fixed-menu-item-height - $rd-navbar-fixed-menu-item-line-height) / 2; $rd-navbar-fixed-menu-item-padding-horizontal: 18px; $rd-navbar-fixed-submenu-toggle-color: $gray-700; $rd-navbar-fixed-submenu-toggle-focus-color: $white; .rd-navbar-fixed { display: block; width: 100%; // Reveal nav panel toggle .rd-navbar-toggle { display: inline-block; } // RD Navbar Brand .rd-navbar-brand { position: relative; top: -2px; margin-left: 6px; font-size: 0; line-height: 0; text-align: left; img { max-width: 160px; max-height: 58px; width: auto; height: auto; } } // RD Navbar Panel .rd-navbar-panel { position: fixed; left: 0; top: 0; right: 0; z-index: $zindex-rd-navbar; display: flex; align-items: center; height: $rd-navbar-fixed-height; padding: ($rd-navbar-fixed-height - $rd-navbar-fixed-line-height) / 2; } // Nav wrap and Search into nav wrap styles .rd-navbar-nav-wrap { @extend %rd-navbar-transition; position: fixed; left: 0; top: -$rd-navbar-min-height; bottom: -$rd-navbar-min-height; z-index: $zindex-rd-navbar - 1; width: $rd-navbar-nav-min-width; padding: $rd-navbar-min-height * 2 0 ($rd-navbar-min-height + 25px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; font-size: 14px; line-height: 34px; transform: translateX(-110%); &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-thumb { background: lighten($primary, 20%); border: none; border-radius: 0; opacity: .2; } &::-webkit-scrollbar-track { background: $primary; border: none; border-radius: 0; } &.active { transform: translateX(0); } } // RD Navbar Nav .rd-navbar-nav { display: block; margin: 15px 0; height: auto; text-align: left; } .rd-nav-item { text-align: left; + .rd-nav-item { margin-top: 4px; } } .rd-nav-link { display: block; padding: $rd-navbar-fixed-menu-item-padding-vertical 56px $rd-navbar-fixed-menu-item-padding-vertical $rd-navbar-fixed-menu-item-padding-horizontal; } li { &.opened { > .rd-navbar-dropdown { padding: 4px 0 0; } > .rd-navbar-megamenu { padding-top: 15px; padding-bottom: 15px; } > .rd-menu { opacity: 1; height: auto; } > .rd-navbar-submenu-toggle { &::after { transform: rotate(180deg); } } } } .rd-menu { display: none; transition: opacity 0.3s, height 0.4s ease; opacity: 0; height: 0; overflow: hidden; } .rd-navbar-submenu { position: relative; @extend %rd-navbar-transition; .rd-navbar-dropdown { .rd-navbar-submenu-toggle:after { height: 34px; line-height: 34px; } } .rd-navbar-dropdown > li > a { padding-left: 30px; } .rd-navbar-dropdown li li > a, .rd-navbar-megamenu ul li li > a { padding-left: 46px; } &.opened { > .rd-navbar-dropdown, > .rd-navbar-megamenu { display: block; } } } .rd-megamenu-list, .rd-navbar-dropdown { > li > a { display: block; padding: 9px 56px 9px 16px; font-size: 14px; line-height: 1.5; } > li + li { margin-top: 3px; } } .rd-megamenu-list { > li > a { padding-left: 30px; } } .rd-navbar-megamenu { .rd-megamenu-title { position: relative; display: block; padding: 0 $rd-navbar-fixed-menu-item-padding-horizontal 7px; font-size: 16px; line-height: 1.5; &::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; border-bottom: 1px solid; } } // Offsets * + .rd-megamenu-list { margin-top: 11px; } * + .rd-megamenu-title { margin-top: 20px; } > li + li { margin-top: 20px; } } // RD Navbar toggle .rd-navbar-submenu-toggle { cursor: pointer; &::after { content: '\f107'; position: absolute; top: 0; right: 0; width: 56px; height: $rd-navbar-fixed-menu-item-height - 4px; font: 400 14px "FontAwesome"; line-height: $rd-navbar-fixed-menu-item-height - 4px; text-align: center; transition: 0.4s all ease; z-index: 2; cursor: pointer; } } // RD Navbar Collapse .rd-navbar-collapse-toggle { display: block; top: round(($rd-navbar-min-height - $rd-navbar-min-line-height) / 2); z-index: $zindex-rd-navbar + 1; } .rd-navbar-collapse-content { position: fixed; right: 0; top: $rd-navbar-fixed-height; z-index: $zindex-rd-navbar - 1; transform: translate3d(0, -10px, 0); padding: 30px; width: auto; border-radius: 0 0 0 $border-radius-lg; text-align: left; font-size: 14px; opacity: 0; visibility: hidden; transition: .3s; &.active { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; } } .rd-navbar-collapse-content { > * + * { margin-top: 25px; } } .rd-navbar-main-outer, .rd-navbar-main-element { position: absolute; float: left; width: 100%; } // RD Navbar Search .rd-navbar-search { .rd-search { position: fixed; right: 0; left: 0; top: $rd-navbar-fixed-height; z-index: $zindex-rd-navbar - 1; width: 100%; opacity: 0; visibility: hidden; transition: .3s; transform: translate3d(0, -100%, 0); } .rd-search-results-live { display: none; } .form-input { padding-right: 60px; } .rd-search-form-submit { position: absolute; top: 0; bottom: 0; right: 7px; width: 50px; padding: 0; margin: 0; border: none; background-color: transparent; } &.active { .rd-search { opacity: 1; visibility: visible; transform: none; } } } // Search toggle .rd-navbar-search-toggle { display: inline-flex; @include toggle-icons-via-rotation(48px, 48px, 26px, '\f43b', '\f24c', 'Material Design Icons', 'Material Design Icons'); } [class*='rd-navbar-fixed-element'] { position: fixed; top: ($rd-navbar-fixed-height - $rd-navbar-fixed-line-height) / 2; z-index: $zindex-rd-navbar + 2; } .rd-navbar-fixed-element-1 { right: 0; } .rd-navbar-fixed-element-2 { right: 46px; } &.rd-navbar--is-clone { display: none; } .rd-navbar-fixed--visible { display: block; } .rd-navbar-fixed--hidden { display: none; } } // Default color theme .rd-navbar-fixed { // RD Navbar Panel .rd-navbar-panel { color: $rd-navbar-fixed-panel-color; box-shadow: $rd-navbar-fixed-shadow; background: $rd-navbar-fixed-panel-background; } // RD Navbar Nav Wrap .rd-navbar-nav-wrap { color: $white; background: $rd-navbar-background; border-right: $rd-navbar-border; box-shadow: $rd-navbar-fixed-shadow; } // RD Navbar Nav .rd-nav-item { &:hover, &.focus, &.active, &.opened { .rd-nav-link { color: $rd-navbar-fixed-menu-item-hover-color; background: $rd-navbar-fixed-menu-item-hover-background; } > .rd-navbar-submenu-toggle { color: $rd-navbar-fixed-submenu-toggle-focus-color; } } } .rd-nav-link { color: $rd-navbar-fixed-panel-color; } // Mixed RD Navbar Dropdown & Megamenu .rd-megamenu-list, .rd-navbar-dropdown { > li > a { color: $gray-700; } > li:hover, > li.focus, > li.active, > li.opened { > a { color: $rd-navbar-fixed-menu-item-hover-color; background: $primary; } } } // RD Navbar megamenu .rd-navbar-megamenu { .rd-megamenu-title { color: $gray-300; &::after { border-bottom: $rd-navbar-border; } a { @include link($white, $primary); } } } .rd-navbar-submenu-toggle { color: $rd-navbar-fixed-panel-color; } // RD Navbar Search .rd-navbar-search { .rd-search-form-submit { color: $gray-300; &:hover { color: $primary; } } } // Search toggle .rd-navbar-search-toggle { color: $rd-navbar-panel-color; &:hover { color: $primary; } } // RD Navbar Collapse .rd-navbar-collapse-content { background-color: $rd-navbar-fixed-panel-background; box-shadow: $rd-navbar-shadow; } // Banner .banner { position: relative; overflow: hidden; padding: 20px; margin: 10px; border-radius: $border-radius-lg; text-align: center; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba($gray-700, .4); border-radius: inherit; } } } html.rd-navbar-fixed-linked { .page { padding-top: $rd-navbar-fixed-height; } } %context-dark { .rd-navbar-fixed { .rd-navbar-panel { background: $gray-700; } .rd-navbar-nav-wrap { border-right-color: $gray-700; background: darken($gray-700, 2%); } .rd-nav-link, .rd-navbar-submenu-toggle { color: $white; } .rd-navbar-dropdown > li > a, .rd-megamenu-list-link { color: $gray-200; } } }
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings