Angel Fernando Quiroz Campos
6 years ago
commit
ad43209739
@ -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,479 @@ |
|||||||
|
// --------------------------------------------------------- |
||||||
|
// @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; |
||||||
|
display: block; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: normal; |
||||||
|
padding: 5px 15px; |
||||||
|
position: relative; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
i{ |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
&.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @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,227 @@ |
|||||||
|
// --------------------------------------------------------- |
||||||
|
// @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}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
@import "utils/index"; |
||||||
|
@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,87 @@ |
|||||||
|
// --------------------------------------------------------- |
||||||
|
// @TOC |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// + @Greyscale Colors |
||||||
|
// + @Bootstrap Color System |
||||||
|
// + @Default Colors |
||||||
|
// + @Inverted Colors |
||||||
|
// + @Others |
||||||
|
// + @Header Themes |
||||||
|
// + @Social Networks Colors |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Greyscale Colors |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// Colors below are ordered from lightest to darkest |
||||||
|
|
||||||
|
$grey-100 : #f9fafb; |
||||||
|
$grey-200 : #f2f3f5; |
||||||
|
$grey-300 : #e6eaf0; |
||||||
|
$grey-400 : #d3d9e3; |
||||||
|
$grey-500 : #b9c2d0; |
||||||
|
$grey-600 : #7c8695; |
||||||
|
$grey-700 : #72777a; |
||||||
|
$grey-800 : #565a5c; |
||||||
|
$grey-900 : #313435; |
||||||
|
|
||||||
|
$grey-colors-alt: ( |
||||||
|
grey-100 : #f9fafb, |
||||||
|
grey-200 : #f2f3f5, |
||||||
|
grey-300 : #e6eaf0, |
||||||
|
grey-400 : #d3d9e3, |
||||||
|
grey-500 : #b9c2d0, |
||||||
|
grey-600 : #7c8695, |
||||||
|
grey-700 : #72777a, |
||||||
|
grey-800 : #565a5c, |
||||||
|
grey-900 : #313435, |
||||||
|
); |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @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; |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Inverted Colors |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
$inverse-danger : lighten($default-danger, 35%); |
||||||
|
$inverse-info : lighten($default-info, 45%); |
||||||
|
$inverse-primary : lighten($default-primary, 30%); |
||||||
|
$inverse-success : lighten($default-success, 45%); |
||||||
|
$inverse-warning : lighten($default-warning, 45%); |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @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; |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @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 : #FFFFFF; |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
$font-primary: |
||||||
|
Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; |
||||||
|
$font-secondary: $font-primary; |
||||||
|
$font-size-base: 0.875rem; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@import 'breakpoints'; |
||||||
|
@import 'colors'; |
||||||
|
@import 'fonts'; |
||||||
@ -0,0 +1,194 @@ |
|||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Fixed Width |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.w-1\/4r, .sz-1\/4r { width: 0.25rem; } |
||||||
|
.w-1\/2r, .sz-1\/2r { width: 0.5rem; } |
||||||
|
.w-3\/4r, .sz-3\/4r { width: 0.75rem; } |
||||||
|
.w-1r, .sz-1r { width: 1rem; } |
||||||
|
.w-3\/2r, .sz-3\/2r { width: 1.5rem; } |
||||||
|
.w-2r, .sz-2r { width: 2rem; } |
||||||
|
.w-5\/2r, .sz-5\/2r { width: 2.5rem; } |
||||||
|
.w-3r, .sz-3r { width: 3rem; } |
||||||
|
.w-7\/2r, .sz-7\/2r { width: 3.5rem; } |
||||||
|
.w-4r, .sz-4r { width: 4rem; } |
||||||
|
.w-9\/2r, .sz-9\/2r { width: 4.5rem; } |
||||||
|
.w-5r, .sz-5r { width: 5rem; } |
||||||
|
.w-11\/2r, .sz-11\/2r { width: 5.5rem; } |
||||||
|
.w-6r, .sz-6r { width: 6rem; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Relative Width |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.w-0 { width: 0px; } |
||||||
|
.w-10p { width: 10%; } |
||||||
|
.w-20p { width: 20%; } |
||||||
|
.w-30p { width: 30%; } |
||||||
|
.w-40p { width: 40%; } |
||||||
|
.w-50p { width: 50%; } |
||||||
|
.w-60p { width: 60%; } |
||||||
|
.w-70p { width: 70%; } |
||||||
|
.w-80p { width: 80%; } |
||||||
|
.w-90p { width: 90%; } |
||||||
|
.w-100p { width: 100%; } |
||||||
|
.w-1px { width: 1px; } |
||||||
|
.w-a { width: auto; } |
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Fixed Height |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.h-1\/4r, .sz-1\/4r { height: 0.25rem; } |
||||||
|
.h-1\/2r, .sz-1\/2r { height: 0.5rem; } |
||||||
|
.h-3\/4r, .sz-3\/4r { height: 0.75rem; } |
||||||
|
.h-1r, .sz-1r { height: 1rem; } |
||||||
|
.h-3\/2r, .sz-3\/2r { height: 1.5rem; } |
||||||
|
.h-2r, .sz-2r { height: 2rem; } |
||||||
|
.h-5\/2r, .sz-5\/2r { height: 2.5rem; } |
||||||
|
.h-3r, .sz-3r { height: 3rem; } |
||||||
|
.h-7\/2r, .sz-7\/2r { height: 3.5rem; } |
||||||
|
.h-4r, .sz-4r { height: 4rem; } |
||||||
|
.h-9\/2r, .sz-9\/2r { height: 4.5rem; } |
||||||
|
.h-5r, .sz-5r { height: 5rem; } |
||||||
|
.h-11\/2r, .sz-11\/2r { height: 5.5rem; } |
||||||
|
.h-6r, .sz-6r { height: 6rem; } |
||||||
|
|
||||||
|
|
||||||
|
.h-0 { height: 0; } |
||||||
|
.h-auto { height: auto; } |
||||||
|
.h-100p { height: 100%; } |
||||||
|
.h-100vh { height: 100vh; } |
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Max Size |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.mw-100p { max-width: 100%; } |
||||||
|
.mh-100p { max-height: 100%; } |
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Quick Border Helpers |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.bd { border: #{$border-width} solid #{$border-color} !important; } |
||||||
|
.bdT { border-top: #{$border-width} solid #{$border-color} !important; } |
||||||
|
.bdR { border-right: #{$border-width} solid #{$border-color} !important; } |
||||||
|
.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; } |
||||||
|
.bdL { border-left: #{$border-width} solid #{$border-color} !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Border Width |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
@for $i from 0 through 5 { |
||||||
|
.bdw-#{$i} { border-width: #{$i}px !important; } |
||||||
|
.bdwT-#{$i} { border-top-width: #{$i}px !important; } |
||||||
|
.bdwR-#{$i} { border-right-width: #{$i}px !important; } |
||||||
|
.bdwB-#{$i} { border-bottom-width: #{$i}px !important; } |
||||||
|
.bdwL-#{$i} { border-left-width: #{$i}px !important; } |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Border Radius |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
@for $i from 0 to 5 { |
||||||
|
.bdrs-#{$i} { border-radius: #{$i}px !important; } |
||||||
|
|
||||||
|
.bdrsT-#{$i} { |
||||||
|
border-top-left-radius: #{$i}px !important; |
||||||
|
border-top-right-radius: #{$i}px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.bdrsR-#{$i} { |
||||||
|
border-top-right-radius: #{$i}px !important; |
||||||
|
border-bottom-right-radius: #{$i}px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.bdrsB-#{$i} { |
||||||
|
border-bottom-left-radius: #{$i}px !important; |
||||||
|
border-bottom-right-radius: #{$i}px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.bdrsL-#{$i} { |
||||||
|
border-top-left-radius: #{$i}px !important; |
||||||
|
border-bottom-left-radius: #{$i}px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bdrs-50p { border-radius: 50% !important; } |
||||||
|
.bdrs-10em { border-radius: 10em !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Border Style |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.bds-n { border-style: none !important; } |
||||||
|
.bds-s { border-style: solid !important; } |
||||||
|
.bds-dt { border-style: dotted !important; } |
||||||
|
.bds-ds { border-style: dashed !important; } |
||||||
|
.bds-db { border-style: double !important; } |
||||||
|
.bds-g { border-style: groove !important; } |
||||||
|
.bds-r { border-style: ridge !important; } |
||||||
|
.bds-i { border-style: inset !important; } |
||||||
|
.bds-o { border-style: outset !important; } |
||||||
|
|
||||||
|
|
||||||
|
.peers { |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex !important; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: flex-start; |
||||||
|
flex-flow: row wrap; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.peer { |
||||||
|
display: block; |
||||||
|
height: auto; |
||||||
|
flex: 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.peer-greed { |
||||||
|
flex: 1 1 auto; |
||||||
|
// overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.peers-greed > .peer, |
||||||
|
.peers-greed > .peers { |
||||||
|
flex: 1 1 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.peer > img { |
||||||
|
max-width: none; |
||||||
|
} |
||||||
|
|
||||||
|
.peer-greed > img { |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Align Items |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.ai-fs { align-items: flex-start; } |
||||||
|
.ai-fe { align-items: flex-end; } |
||||||
|
.ai-c { align-items: center; } |
||||||
|
.ai-b { align-items: baseline; } |
||||||
|
.ai-s { align-items: stretch; } |
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Pseudo Elements |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.no-after::after { display: none !important; } |
||||||
|
.no-before::before { display: none !important; } |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@import "mediaqueriesranges"; |
||||||
|
@import "border"; |
||||||
|
@import "typography"; |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
// --------------------------------------------------------- |
||||||
|
// @TOC |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// + @General Media Query |
||||||
|
// + @All Above Media Query |
||||||
|
// + @All Under Media Query |
||||||
|
// + @Between Two Devices Media Query |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @General Media Query Mixin |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// Mixin used for custom rules that don't follow |
||||||
|
// any of the following premade media queries. |
||||||
|
|
||||||
|
@mixin mq($condition) { |
||||||
|
@media #{$condition} { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @All Above Media Query Mixin |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// Mixin used to match certain breakpoint |
||||||
|
// and all devices above it. |
||||||
|
|
||||||
|
@mixin from($breakpoint) { |
||||||
|
@media screen and (min-width: $breakpoint){ |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @All Under Media Query Mixin |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// Mixin used to match all devices under certain breakpoint. |
||||||
|
|
||||||
|
@mixin to($breakpoint) { |
||||||
|
@media screen and (max-width: $breakpoint - 1px) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Between Two Devices Media Query Mixin |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
// Mixin used to match the devices between 2 breakpoints. |
||||||
|
|
||||||
|
@mixin between($start, $end){ |
||||||
|
@media screen and (min-width: $start) and (max-width: $end - 1px) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//---------------------------------------------------------- |
||||||
|
// @Placeholder |
||||||
|
//---------------------------------------------------------- |
||||||
|
|
||||||
|
@mixin placeholder { |
||||||
|
&::-webkit-input-placeholder { @content; } |
||||||
|
&:-moz-placeholder { @content; } |
||||||
|
&::-moz-placeholder { @content; } |
||||||
|
&:-ms-input-placeholder { @content; } |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Text Align |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.ta-c { text-align: center !important; } |
||||||
|
.ta-l { text-align: left !important; } |
||||||
|
.ta-r { text-align: right !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Text Transform |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.tt-n { text-transform: none !important; } |
||||||
|
.tt-u { text-transform: uppercase !important; } |
||||||
|
.tt-l { text-transform: lowercase !important; } |
||||||
|
.tt-c { text-transform: capitalize !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Font Style |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.fs-i { font-style: italic !important; } |
||||||
|
.fs-o { font-style: oblique !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Text Decoration |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.td-n { text-decoration: none !important; } |
||||||
|
.td-o { text-decoration: overline !important; } |
||||||
|
.td-lt { text-decoration: line-through !important; } |
||||||
|
.td-u { text-decoration: underline !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @White Space |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.whs-nw { white-space: nowrap !important; } |
||||||
|
.whs-p { white-space: pre !important; } |
||||||
|
.whs-n { white-space: normal !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Word Break |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.wob-n { word-break: normal !important; } |
||||||
|
.wob-ba { word-break: break-all !important; } |
||||||
|
.wob-k { word-break: keep-all !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Word Wrap |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.wow-bw { word-wrap: break-word !important; } |
||||||
|
.wow-n { word-wrap: normal !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Text Overflow |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.tov-e { text-overflow: ellipsis !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Font Size |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.fsz-xs { font-size: 0.75rem !important; } |
||||||
|
.fsz-sm { font-size: 0.87rem !important; } |
||||||
|
.fsz-def { font-size: 1rem !important; } |
||||||
|
.fsz-md { font-size: 1.15rem !important; } |
||||||
|
.fsz-lg { font-size: 1.4rem !important; } |
||||||
|
.fsz-xl { font-size: 1.7rem !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Font Weight |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.fw-100 { font-weight: 100 !important; } |
||||||
|
.fw-200 { font-weight: 200 !important; } |
||||||
|
.fw-300 { font-weight: 300 !important; } |
||||||
|
.fw-400 { font-weight: 400 !important; } |
||||||
|
.fw-500 { font-weight: 500 !important; } |
||||||
|
.fw-600 { font-weight: 600 !important; } |
||||||
|
.fw-700 { font-weight: 700 !important; } |
||||||
|
.fw-800 { font-weight: 800 !important; } |
||||||
|
.fw-900 { font-weight: 900 !important; } |
||||||
|
|
||||||
|
// --------------------------------------------------------- |
||||||
|
// @Line Height |
||||||
|
// --------------------------------------------------------- |
||||||
|
|
||||||
|
.lh-0 { line-height: 0 !important; } |
||||||
|
.lh-1 { line-height: 1 !important; } |
||||||
|
.lh-3\/2 { line-height: 1.5 !important; } |
||||||
|
After Width: | Height: | Size: 29 KiB |
@ -1,95 +1,21 @@ |
|||||||
{#<footer {% block footer_open_attributes %}{% endblock footer_open_attributes %}>#} |
|
||||||
{% autoescape false %} |
{% autoescape false %} |
||||||
<footer id="footer-section" class="page-footer"> |
<footer class="footer bdT ta-c lh-0 fsz-sm c-grey-600 text-right"> |
||||||
<!-- start of #footer section --> |
{% if plugin_pre_footer %} |
||||||
<div class="container"> |
<div id="plugin_pre_footer"> |
||||||
<div class="pre-footer"> |
{{ plugin_pre_footer }} |
||||||
{% if plugin_pre_footer %} |
|
||||||
<div id="plugin_pre_footer"> |
|
||||||
{{ plugin_pre_footer }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
</div> |
|
||||||
<div class="sub-footer"> |
|
||||||
<div class="row"> |
|
||||||
<div class="col-md-4"> |
|
||||||
{% if session_teachers is not null %} |
|
||||||
<div class="session-teachers"> |
|
||||||
{{ session_teachers }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
{% if teachers is not null %} |
|
||||||
<div class="teachers"> |
|
||||||
{{ teachers }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
{% if plugin_footer_left is not null %} |
|
||||||
<div id="plugin_footer_left"> |
|
||||||
{{ plugin_footer_left }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
</div> |
|
||||||
<div class="col-md-4"> |
|
||||||
{% if plugin_footer_center is not null %} |
|
||||||
<div id="plugin_footer_center"> |
|
||||||
{{ plugin_footer_center }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
</div> |
|
||||||
<div class="col-md-4 text-right"> |
|
||||||
{% if administrator_name is not null %} |
|
||||||
<div class="administrator-name"> |
|
||||||
{{ administrator_name }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
<div class="software-name"> |
|
||||||
<a href="{{_p.web}}" target="_blank"> |
|
||||||
{{ "PoweredByX" |get_lang | format(_s.software_name) }} |
|
||||||
</a>© {{ "now"|date("Y") }} |
|
||||||
</div> |
|
||||||
{% if plugin_footer_right is not null %} |
|
||||||
<div id="plugin_footer_right"> |
|
||||||
{{ plugin_footer_right }} |
|
||||||
</div> |
|
||||||
{% endif %} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
{% if footer_extra_content is not null %} |
{% endif %} |
||||||
<div class="extra-footer"> |
{% if administrator_name is not null %} |
||||||
{{ footer_extra_content }} |
{{ administrator_name }} |
||||||
</div> |
{% endif %} |
||||||
{% endif %} |
<a href="{{_p.web}}" target="_blank"> |
||||||
</div><!-- end of #container --> |
{{ "PoweredByX" |get_lang | format(_s.software_name) }} |
||||||
|
</a>© {{ "now"|date("Y") }} |
||||||
</footer> |
</footer> |
||||||
|
|
||||||
|
{#<footer {% block footer_open_attributes %}{% endblock footer_open_attributes %}>#} |
||||||
{% endautoescape %} |
{% endautoescape %} |
||||||
{{ execution_stats }} |
{{ execution_stats }} |
||||||
|
|
||||||
<div class="modal fade" id="expand-image-modal" tabindex="-1" role="dialog" aria-labelledby="expand-image-modal-title" aria-hidden="true"> |
|
||||||
<div class="modal-dialog modal-lg"> |
|
||||||
<div class="modal-content"> |
|
||||||
<div class="modal-header"> |
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"><span aria-hidden="true">×</span></button> |
|
||||||
<h4 class="modal-title" id="expand-image-modal-title"> </h4> |
|
||||||
</div> |
|
||||||
<div class="modal-body"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #} |
|
||||||
<div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true"> |
|
||||||
<div class="modal-dialog modal-lg"> |
|
||||||
<div class="modal-content"> |
|
||||||
<div class="modal-header"> |
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"> |
|
||||||
<span aria-hidden="true">×</span> |
|
||||||
</button> |
|
||||||
<h4 class="modal-title" id="global-modal-title"> </h4> |
|
||||||
</div> |
|
||||||
<div class="modal-body"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{{ footer_extra_content }} |
{{ footer_extra_content }} |
||||||
|
|||||||
@ -0,0 +1,26 @@ |
|||||||
|
{% autoescape false %} |
||||||
|
<ul class="sidebar-menu scrollable pos-r"> |
||||||
|
{{ mopa_bootstrap_menu('ChamiloCoreBundle:NavBuilder:leftMenu', {'automenu': 'navbar', 'stacked' : true}) }} |
||||||
|
|
||||||
|
<li class="sidebar-divider"></li> |
||||||
|
|
||||||
|
<li class="nav-item"> |
||||||
|
<a class='sidebar-link' href="https://docs.chamilo.org/"> |
||||||
|
<i class="far fa-file-alt"></i> |
||||||
|
{{ "Documentation"|get_lang }} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a class='sidebar-link' href="https://forum.chamilo.org/"> |
||||||
|
<i class="fa fa-users"></i> |
||||||
|
{{ "Forums"|get_lang }} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a class='sidebar-link' href="https://github.com/chamilo/chamilo-lms"> |
||||||
|
<i class="fab fa-github"></i> |
||||||
|
{{ "GithubRepository"|get_lang }} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
{% endautoescape %} |
||||||
Loading…
Reference in new issue