Alex Aragón
7 years ago
parent
190e8ae176
commit
aa882e6603
@ -0,0 +1,3 @@ |
||||
body { |
||||
background-color: lightgray; |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
footer { |
||||
z-index: 1; |
||||
position: relative; |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
@import 'footer'; |
||||
@import 'topbar'; |
||||
@import 'loader'; |
||||
@import 'sidebar'; |
||||
@ -0,0 +1,43 @@ |
||||
#loader { |
||||
transition: all 0.3s ease-in-out; |
||||
opacity: 1; |
||||
display: default; |
||||
} |
||||
|
||||
#loader.fadeOut { |
||||
opacity: 0; |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
|
||||
.spinner { |
||||
width: 40px; |
||||
height: 40px; |
||||
position: absolute; |
||||
top: calc(50% - 20px); |
||||
left: calc(50% - 20px); |
||||
background-color: #333; |
||||
border-radius: 100%; |
||||
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out; |
||||
animation: sk-scaleout 1.0s infinite ease-in-out; |
||||
} |
||||
|
||||
@-webkit-keyframes sk-scaleout { |
||||
0% { -webkit-transform: scale(0) } |
||||
100% { |
||||
-webkit-transform: scale(1.0); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes sk-scaleout { |
||||
0% { |
||||
-webkit-transform: scale(0); |
||||
transform: scale(0); |
||||
} 100% { |
||||
-webkit-transform: scale(1.0); |
||||
transform: scale(1.0); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@ -0,0 +1,482 @@ |
||||
// --------------------------------------------------------- |
||||
// @TOC |
||||
// --------------------------------------------------------- |
||||
|
||||
// + @Sidebar |
||||
// + @Sidebar Inner |
||||
// + @Sidebar Header |
||||
// + @Sidebar Menu |
||||
// + @Sidebar Collapsed |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Sidebar |
||||
// --------------------------------------------------------- |
||||
|
||||
.sidebar { |
||||
background-color: $default-white; |
||||
bottom: 0; |
||||
overflow: hidden; |
||||
position: fixed; |
||||
top: 0; |
||||
transition: all 0.2s ease; |
||||
width: $offscreen-size; |
||||
z-index: 1000; |
||||
|
||||
ul { |
||||
list-style-type: none; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
width: $collapsed-size; |
||||
|
||||
.sidebar-inner { |
||||
.sidebar-logo { |
||||
border-bottom: 1px solid transparent; |
||||
padding: 0; |
||||
|
||||
a { |
||||
.logo { |
||||
background-position: center center; |
||||
width: $collapsed-size; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sidebar-menu { |
||||
overflow-x: hidden; |
||||
|
||||
> li { |
||||
> a { |
||||
.title { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
&.dropdown { |
||||
.arrow { |
||||
opacity: 0; |
||||
} |
||||
|
||||
&.open { |
||||
ul.dropdown-menu { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
width: $offscreen-size; |
||||
|
||||
.sidebar-inner { |
||||
.sidebar-logo { |
||||
border-bottom: 1px solid $border-color; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.sidebar-menu { |
||||
> li { |
||||
> a { |
||||
.title { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
&.dropdown { |
||||
.arrow { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
&.open { |
||||
> ul.dropdown-menu { |
||||
display: block !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
left: -$offscreen-size; |
||||
width: calc(#{$offscreen-size} - 30px); |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Sidebar Inner |
||||
// --------------------------------------------------------- |
||||
|
||||
.sidebar-inner { |
||||
position: relative; |
||||
height: 100%; |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Sidebar Header |
||||
// --------------------------------------------------------- |
||||
|
||||
.sidebar-logo { |
||||
border-bottom: 1px solid $border-color; |
||||
border-right: 1px solid $border-color; |
||||
line-height: 0; |
||||
padding: 0 20px; |
||||
transition: all 0.2s ease; |
||||
|
||||
a { |
||||
display: inline-block; |
||||
width: 100%; |
||||
|
||||
.logo { |
||||
background-position: center left; |
||||
background-repeat: no-repeat; |
||||
display: inline-block; |
||||
min-height: calc(#{$header-height} - 1px); |
||||
width: 100%; |
||||
width: 70px; |
||||
} |
||||
|
||||
.logo-text { |
||||
color: $grey-900; |
||||
} |
||||
} |
||||
|
||||
.mobile-toggle { |
||||
display: none; |
||||
float: right; |
||||
font-size: 18px; |
||||
line-height: calc(#{$header-height} - 1px); |
||||
|
||||
a { |
||||
color: $default-text-color; |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
display: inline-block; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Sidebar Menu |
||||
// --------------------------------------------------------- |
||||
|
||||
.sidebar-menu { |
||||
@include clearfix; |
||||
border-right: 1px solid $border-color; |
||||
height: calc(100vh - #{$header-height}); |
||||
list-style: none; |
||||
margin: 0; |
||||
overflow: auto; |
||||
padding: 0; |
||||
position: relative; |
||||
background: linear-gradient(180deg, #0181bf, #00bcda); |
||||
|
||||
.nav-header{ |
||||
margin-top: 10px; |
||||
margin-bottom: 10px; |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
font-size: 12px; |
||||
color: $default-white; |
||||
} |
||||
|
||||
.sidebar-divider{ |
||||
height: 0; |
||||
margin: .5rem 0; |
||||
overflow: hidden; |
||||
border-top: 1px solid #217aa4; |
||||
border-bottom: 1px solid #16b1fd; |
||||
} |
||||
|
||||
.dropdown-toggle::after { |
||||
display: none; |
||||
} |
||||
|
||||
.sidebar-link { |
||||
&.active::before { |
||||
background: $default-warning; |
||||
content: ''; |
||||
display: block; |
||||
height: 100%; |
||||
left: -4px; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 8px; |
||||
} |
||||
} |
||||
|
||||
li { |
||||
position: relative; |
||||
|
||||
&.dropdown { |
||||
.arrow { |
||||
font-size: 10px; |
||||
line-height: 40px; |
||||
position: absolute; |
||||
right: 30px; |
||||
transition: all 0.05s ease-in; |
||||
|
||||
@include to($breakpoint-md) { |
||||
right: 25px; |
||||
} |
||||
} |
||||
|
||||
&.open { |
||||
> a { |
||||
color: $default-white; |
||||
|
||||
&.dropdown-toggle{ |
||||
background: $default-active; |
||||
} |
||||
|
||||
.icon-holder { |
||||
color: $default-info; |
||||
} |
||||
|
||||
> .arrow { |
||||
transform: rotate(90deg); |
||||
} |
||||
} |
||||
|
||||
> .dropdown-menu { |
||||
display: block; |
||||
|
||||
.dropdown-menu { |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
.arrow { |
||||
line-height: 25px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
a { |
||||
color: $default-white; |
||||
transition: all 0.3s ease; |
||||
|
||||
&.active{ |
||||
background: $default-active; |
||||
} |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: $default-info; |
||||
text-decoration: none; |
||||
background: $default-active; |
||||
|
||||
.icon-holder { |
||||
color: $default-info; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
> li { |
||||
&.dropdown { |
||||
ul { |
||||
&.dropdown-menu { |
||||
background-color: #0099ca; |
||||
border-radius: 0; |
||||
border: 0; |
||||
box-shadow: none; |
||||
float: none; |
||||
padding-left: 10px; |
||||
padding-top: 0; |
||||
position: relative; |
||||
width: 100%; |
||||
|
||||
> li { |
||||
> a { |
||||
display: block; |
||||
padding: 10px 15px; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
background-color: transparent; |
||||
color: $default-dark; |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
a { |
||||
color: $default-dark; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
> a { |
||||
display: block; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
padding: 5px 15px; |
||||
position: relative; |
||||
white-space: nowrap; |
||||
|
||||
.icon-holder { |
||||
border-radius: 6px; |
||||
display: inline-block; |
||||
font-size: 17px; |
||||
height: 35px; |
||||
left: 0; |
||||
line-height: 35px; |
||||
margin-right: 14px; |
||||
position: relative; |
||||
text-align: center; |
||||
transition: all 0.3s ease; |
||||
width: 35px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Sidebar Collapsed |
||||
// --------------------------------------------------------- |
||||
|
||||
.is-collapsed { |
||||
.sidebar { |
||||
@include from($breakpoint-xl) { |
||||
width: $collapsed-size; |
||||
|
||||
.sidebar-inner { |
||||
.sidebar-logo { |
||||
border-bottom: 1px solid transparent; |
||||
padding: 0; |
||||
} |
||||
|
||||
.sidebar-menu { |
||||
overflow-x: hidden; |
||||
|
||||
> li { |
||||
&.nav-header{ |
||||
display: none; |
||||
} |
||||
|
||||
> a { |
||||
.title { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
&.dropdown { |
||||
.arrow { |
||||
opacity: 0; |
||||
} |
||||
|
||||
&.open { |
||||
ul.dropdown-menu { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
width: $offscreen-size; |
||||
|
||||
|
||||
.sidebar-inner { |
||||
.sidebar-logo { |
||||
border-bottom: 1px solid $border-color; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.sidebar-menu { |
||||
> li { |
||||
&.nav-header{ |
||||
display: inline-block; |
||||
} |
||||
> a { |
||||
.title { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
&.dropdown { |
||||
.arrow { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
&.open { |
||||
> ul.dropdown-menu { |
||||
display: block !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
width: $offscreen-size; |
||||
|
||||
.sidebar-inner { |
||||
.sidebar-logo { |
||||
border-bottom: 1px solid $border-color; |
||||
padding: 0 20px; |
||||
|
||||
> a { |
||||
.logo { |
||||
background-position: center left; |
||||
width: 150px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sidebar-menu { |
||||
> li { |
||||
> a { |
||||
.title { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
&.dropdown { |
||||
.arrow { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
&.open { |
||||
> ul.dropdown-menu { |
||||
display: block !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
left: 0; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,238 @@ |
||||
// --------------------------------------------------------- |
||||
// @TOC |
||||
|
||||
// + @Topbar |
||||
// + @Collapsed State |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Topbar |
||||
// --------------------------------------------------------- |
||||
|
||||
.header { |
||||
background-color: $default-white; |
||||
border-bottom: 1px solid $border-color; |
||||
display: block; |
||||
margin-bottom: 0; |
||||
padding: 0; |
||||
position: fixed; |
||||
transition: all 0.2s ease; |
||||
width: calc(100% - #{$offscreen-size}); |
||||
z-index: 800; |
||||
box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.15); |
||||
|
||||
@include to($breakpoint-md) { |
||||
width: 100%; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
width: calc(100% - #{$collapsed-size}); |
||||
} |
||||
|
||||
.header-container { |
||||
@include clearfix; |
||||
|
||||
height: $header-height; |
||||
|
||||
.btn-menu{ |
||||
padding-left: 10px; |
||||
padding-right: 0; |
||||
} |
||||
|
||||
.nav-left, |
||||
.nav-right { |
||||
list-style: none; |
||||
margin-bottom: 0; |
||||
padding-left: 0; |
||||
position: relative; |
||||
|
||||
> li { |
||||
float: left; |
||||
|
||||
&.btn-padding{ |
||||
padding-top: 15px; |
||||
padding-bottom: 15px; |
||||
margin-left: 5px; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
> a { |
||||
color: $default-text-color; |
||||
display: block; |
||||
line-height: $header-height; |
||||
min-height: $header-height; |
||||
padding: 0 15px; |
||||
transition: all 0.2s ease-in-out; |
||||
|
||||
&.btn{ |
||||
min-height: 30px; |
||||
padding: 0 10px; |
||||
line-height: 30px; |
||||
} |
||||
|
||||
i { |
||||
font-size: 17px; |
||||
} |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: $default-dark; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
padding: 0 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.notifications { |
||||
position: relative; |
||||
|
||||
.counter { |
||||
background-color: $default-danger; |
||||
border-radius: 50px; |
||||
color: $default-white; |
||||
font-size: 10px; |
||||
line-height: 1; |
||||
padding: 3px 5.5px; |
||||
position: absolute; |
||||
right: 6px; |
||||
top: 12px; |
||||
} |
||||
|
||||
.dropdown-menu { |
||||
min-width: 350px; |
||||
padding: 0; |
||||
|
||||
@include to($breakpoint-sm) { |
||||
max-width: 300px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.dropdown-menu { |
||||
display: block; |
||||
margin: 0; |
||||
transform-origin: top right; |
||||
transform: scale(0, 0); |
||||
transition: transform 0.15s ease-out; |
||||
|
||||
.divider { |
||||
border-bottom: 1px solid $border-color; |
||||
height: 1px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
> li { |
||||
> a { |
||||
transition: all 0.2s ease-out; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.show { |
||||
.dropdown-menu { |
||||
transform: scale(1, 1); |
||||
} |
||||
} |
||||
|
||||
.nav-left { |
||||
float: left; |
||||
margin-left: 15px; |
||||
} |
||||
|
||||
.nav-right { |
||||
float: right; |
||||
|
||||
.dropdown-menu { |
||||
left: auto; |
||||
right: 0; |
||||
|
||||
> li { |
||||
width: 100%; |
||||
|
||||
> a { |
||||
line-height: 1.5; |
||||
min-height: auto; |
||||
padding: 10px 15px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search-box { |
||||
.search-icon-close { |
||||
display: none; |
||||
} |
||||
|
||||
&.active { |
||||
.search-icon { |
||||
display: none; |
||||
} |
||||
|
||||
.search-icon-close { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search-input { |
||||
display: none; |
||||
|
||||
&.active { |
||||
display: inline-block; |
||||
} |
||||
|
||||
input { |
||||
background-color: transparent; |
||||
border: 0; |
||||
box-shadow: none; |
||||
font-size: 18px; |
||||
height: 40px; |
||||
margin-top: 12px; |
||||
outline: none; |
||||
padding: 5px; |
||||
|
||||
@include to($breakpoint-sm) { |
||||
width: 85px; |
||||
} |
||||
|
||||
@include placeholder { |
||||
color: lighten($default-text-color, 20%); |
||||
font-style: italic; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Collapsed State |
||||
// --------------------------------------------------------- |
||||
|
||||
.is-collapsed { |
||||
.header { |
||||
width: calc(100% - #{$collapsed-size}); |
||||
|
||||
@include to($breakpoint-md) { |
||||
width: 100%; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
width: calc(100% - #{$offscreen-size}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Others |
||||
// --------------------------------------------------------- |
||||
|
||||
$border-color : #e6ecf5; |
||||
$collapsed-size : 70px; |
||||
$header-height : 65px; |
||||
$offscreen-size : 280px; |
||||
$side-nav-dark : #313644; |
||||
$side-nav-dark-border : rgba(120, 130, 140, 0.3); |
||||
$side-nav-dark-font : #99abb4; |
||||
@ -0,0 +1,3 @@ |
||||
@import 'settings/index'; |
||||
@import 'screens/index'; |
||||
@import 'components/index'; |
||||
@ -0,0 +1,227 @@ |
||||
html, html a, body { |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
|
||||
a { |
||||
transition: all 0.3s ease-in-out; |
||||
} |
||||
|
||||
body { |
||||
font-family: $font-primary; |
||||
font-size: 14px; |
||||
color: $default-text-color; |
||||
line-height: 1.5; |
||||
letter-spacing: 0.2px; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
font-family: $font-secondary; |
||||
letter-spacing: 0.5px; |
||||
line-height: 1.5; |
||||
|
||||
a { |
||||
font-family: $font-secondary; |
||||
} |
||||
|
||||
small { |
||||
font-weight: 300; |
||||
color: lighten($default-dark, 5%); |
||||
} |
||||
} |
||||
|
||||
p { |
||||
font-family: $font-primary; |
||||
line-height: 1.9; |
||||
} |
||||
|
||||
.lead { |
||||
font-size: 18px; |
||||
} |
||||
|
||||
ul { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
a { |
||||
color: $default-info; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
text-decoration: none; |
||||
color: darken($default-info, 10%); |
||||
} |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
&.text-gray { |
||||
&:hover, |
||||
&:focus, |
||||
&.active { |
||||
color: $default-dark !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
hr { |
||||
border-top: 1px solid $border-color; |
||||
} |
||||
|
||||
.btn-create-one{ |
||||
border-color: #b8daff; |
||||
background-color: #cce5ff; |
||||
color: #004085 !important; |
||||
} |
||||
.btn-create-two{ |
||||
border-color: #c3e6cb; |
||||
background-color: #d4edda; |
||||
color: #155724 !important; |
||||
} |
||||
.btn-create-three{ |
||||
border-color: #cecece; |
||||
background-color: #ffffff; |
||||
color: #374548 !important; |
||||
} |
||||
.footer p{ |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
.footer{ |
||||
padding: 18px; |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @TOC |
||||
// --------------------------------------------------------- |
||||
|
||||
// + @Page Container |
||||
// + @Main Content |
||||
// + @Full Container |
||||
// + @Collapsed State |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Page Container |
||||
// --------------------------------------------------------- |
||||
|
||||
.page-container { |
||||
min-height: 100vh; |
||||
padding-left: $offscreen-size; |
||||
transition: all 0.2s ease; |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
padding-left: $collapsed-size; |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Main Content |
||||
// --------------------------------------------------------- |
||||
|
||||
.main-content { |
||||
padding: 85px 20px 20px; |
||||
min-height: calc(100vh - 61px); |
||||
&.bg-content{ |
||||
background-color: $theme-bg; |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
padding: 85px 5px 5px; |
||||
} |
||||
} |
||||
|
||||
.remain-height { |
||||
height: calc(100vh - 126px); |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Full Container |
||||
// --------------------------------------------------------- |
||||
|
||||
.full-container { |
||||
left: $offscreen-size; |
||||
min-height: calc(100vh - #{$header-height}); |
||||
position: absolute; |
||||
right: 0; |
||||
top: $header-height; |
||||
transition: all 0.2s ease; |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
left: 0; |
||||
padding-left: $collapsed-size; |
||||
} |
||||
|
||||
@include to($breakpoint-md) { |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Collapsed State |
||||
// --------------------------------------------------------- |
||||
|
||||
.is-collapsed { |
||||
.page-container { |
||||
padding-left: $collapsed-size; |
||||
|
||||
@include to($breakpoint-md) { |
||||
padding-left: 0; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
padding-left: $offscreen-size; |
||||
} |
||||
} |
||||
|
||||
.full-container { |
||||
left: $collapsed-size; |
||||
|
||||
@include to($breakpoint-md) { |
||||
left: 0; |
||||
} |
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) { |
||||
left: $offscreen-size; |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Large desktop */ |
||||
@media (min-width: 1200px) { |
||||
.sidebar-menu .nav-header{ |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/* Portrait tablet to landscape and desktop */ |
||||
@media (min-width: 768px) and (max-width: 979px) { |
||||
.sidebar-menu .nav-header{ |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/* Landscape phone to portrait tablet */ |
||||
@media (max-width: 767px) { |
||||
|
||||
} |
||||
|
||||
/* Landscape phones and down */ |
||||
@media (max-width: 480px) { |
||||
|
||||
} |
||||
|
||||
@ -0,0 +1 @@ |
||||
@import 'base'; |
||||
@ -0,0 +1,26 @@ |
||||
// --------------------------------------------------------- |
||||
// @Breakpoints |
||||
// --------------------------------------------------------- |
||||
|
||||
$breakpoint-xl : 1440px; |
||||
$breakpoint-lg : 1200px; |
||||
$breakpoint-md : 992px; |
||||
$breakpoint-sm : 768px; |
||||
$breakpoint-xs : 0; |
||||
|
||||
$breakpoints: ( |
||||
"xl\\+" "screen and (min-width: #{$breakpoint-xl})", |
||||
"lg\\+" "screen and (min-width: #{$breakpoint-lg})", |
||||
"md\\+" "screen and (min-width: #{$breakpoint-md})", |
||||
"sm\\+" "screen and (min-width: #{$breakpoint-sm})", |
||||
"xs\\+" "screen and (min-width: #{$breakpoint-xs})", |
||||
|
||||
"xl-" "screen and (max-width: #{$breakpoint-xl - 1px})", |
||||
"lg-" "screen and (max-width: #{$breakpoint-lg - 1px})", |
||||
"md-" "screen and (max-width: #{$breakpoint-md - 1px})", |
||||
"sm-" "screen and (max-width: #{$breakpoint-sm - 1px})", |
||||
|
||||
"lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})", |
||||
"md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})", |
||||
"sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})", |
||||
); |
||||
@ -0,0 +1,37 @@ |
||||
// --------------------------------------------------------- |
||||
// @Default Colors |
||||
// --------------------------------------------------------- |
||||
|
||||
$default-danger : #ff3c7e; |
||||
$default-dark : #313435; |
||||
$default-grey : #565a5c; |
||||
$default-info : #4abaff; |
||||
$default-primary : #7774e7; |
||||
$default-success : #37c936; |
||||
$default-text-color : #72777a; |
||||
$default-warning : #fc0; |
||||
$default-white : #fff; |
||||
$default-active : #006b9e; |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Header Themes |
||||
// --------------------------------------------------------- |
||||
|
||||
$theme-danger : #f53f61; |
||||
$theme-dark : lighten($side-nav-dark, 10%); |
||||
$theme-info : $default-info; |
||||
$theme-primary : $default-primary; |
||||
$theme-success : desaturate($default-success, 5%); |
||||
$theme-bg : #f2f8f9; |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Others |
||||
// --------------------------------------------------------- |
||||
|
||||
$border-color : #e6ecf5; |
||||
$collapsed-size : 70px; |
||||
$header-height : 65px; |
||||
$offscreen-size : 280px; |
||||
$side-nav-dark : #313644; |
||||
$side-nav-dark-border : rgba(120, 130, 140, 0.3); |
||||
$side-nav-dark-font : #99abb4; |
||||
@ -0,0 +1,3 @@ |
||||
@import 'colors'; |
||||
@import 'fonts'; |
||||
@import 'breakpoints'; |
||||
Loading…
Reference in new issue