v2 first commit

This commit is contained in:
denisdulici
2019-11-16 10:21:14 +03:00
parent 5b23e9c2c4
commit 6d50fa8442
3075 changed files with 3451681 additions and 65594 deletions

View File

@ -0,0 +1,37 @@
//
// Navabar collapse
//
// Collapse
.navbar-collapse-header {
display: none;
}
@keyframes show-navbar-collapse {
0% {
opacity: 0;
transform: scale(.95);
transform-origin: 100% 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-navbar-collapse {
from {
opacity: 1;
transform: scale(1);
transform-origin: 100% 0;
}
to {
opacity: 0;
transform: scale(.95);
}
}

View File

@ -0,0 +1,104 @@
//
// Navbar dropdown
//
.navbar {
.dropdown-menu {
opacity: 0;
pointer-events: none;
margin: 0;
}
.dropdown-menu-arrow {
&:before {
background: $dropdown-bg;
box-shadow: none;
content: '';
display: block;
height: 12px;
width: 12px;
left: 20px;
position: absolute;
bottom: 100%;
transform: rotate(-45deg) translateY(12px);
z-index: -5;
border-radius: 2px;
}
}
.dropdown-menu-right {
&:before {
right: 20px;
left: auto;
}
}
&:not(.navbar-nav-hover) {
.dropdown-menu {
&.show {
opacity: 1;
pointer-events: auto;
animation: show-navbar-dropdown .25s ease forwards;
}
&.close {
display: block;
animation: hide-navbar-dropdown .15s ease backwards;
}
}
}
&.navbar-nav-hover {
.dropdown-menu {
opacity: 0;
display: block;
pointer-events: none;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
.nav-item.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
}
.dropdown-menu-inner {
position: relative;
padding: 1rem;
}
// Keyframes
@keyframes show-navbar-dropdown {
0% {
opacity: 0;
// transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transform: translate(0, 10px) perspective(200px);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes hide-navbar-dropdown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate(0, 10px)
// transform: translate(0, 10px) perspective(0) rotateX(0);
}
}
}

View File

@ -0,0 +1,17 @@
//
// Floating navbar
//
.navbar-floating-wrapper {
padding-top: 1rem;
padding-bottom: 1rem;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
.navbar {
border-radius: $border-radius;
}
}

View File

@ -0,0 +1,216 @@
//
// Navbar search
//
.navbar-search {
.input-group {
border-radius: $navbar-search-border-radius;
border: $navbar-search-border-width solid;
@include transition($transition-bg);
transition-delay: $transition-base-time;
.input-group-text {
background-color: transparent;
padding-left: 1rem;
border: 0;
}
}
.form-control {
width: $navbar-search-width;
background-color: transparent;
border: 0;
@include transition($navbar-search-transition);
}
.focused {
.input-group {
.form-control {
width: $navbar-search-focus-width;
}
}
}
.close {
display: none;
}
}
// Search variations
.navbar-search-dark {
.input-group {
background-color: $navbar-search-dark-bg;
border-color: $navbar-search-dark-border-color;
}
.input-group-text {
color: $navbar-search-dark-color;
}
.form-control {
color: $navbar-search-dark-focus-color;
&::placeholder {
color: $navbar-search-dark-color;
}
}
.focused {
.input-group {
background-color: $navbar-search-dark-focus-bg;
border-color: $navbar-search-dark-focus-border-color;
}
}
}
.navbar-search-light {
.input-group {
background-color: $navbar-search-light-bg;
border-color: $navbar-search-light-border-color;
}
.input-group-text {
color: $navbar-search-light-color;
}
.form-control {
color: $navbar-search-light-focus-color;
&::placeholder {
color: $navbar-search-light-color;
}
}
.focused {
.input-group {
background-color: $navbar-search-light-focus-bg;
border-color: $navbar-search-light-focus-border-color;
}
}
}
// When navbar search is open on xs
@include media-breakpoint-down(xs) {
.navbar-search {
display: none;
width: 100%;
transform: translateX(-150%);
@include transition($transition-cubic-bezier);
.form-group {
width: 100%;
}
.form-control {
width: auto;
}
.focused {
.input-group {
.form-control {
width: auto;
}
}
}
.close {
display: none;
opacity: 0;
span {
width: auto;
height: auto;
}
}
}
.navbar-top {
.navbar-nav {
@include transition($transition-base);
}
}
.g-navbar-search-showing {
.navbar-search {
.close {
display: block;
}
}
.navbar-top {
.navbar-nav {
display: flex;
opacity: 1;
transform: translateX(150%);
}
}
}
.g-navbar-search-show {
// Search
.navbar-search {
display: block;
.form-control {
width: auto;
}
.close {
color: white;
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 46px;
text-align: center;
line-height: 46px;
cursor: pointer;
}
}
// Navbar
.navbar-top {
.navbar-nav {
display: none;
}
// Collapse
.navbar-collapse {
width: 100%;
}
}
}
.g-navbar-search-shown {
.navbar-search {
transform: translateX(0);
.close {
display: block;
opacity: 1;
}
}
}
.g-navbar-search-hiding {
// Navbar
.navbar-top {
.navbar-nav {
display: flex;
opacity: 0;
transform: translateX(150%);
}
}
}
.g-navbar-search-hidden {
.navbar-top {
.navbar-nav {
opacity: 1;
transform: translateX(0);
}
}
}
}

View File

@ -0,0 +1,58 @@
//
// Navbar top (Topbar)
//
.navbar-top {
border: 0;
padding-left: 1rem;
padding-right: 1rem;
.container,
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
@include media-breakpoint-up(sm) {
.navbar-brand {
display: none;
}
}
@include media-breakpoint-down(xs) {
.navbar-collapse {
width: 100%;
}
.nav-item {
position: static;
.dropdown-menu {
position: absolute;
width: 94%;
min-width: auto;
left: 3%;
right: auto;
}
}
}
&.border-bottom {
&.navbar-dark {
border-color: rgba(255, 255, 255, .08) !important;
}
&.navbar-light {
border-color: rgba(0, 0, 0, .04) !important;
}
}
}
.sidenav-pinned {
.navbar-top {
.navbar-brand {
display: none;
}
}
}

View File

@ -0,0 +1,507 @@
//
// Vertical navbar + Sidenav
//
.navbar-vertical {
padding-top: 0;
border-width: 0 0 1px 0;
border-style: solid;
@if $enable-shadows {
box-shadow: $navbar-vertical-box-shadow;
}
// Navbar light
&.navbar-light {
background-color: $navbar-light-bg;
border-color: $navbar-light-border-color;
}
// Navbar dark
&.navbar-dark {
background-color: $navbar-dark-bg;
border-color: $navbar-dark-border-color;
}
// Navbar brand
.navbar-brand {
margin-right: 0;
}
.navbar-brand-img,
.navbar-brand > img {
max-width: 100%;
max-height: 2rem;
}
// Navbar collapse
@include media-breakpoint-up(md) {
.navbar-collapse {
margin-left: -$navbar-padding-x;
margin-right: -$navbar-padding-x;
&:before {
content: '';
display: block;
margin: $navbar-padding-y / 2;
}
}
}
// Navbar navigaton
.navbar-nav {
margin-left: -$navbar-padding-x;
margin-right: -$navbar-padding-x;
// Navbar link
.nav-link {
padding-left: $navbar-padding-x;
padding-right: $navbar-padding-x;
font-size: $navbar-nav-link-font-size;
font-weight: $navbar-nav-link-font-weight;
&.active {
position: relative;
}
// Icon
> i {
min-width: $navbar-icon-min-width;
font-size: .9375rem;
line-height: ($font-size-base * $line-height-base);
}
// Dropdown
.dropdown-menu {
border: none;
.dropdown-menu {
margin-left: $dropdown-item-padding-x / 2;
}
}
}
.nav-sm {
.nav-link {
font-size: .8125rem;
}
}
}
// Navbar navigation
.navbar-nav .nav-link {
display: flex;
align-items: center;
}
.navbar-nav .nav-link[data-toggle="collapse"] {
&:after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: 'Font Awesome 5 Free';
font-weight: 700;
content: "\f105";
margin-left: auto;
color: $gray-400;
@include transition($transition-base);
}
// Expanded
&[aria-expanded="true"] {
&:after {
color: theme-color("primary");
transform: rotate(90deg);
}
}
}
// Second level
.navbar-nav .nav .nav-link {
padding-left: $navbar-padding-x + $navbar-icon-min-width;
}
// Third level
.navbar-nav .nav .nav .nav-link {
padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
}
// Navbar heading
.navbar-heading {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
font-size: $font-size-xs;
text-transform: uppercase;
letter-spacing: .04em;
}
// Expanded navbar specific styles
&.navbar-expand {
@each $breakpoint, $dimension in $grid-breakpoints {
&-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) {
display: block;
position: fixed;
top: 0;
bottom: 0;
width: 100%;
max-width: $navbar-vertical-width;
overflow-y: auto;
padding-left: 0;
padding-right: 0;
.navbar-inner {
padding-left: $navbar-vertical-padding-x;
padding-right: $navbar-vertical-padding-x;
}
// Container
>[class*="container"] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
padding-left: 0;
padding-right: 0; // Target IE 10 & 11
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
min-height: none;
height: 100%;
}
}
// Fixes the vertical navbar to the left
&.fixed-left {
left: 0;
border-width: 0 1px 0 0;
}
// Fixed the vertical navbar to the right
&.fixed-right {
right: 0;
border-width: 0 0 0 1px;
}
// Navbar collapse
.navbar-collapse {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
margin-left: -$navbar-vertical-padding-x;
margin-right: -$navbar-vertical-padding-x;
padding-left: $navbar-vertical-padding-x;
padding-right: $navbar-vertical-padding-x;
> * {
min-width: 100%;
}
}
// Navbar navigation
.navbar-nav {
flex-direction: column;
margin-left: -$navbar-vertical-padding-x;
margin-right: -$navbar-vertical-padding-x;
}
.navbar-nav .nav-link {
padding: $navbar-vertical-nav-link-padding-y $navbar-vertical-nav-link-padding-x;
}
.navbar-nav > .nav-item {
margin-top: 2px;
> .nav-link {
&.active {
background: $gray-100;
margin-right: .5rem;
margin-left: .5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: $border-radius;
}
}
}
.lavalamp-object {
width: calc(100% - 1rem) !important;
background: theme-color("primary");
color: color-yiq($primary);
margin-right: .5rem;
margin-left: .5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: $border-radius;
}
// Second level
.navbar-nav .nav .nav-link {
padding-top: $navbar-vertical-nav-link-padding-y / 1.5;
padding-bottom: $navbar-vertical-nav-link-padding-y / 1.5;
padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
}
// Third level
.navbar-nav .nav .nav .nav-link {
padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
}
}
}
}
}
}
// Offsets the main content depending on the sidebar positioning
.navbar-vertical.navbar-expand {
@each $breakpoint, $dimension in $grid-breakpoints {
&-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-width;
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-width;
}
}
}
}
}
.sidenav {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-width;
@include transition($transition-base);
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-width;
@include transition($transition-base);
}
}
.g-sidenav-pinned {
.sidenav {
@include media-breakpoint-up(xl) {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-open-width;
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-open-width;
}
}
}
}
//
// Sidenav
//
.sidenav {
z-index: 1050;
@include transition($transition-base);
@include media-breakpoint-up(xl) {
&:hover {
max-width: $navbar-vertical-open-width;
}
.sidenav-toggler {
padding: 1.5rem;
}
}
.navbar-brand,
.navbar-heading {
padding: 1.5rem;
display: none;
}
}
.sidenav-header {
height: 78px;
}
// Sidenav states
.g-sidenav-show {
.sidenav {
.navbar-brand,
.navbar-heading {
display: block;
}
.nav-item .collapse {
height: auto;
@include transition($transition-base);
}
}
}
.g-sidenav-pinned {
.sidenav {
max-width: $navbar-vertical-open-width !important;
.navbar-brand,
.navbar-heading {
display: block;
}
}
}
.g-sidenav-hidden:not(.g-sidenav-show) {
.sidenav {
.navbar-nav > .nav-item {
> .nav-link {
&:after {
content: '';
}
}
}
.nav-item .collapse {
display: none !important;
}
.nav-link-text {
display: none !important;
}
}
}
.g-sidenav-hide {
.sidenav {
.navbar-nav > .nav-item {
> .nav-link {
&:after {
content: '';
}
}
}
.nav-item .collapse {
display: none !important;
}
.nav-link-text {
display: none !important;
}
}
}
// Media fixes for iPhone 5 like resolutions
@include media-breakpoint-down(lg) {
.sidenav {
transform: translateX(-$navbar-vertical-width);
&.fixed-left + .main-content {
margin-left: 0 !important;
}
}
.g-sidenav-pinned {
.sidenav {
transform: translateX(0);
}
}
}
// Sidenav toggler
.sidenav-toggler-inner,
.sidenav-toggler-line {
width: 18px;
@include transition($transition-base);
}
.sidenav-toggler-inner {
position: relative;
&:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
left: -11px;
top: -14px;
// background-color: rgba($primary, .15);
border-radius: 50%;
transform: scale(0);
@include transition($transition-cubic-bezier);
}
}
.sidenav-toggler-line {
height: 2px;
background-color: theme-color("default");
display: block;
position: relative;
&:not(:last-child) {
margin-bottom: 3px;
}
}
.sidenav-toggler-dark {
.sidenav-toggler-line {
background-color: $white;
}
}
.sidenav-toggler {
cursor: pointer;
&.active {
.sidenav-toggler-inner {
&:before {
transform: scale(1);
}
}
.sidenav-toggler-line {
background-color: theme-color("primary]");
&:first-child {
width: 13px;
transform: translateX(5px);
}
&:last-child {
width: 13px;
transform: translateX(5px);
}
}
}
}

View File

@ -0,0 +1,368 @@
//
// Navbar
//
// Navbar links
.navbar-horizontal {
.navbar-nav {
.nav-link {
font-size: $navbar-nav-link-font-size;
font-weight: $navbar-nav-link-font-weight;
text-transform: $navbar-nav-link-text-transform;
letter-spacing: $navbar-nav-link-letter-spacing;
// @include transition($navbar-transition);
.nav-link-inner--text {
margin-left: .25rem;
}
}
}
.navbar-brand {
font-size: $font-size-sm;
font-weight: 600;
text-transform: uppercase;
font-size: .875rem;
letter-spacing: .05px;
img {
height: 30px;
}
}
.navbar-dark {
.navbar-brand {
color: $white;
}
}
.navbar-light {
.navbar-brand {
color: $gray-800;
}
}
.navbar-nav {
.nav-item {
.media:not(:last-child){
margin-bottom: 1.5rem;
}
}
}
@include media-breakpoint-up(lg) {
// .navbar-main {
// padding: 1rem 0;
// }
.navbar-nav {
.nav-item {
margin-right: .5rem;
[data-toggle="dropdown"]::after {
transition: $transition-base;
}
&.show {
[data-toggle="dropdown"]::after {
transform: rotate(180deg);
}
}
}
.nav-link {
padding-top: $navbar-nav-link-padding-y;
padding-bottom: $navbar-nav-link-padding-y;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: .625rem;
}
}
.nav-link-icon {
padding-left: .5rem !important;
padding-right: .5rem !important;
font-size: 1rem;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: 0;
}
}
// Dropdown menu
.dropdown-menu {
opacity: 0;
pointer-events: none;
margin: 0;
&:before {
background: $dropdown-bg;
box-shadow: none;
content: '';
display: block;
height: 16px;
width: 16px;
left: 20px;
position: absolute;
bottom: 100%;
transform: rotate(-45deg) translateY(1rem);
z-index: -5;
border-radius: $border-radius-sm;
}
}
.dropdown-menu-right {
&:before {
right: 20px;
left: auto;
}
}
&:not(.navbar-nav-hover) {
.dropdown-menu {
&.show {
opacity: 1;
pointer-events: auto;
animation: show-navbar-dropdown .25s ease forwards;
}
&.close {
display: block;
animation: hide-navbar-dropdown .15s ease backwards;
}
}
}
&.navbar-nav-hover {
.dropdown-menu {
opacity: 0;
display: block;
pointer-events: none;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
.nav-item.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
}
.dropdown-menu-inner {
position: relative;
padding: 1rem;
}
}
}
// Transparent navbar
&.navbar-transparent {
position: absolute;
top: 0;
width: 100%;
z-index: 100;
background-color: transparent;
border: 0;
box-shadow: none;
.navbar-brand {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
}
@include media-breakpoint-up(md) {
&.navbar-transparent {
.navbar-nav {
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
}
.navbar-brand {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-color;
}
}
}
}
// Collapse
.navbar-collapse-header {
display: none;
}
@include media-breakpoint-down(md) {
.navbar-nav {
.nav-link {
padding: .625rem 0;
color: theme-color("default") !important;
}
.dropdown-menu {
box-shadow: none;
min-width: auto;
.media {
svg {
width: 30px;
}
}
}
}
.navbar-collapse {
width: calc(100% - 1.4rem);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1050;
margin: .7rem;
overflow-y: auto;
height: auto !important;
opacity: 0;
.navbar-toggler {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
display: inline-block;
padding: 0;
span {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 2px;
opacity: 1;
background: #283448;
}
:nth-child(1) {
transform: rotate(135deg);
}
:nth-child(2) {
transform: rotate(-135deg);
}
}
.navbar-collapse-header {
display: block;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.collapse-brand {
img {
height: 36px;
}
}
.collapse-close {
text-align: right;
}
}
.navbar-collapse.collapsing,
.navbar-collapse.show {
padding: 1.5rem;
border-radius: $border-radius;
background: #FFF;
box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
animation: show-navbar-collapse .2s ease forwards;
}
.navbar-collapse.collapsing-out {
animation: hide-navbar-collapse .2s ease forwards;
}
}
// Keyframes
@keyframes show-navbar-collapse {
0% {
opacity: 0;
transform: scale(.95);
transform-origin: 100% 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-navbar-collapse {
from {
opacity: 1;
transform: scale(1);
transform-origin: 100% 0;
}
to {
opacity: 0;
transform: scale(.95);
}
}
@keyframes show-navbar-dropdown {
0% {
opacity: 0;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes hide-navbar-dropdown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate(0, 10px);
}
}
}