added admin interface
This commit is contained in:
kicap1992
57
admin/assets/scss/partials/_accordion.scss
Normal file
57
admin/assets/scss/partials/_accordion.scss
Normal file
@ -0,0 +1,57 @@
|
||||
.accordion{
|
||||
.card-header{
|
||||
@extend .padding-0;
|
||||
.btn{
|
||||
@extend .align-left;
|
||||
@extend .font-16;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion2 {
|
||||
@extend .margin-0;
|
||||
@extend .padding-0;
|
||||
list-style: none;
|
||||
border-top: 1px solid $grey-300;
|
||||
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid $grey-300;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* Thumb */
|
||||
.accordion-thumb {
|
||||
@extend .margin-0;
|
||||
@extend .font-16;
|
||||
font-weight: $font-weight-400;
|
||||
padding: .8rem 0;
|
||||
cursor: pointer;
|
||||
|
||||
// Chevron
|
||||
&::before {
|
||||
@include transition(all .3s ease-in-out);
|
||||
@extend .inlineblock;
|
||||
content: "\f138";
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
span{
|
||||
@extend .m-l-10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.accordion-panel {
|
||||
@extend .margin-0;
|
||||
padding-bottom: .8rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.accordion-item.is-active {
|
||||
.accordion-thumb::before {
|
||||
content: "\f13a";
|
||||
}
|
||||
}
|
||||
}
|
||||
148
admin/assets/scss/partials/_authentication.scss
Normal file
148
admin/assets/scss/partials/_authentication.scss
Normal file
@ -0,0 +1,148 @@
|
||||
/* Authentication forms */
|
||||
|
||||
|
||||
.auth-main{
|
||||
margin-top: 100px;
|
||||
@include max-screen($break-large) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@include max-screen($break-xsmall) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
|
||||
@include max-screen($break-xlarge) {
|
||||
width: 26%;
|
||||
}
|
||||
@include max-screen($break-large) {
|
||||
width: 28%;
|
||||
}
|
||||
@include max-screen($break-medium) {
|
||||
width: 35%;
|
||||
}
|
||||
@include max-screen($break-xsmall) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
content: '';
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
margin-bottom: 80px;
|
||||
padding: 0 0 15px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
|
||||
justify-content: space-between;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@include max-screen($break-medium) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
color: $col-white;
|
||||
}
|
||||
.nav-link{
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.auth_detail{
|
||||
padding: 40px 0;
|
||||
max-width: 360px;
|
||||
@include max-screen($break-medium) {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom: 20px;
|
||||
font-size: 40px;
|
||||
font-weight: $font-weight-300;
|
||||
color: $col-white;
|
||||
|
||||
@include max-screen($break-medium) {
|
||||
font-size: 35px;
|
||||
}
|
||||
@include max-screen($break-xsmall) {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
color: $col-white;
|
||||
}
|
||||
.social-links{
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-auth-small {
|
||||
.btn{
|
||||
@extend .m-t-20;
|
||||
}
|
||||
|
||||
.element-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.element-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
@extend .m-t-20;
|
||||
@extend .align-center;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
@extend .m-t-5;
|
||||
@extend .m-b-0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
color: $color-muted;
|
||||
@extend .displayblock;
|
||||
}
|
||||
|
||||
.btn-signin-social {
|
||||
@extend .displayblock;
|
||||
@extend .m-b-5;
|
||||
padding: 10px 22px;
|
||||
width: 100%;
|
||||
background-color: $col-white;
|
||||
border-color: $grey-200;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $grey-200;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
@include max-screen($break-medium) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
46
admin/assets/scss/partials/_badges.scss
Normal file
46
admin/assets/scss/partials/_badges.scss
Normal file
@ -0,0 +1,46 @@
|
||||
/* badges */
|
||||
.badge{
|
||||
font-weight: $font-weight-400;
|
||||
@extend .m-l-5;
|
||||
@extend .m-r-5;
|
||||
padding: 4px 8px;
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.badge-icon{
|
||||
padding: 0.4em 0.55em;
|
||||
i{
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
.badge-default{
|
||||
background: transparent;
|
||||
border-color: $color-muted;
|
||||
color: $color-muted;
|
||||
}
|
||||
.badge-primary{
|
||||
background: transparent;
|
||||
border-color: $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
.badge-info{
|
||||
background: transparent;
|
||||
border-color: $color-info;
|
||||
color: $color-info;
|
||||
}
|
||||
.badge-success{
|
||||
background: transparent;
|
||||
border-color: $color-success;
|
||||
color: $color-success;
|
||||
}
|
||||
.badge-warning{
|
||||
background: transparent;
|
||||
border-color: $color-warning;
|
||||
color: $color-warning;
|
||||
}
|
||||
.badge-danger{
|
||||
background: transparent;
|
||||
border-color: $color-danger;
|
||||
color: $color-danger;
|
||||
}
|
||||
8
admin/assets/scss/partials/_buttons.scss
Normal file
8
admin/assets/scss/partials/_buttons.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.btn{
|
||||
font-size: $font-size;
|
||||
&.btn-round{
|
||||
@include border-radius(50px);
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
127
admin/assets/scss/partials/_card.scss
Normal file
127
admin/assets/scss/partials/_card.scss
Normal file
@ -0,0 +1,127 @@
|
||||
.card {
|
||||
@include transition(all .3s ease-in-out);
|
||||
@extend .inlineblock;
|
||||
background: $col-white;
|
||||
border-color: $grey-300;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.fullscreen {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1040;
|
||||
border-radius: 0 !important;
|
||||
.icon-size-fullscreen{
|
||||
&::before{
|
||||
content: "\e058";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
@include box-shadow(none);
|
||||
@extend .m-b-0;
|
||||
color: $grey-800;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
&.bline{
|
||||
border-bottom: 1px solid $grey-300;
|
||||
}
|
||||
.header-dropdown {
|
||||
@extend .margin-0;
|
||||
@extend .padding-0;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 20px;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
@extend .inlineblock;
|
||||
a{
|
||||
@extend .displayblock;
|
||||
padding: 5px 10px;
|
||||
color: $grey-500;
|
||||
|
||||
> i{
|
||||
@extend .font-12;
|
||||
}
|
||||
|
||||
&.dropdown-toggle{
|
||||
&:after{
|
||||
border: none;
|
||||
content: '\f141';
|
||||
font-family: 'FontAwesome';
|
||||
vertical-align: text-top;
|
||||
width: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: $border-radius-large;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.2);
|
||||
border: 0;
|
||||
|
||||
li {
|
||||
display: block !important;
|
||||
|
||||
a {
|
||||
color: $grey-600;
|
||||
padding:10px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover{
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
@extend .margin-0;
|
||||
@extend .font-16;
|
||||
font-weight: $font-weight-600;
|
||||
color: $grey-800;
|
||||
position: relative;
|
||||
|
||||
small {
|
||||
@extend .displayblock;
|
||||
@extend .m-t-5;
|
||||
@extend .font-12;
|
||||
color: $grey-500;
|
||||
line-height: 15px;
|
||||
|
||||
a {
|
||||
font-weight: $font-weight-700;
|
||||
color: $grey-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-15 {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-weight: $font-weight-400;
|
||||
color: $grey-800;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
138
admin/assets/scss/partials/_charts.scss
Normal file
138
admin/assets/scss/partials/_charts.scss
Normal file
@ -0,0 +1,138 @@
|
||||
/* sparkline chart */
|
||||
#jqstooltip {
|
||||
background-color: $col-white;
|
||||
border-color: #ddd;
|
||||
color: $font-color;
|
||||
|
||||
.jqsfield {
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* chartist */
|
||||
$ct-series-colors: (
|
||||
a: #6ebdd1,
|
||||
b: #f9ab6c,
|
||||
c: #afc979,
|
||||
d: #AB7DF6,
|
||||
e: #5cc196,
|
||||
f: #d17905,
|
||||
g: #453d3f,
|
||||
h: #59922b,
|
||||
i: #0544d3,
|
||||
j: #6b0392,
|
||||
k: #f05b4f,
|
||||
l: #dda458,
|
||||
m: #eacf7d,
|
||||
n: #86797d,
|
||||
o: #b2c326,
|
||||
);
|
||||
|
||||
.ct-chart {
|
||||
position: relative;
|
||||
}
|
||||
.ct-series {
|
||||
.ct-line {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.ct-bar {
|
||||
stroke-width: 15px;
|
||||
}
|
||||
.ct-point {
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: circle;
|
||||
}
|
||||
}
|
||||
|
||||
@each $series-name, $series-color in $ct-series-colors {
|
||||
.ct-series-#{$series-name} {
|
||||
.ct-line,
|
||||
.ct-bar,
|
||||
.ct-point {
|
||||
stroke: $series-color;
|
||||
}
|
||||
|
||||
.ct-area,
|
||||
.ct-slice-donut-solid,
|
||||
.ct-slice-pie,
|
||||
.ct-bar {
|
||||
fill: $series-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chartist-tooltip {
|
||||
@include border-radius(3px);
|
||||
|
||||
min-width: 3.5em;
|
||||
background: #5a5a5a;
|
||||
color: $col-white;
|
||||
|
||||
&:before {
|
||||
margin-left: -8px;
|
||||
border-width: 8px;
|
||||
border-top-color: #5a5a5a;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-axis-title {
|
||||
fill: #9a9a9a;
|
||||
}
|
||||
|
||||
|
||||
/* Top Products Chart */
|
||||
.ct-label {
|
||||
@extend .font-14;
|
||||
color: $font-color;
|
||||
}
|
||||
.ct-legend {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
@include inline-block;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
margin-bottom: 3px;
|
||||
margin-right: 15px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li:before {
|
||||
@include border-radius(2px);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: '';
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
li.inactive:before {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.ct-legend-inside {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
$i: 0;
|
||||
@each $series-name, $series-color in $ct-series-colors {
|
||||
.ct-series-#{$i}:before {
|
||||
background-color: $series-color;
|
||||
border-color: $series-color;
|
||||
}
|
||||
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
/* End Top Products Chart */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
302
admin/assets/scss/partials/_elements-bootstrap.scss
Normal file
302
admin/assets/scss/partials/_elements-bootstrap.scss
Normal file
@ -0,0 +1,302 @@
|
||||
/* Bootstrap Elements */
|
||||
|
||||
.carousel{
|
||||
&.vert{
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.active.carousel-item-right {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100% 0);
|
||||
}
|
||||
|
||||
.carousel-item-prev,
|
||||
.active.carousel-item-left {
|
||||
-webkit-transform: translate3d(0,-100%, 0);
|
||||
transform: translate3d(0,-100%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* bootstrap progress bar */
|
||||
.progress {
|
||||
@include border-radius(2px);
|
||||
@include box-shadow(none);
|
||||
|
||||
background-color: #f1f1f1;
|
||||
|
||||
&.wide {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@include transition(width 3s ease);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&.progress-lg {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&.progress-sm {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&.progress-xs {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&.progress-sm,
|
||||
&.progress-xs {
|
||||
.progress-bar {
|
||||
text-indent: -9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: $color-accent;
|
||||
}
|
||||
.progress-bar-success {
|
||||
background-color: $color-success;
|
||||
}
|
||||
.progress-bar-warning {
|
||||
background-color: $color-warning;
|
||||
}
|
||||
.progress-bar-danger {
|
||||
background-color: $color-danger;
|
||||
}
|
||||
.progress-bar-info {
|
||||
background-color: $color-info;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $custom-colors {
|
||||
@include progress-transparent-variant($color-name, $color-value);
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
background-color: #181818;
|
||||
}
|
||||
.tooltip {
|
||||
&.in {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
&.left .tooltip-arrow {
|
||||
border-left-color: #5a5a5a;
|
||||
}
|
||||
|
||||
&.right .tooltip-arrow {
|
||||
border-right-color: #5a5a5a;
|
||||
}
|
||||
|
||||
&.top .tooltip-arrow {
|
||||
border-top-color: #5a5a5a;
|
||||
}
|
||||
|
||||
&.bottom .tooltip-arrow {
|
||||
border-bottom-color: #5a5a5a;
|
||||
}
|
||||
}
|
||||
.popover {
|
||||
@include box-shadow(0px 2px 6px 0px rgba(0,0,0,0.05));
|
||||
font-family: $font-family;
|
||||
border-color: #ededed;
|
||||
}
|
||||
.popover-title {
|
||||
font-weight: $font-weight-600;
|
||||
color: $font-color;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* accordion */
|
||||
.panel-group .panel {
|
||||
.panel-heading {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
@extend .font-14;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
.panel-title > a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
i {
|
||||
@extend .font-18;
|
||||
@extend .m-r-5;
|
||||
|
||||
&.icon-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.right {
|
||||
@extend .m-r-0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.icon-expanded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-collapsed {
|
||||
@include inline-block;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* paginations */
|
||||
.pagination {
|
||||
> li > a,
|
||||
> li > span {
|
||||
color: $color-accent;
|
||||
}
|
||||
|
||||
> li {
|
||||
@include pagination-button-color($color-accent);
|
||||
|
||||
&:first-child > a,
|
||||
&:first-child > span {
|
||||
@include border-left-radius(2px);
|
||||
}
|
||||
|
||||
&:last-child > a,
|
||||
&:last-child > span {
|
||||
@include border-right-radius(2px);
|
||||
}
|
||||
}
|
||||
|
||||
> .active {
|
||||
@include pagination-button-color($color-accent);
|
||||
|
||||
> a, > span {
|
||||
background-color: $color-accent;
|
||||
border-color: darken($color-accent, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.borderless {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
@include border-radius(2px);
|
||||
border-color: transparent;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> a,
|
||||
> span {
|
||||
color: $col-white;
|
||||
background-color: $color-accent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $col-white;
|
||||
background-color: $color-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
li > a {
|
||||
border-color: $color-accent;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $color-accent;
|
||||
border-color: darken($color-accent, 3%);
|
||||
color: $col-white;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled > a,
|
||||
.disabled > a:hover,
|
||||
.disabled > a:focus,
|
||||
.disabled > span {
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-border-utils [class^=border] {
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.blockquote {
|
||||
border-left: none;
|
||||
border: 1px solid $grey-600;;
|
||||
padding: 20px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.8;
|
||||
|
||||
&.blockquote-primary {
|
||||
border-color: $color-primary;
|
||||
small{
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-info {
|
||||
border-color: $color-info;
|
||||
small{
|
||||
color: $color-info;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-danger {
|
||||
border-color: $color-danger;
|
||||
small{
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .93em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
@include transition(all .3s ease-in-out);
|
||||
&:hover{
|
||||
@include box-shadow(0 5px 10px 0 rgba(0,0,0,0.2));
|
||||
}
|
||||
}
|
||||
.btn-default{
|
||||
color: $grey-600;
|
||||
background-color: $col-white;
|
||||
border-color: $grey-300;
|
||||
padding: 6px 18px;
|
||||
|
||||
&.btn-sm{
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
.btn-toolbar>.btn-group{@extend .m-l-5;}
|
||||
167
admin/assets/scss/partials/_elements.scss
Normal file
167
admin/assets/scss/partials/_elements.scss
Normal file
@ -0,0 +1,167 @@
|
||||
/* Elements */
|
||||
.metric-inline {
|
||||
@include border-radius(3px);
|
||||
@extend .align-center;
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
i {
|
||||
@extend .displayblock;
|
||||
margin-bottom: 12px;
|
||||
color: $color-muted;
|
||||
}
|
||||
|
||||
span {
|
||||
@extend .displayblock;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.separator-linethrough {
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
@extend .align-center;
|
||||
|
||||
span {
|
||||
@include inline-block;
|
||||
|
||||
padding: 0 10px;
|
||||
position: inherit;
|
||||
font-size: 18px;
|
||||
background-color: $col-white;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@extend .displayblock;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
content: '';
|
||||
border-top: 1px solid #f0f0f0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.block-header{
|
||||
padding: 10px 25px;
|
||||
background: $col-white;
|
||||
@extend .m-b-25;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@include max-screen($break-small) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
@include max-screen($break-xsmall) {
|
||||
.text-right{
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
@extend .m-b-0;
|
||||
line-height: 28px;
|
||||
}
|
||||
.breadcrumb{
|
||||
@extend .padding-0;
|
||||
@extend .m-b-0;
|
||||
@extend .m-r-20;
|
||||
@extend .inlineblock;
|
||||
background: transparent;
|
||||
li{
|
||||
@extend .inlineblock;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* toastr notification */
|
||||
#toast-container {
|
||||
> div {
|
||||
@include opacity(1);
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
@include opacity(.3);
|
||||
|
||||
top: -11px;
|
||||
text-shadow: none;
|
||||
color: $col-white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $color-accent;
|
||||
|
||||
.toast-close-button {
|
||||
color: darken($color-accent, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: $color-success;
|
||||
|
||||
.toast-close-button {
|
||||
color: darken($color-success, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $color-warning;
|
||||
|
||||
.toast-close-button {
|
||||
color: darken($color-warning, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $color-danger;
|
||||
|
||||
.toast-close-button {
|
||||
color: darken($color-danger, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
@extend .m-b-0;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: $col-white;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Tags Input */
|
||||
.bootstrap-tagsinput{
|
||||
.tag{
|
||||
margin: 2px !important;
|
||||
}
|
||||
}
|
||||
/* Input Slider */
|
||||
.noUi-target{
|
||||
box-shadow: none !important;
|
||||
border-color: $grey-300;
|
||||
.noUi-background,
|
||||
.noUi-connect{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
408
admin/assets/scss/partials/_forms.scss
Normal file
408
admin/assets/scss/partials/_forms.scss
Normal file
@ -0,0 +1,408 @@
|
||||
/* Forms */
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
@extend .padding-0;
|
||||
|
||||
.btn {
|
||||
@include box-shadow(none);
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
@extend .padding-0;
|
||||
border: none;
|
||||
color: $grey-500;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: inherit;
|
||||
border-left: none;
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fancy checkbox and radio button */
|
||||
.fancy-checkbox {
|
||||
margin-right: 10px;
|
||||
|
||||
&,
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
+ span {
|
||||
@include inline-block;
|
||||
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include inline-block;
|
||||
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
content: "";
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span:before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f00c';
|
||||
font-size: 10px;
|
||||
color: $col-white;
|
||||
text-align: center;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-color-green input[type="checkbox"] {
|
||||
&:checked + span:before {
|
||||
color: $color-success;
|
||||
background-color: $col-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-bgcolor-green input[type="checkbox"] {
|
||||
&:checked + span:before {
|
||||
color: $col-white;
|
||||
background-color: $color-success;
|
||||
border-color: darken($color-success, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fancy-radio {
|
||||
margin-right: 10px;
|
||||
|
||||
&,
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
+ span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
@include inline-block;
|
||||
@include border-radius(8px);
|
||||
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
content: "";
|
||||
border: 1px solid #ccc;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span i:after {
|
||||
@include border-radius(50%);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #7b848c;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-color-green input[type="radio"] {
|
||||
&:checked + span i:after {
|
||||
background-color: #53D76A;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-bgcolor-green input[type="radio"] {
|
||||
&:checked + span i {
|
||||
background-color: #53D76A;
|
||||
|
||||
&:after {
|
||||
background-color: $col-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fancy checkbox and fancy radio */
|
||||
.input-group-addon {
|
||||
.fancy-radio,
|
||||
.fancy-checkbox {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.fancy-radio input[type="radio"] + span i,
|
||||
.fancy-checkbox input[type="checkbox"] + span {
|
||||
margin: 0;
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
@include box-shadow(none);
|
||||
background-color: $col-white;
|
||||
font-size: $font-size;
|
||||
height: auto;
|
||||
|
||||
&:focus {
|
||||
@include box-shadow(none);
|
||||
outline: none;
|
||||
border-color: darken(#dadada, 10%);
|
||||
}
|
||||
}
|
||||
.help-block {
|
||||
font-size: 13px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
/* multiselect checkbox */
|
||||
.multiselect-custom + .btn-group ul.multiselect-container {
|
||||
> li {
|
||||
> a {
|
||||
padding: 5px 15px;
|
||||
display: block;
|
||||
outline: none;
|
||||
|
||||
label.checkbox {
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
||||
&:before {
|
||||
@include inline-block;
|
||||
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
label.checkbox:before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f00c';
|
||||
font-size: 12px;
|
||||
color: #99A1A7;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
background-color: $grey-200;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
.checkbox{
|
||||
color: $col-white;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* multiselect radio */
|
||||
.multiselect-custom + .btn-group ul.multiselect-container {
|
||||
> li {
|
||||
> a {
|
||||
padding: 5px 15px;
|
||||
display: block;
|
||||
outline: none;
|
||||
|
||||
label.radio {
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
@include inline-block;
|
||||
@include border-radius(8px);
|
||||
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
label.radio:before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f111';
|
||||
color: #99a1a7;
|
||||
font-size: 8px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
.radio{
|
||||
color: $col-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.multiselect-search {
|
||||
@include border-right-radius(2px !important);
|
||||
}
|
||||
.btn.multiselect-clear-filter {
|
||||
@include box-shadow(none);
|
||||
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
z-index: 9 !important;
|
||||
outline: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect_div{
|
||||
|
||||
> .btn-group{
|
||||
|
||||
display: block;
|
||||
|
||||
.btn{
|
||||
text-align: left;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
&:hover{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Date Picker */
|
||||
.datepicker{
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
table{
|
||||
tr td.active {
|
||||
&.active,
|
||||
&.highlighted.active,
|
||||
&.highlighted:active,
|
||||
&.active:active {
|
||||
background-color: $color-accent;
|
||||
border-color: darken($color-accent, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.range-to{
|
||||
padding: 4px 10px !important;
|
||||
background: #ced4da;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* parsley js */
|
||||
.parsley-errors-list {
|
||||
margin-top: 8px;
|
||||
|
||||
li {
|
||||
color: $color-danger;
|
||||
font-size: 0.9em;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
input.parsley-error,
|
||||
select.parsley-error,
|
||||
textarea.parsley-error {
|
||||
background-color: #fbf5f5;
|
||||
border-color: darken(#fbf5f5, 8%);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&.parsley-error:focus {
|
||||
border-color: darken(#fbf5f5, 18%);
|
||||
}
|
||||
|
||||
&.parsley-success:focus {
|
||||
border-color: darken(#DFF0D8, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
.md-editor > textarea {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dropify-wrapper {
|
||||
@include border-radius(3px);
|
||||
|
||||
background-color: #f9f9f9;
|
||||
color: #b9b9b9;
|
||||
border: 1px solid #e4e4e4;
|
||||
|
||||
.dropify-preview {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
select.form-control:not([size]):not([multiple]){height: 36px;}
|
||||
|
||||
|
||||
194
admin/assets/scss/partials/_formwizard.scss
Normal file
194
admin/assets/scss/partials/_formwizard.scss
Normal file
@ -0,0 +1,194 @@
|
||||
.wizard {
|
||||
|
||||
.content {
|
||||
@extend .margin-0;
|
||||
min-height: 245px;
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
|
||||
.body {
|
||||
padding: 15px;
|
||||
|
||||
label.error{
|
||||
@extend .margin-0;
|
||||
font-size: 12px;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
input[type="checkbox"]{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: relative;
|
||||
@extend .displayblock;
|
||||
@extend .align-right;
|
||||
width: 100%;
|
||||
margin-top: 10px !important;
|
||||
|
||||
ul{
|
||||
@extend .inlineblock;
|
||||
> li{
|
||||
float: left;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $col-white;
|
||||
@extend .displayblock;
|
||||
text-decoration: none;
|
||||
@extend .m-l-5;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $col-white;
|
||||
@extend .displayblock;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled a {
|
||||
background: $grey-200;
|
||||
color: #aaa;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $grey-200;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
|
||||
position: relative;
|
||||
@extend .displayblock;
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
|
||||
a {
|
||||
@extend .displayblock;
|
||||
width: auto;
|
||||
margin: 0 2px 0 0;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover, &:active {
|
||||
@extend .displayblock;
|
||||
width: auto;
|
||||
margin: 0 2px 0 0;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.number{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.disabled a {
|
||||
background: $grey-200;
|
||||
color: $grey-400;
|
||||
cursor: default;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $grey-200;
|
||||
color: $grey-400;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.current a {
|
||||
color: $col-white;
|
||||
cursor: default;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $col-white;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.done a {
|
||||
color: $col-white;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $col-white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> ul > li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
&:last-child{
|
||||
a{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
> .steps {
|
||||
float: left;
|
||||
width: 30%;
|
||||
@extend .p-r-5;
|
||||
|
||||
> ul > li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
|
||||
a{
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
float: left;
|
||||
width: 70%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
float: right;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard_validation{
|
||||
.wizard .steps>ul>li{
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen($break-small - 1px){
|
||||
.wizard {
|
||||
> .steps{
|
||||
> ul > li{
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
a{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&.wizard.vertical{
|
||||
>.content, >.steps{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.wizard_validation .wizard .steps>ul>li{
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
107
admin/assets/scss/partials/_helpers.scss
Normal file
107
admin/assets/scss/partials/_helpers.scss
Normal file
@ -0,0 +1,107 @@
|
||||
//Margin
|
||||
@for $i from -25 through 25 {
|
||||
.m-l-#{$i * 5} {
|
||||
margin-left: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.m-t-#{$i * 5} {
|
||||
margin-top: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.m-r-#{$i * 5} {
|
||||
margin-right: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.m-b-#{$i * 5} {
|
||||
margin-bottom: #{$i * 5}px;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@for $i from 0 through 25 {
|
||||
.p-l-#{$i * 5} {
|
||||
padding-left: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.p-t-#{$i * 5} {
|
||||
padding-top: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.p-r-#{$i * 5} {
|
||||
padding-right: #{$i * 5}px;
|
||||
}
|
||||
|
||||
.p-b-#{$i * 5} {
|
||||
padding-bottom: #{$i * 5}px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@for $i from 5 through 49 {
|
||||
.font-#{$i + 1} {
|
||||
font-size: #{$i + 1}px;
|
||||
}
|
||||
}
|
||||
/* Helpers */
|
||||
|
||||
.bg-success {
|
||||
background-color: $color-success;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background-color: $color-warning;
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: $color-danger;
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background-color: $color-info;
|
||||
}
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.p-25 {
|
||||
padding: 25px !important;
|
||||
}
|
||||
.font300{
|
||||
font-weight: $font-weight-300;
|
||||
}
|
||||
.font600{
|
||||
font-weight: $font-weight-600;
|
||||
}
|
||||
.font700{
|
||||
font-weight: $font-weight-700;
|
||||
}
|
||||
.w40{
|
||||
width: 40px;
|
||||
}
|
||||
.w45{
|
||||
width: 45px;
|
||||
}
|
||||
.w60{
|
||||
width: 60px;
|
||||
}
|
||||
.w80{
|
||||
width: 80px;
|
||||
}
|
||||
53
admin/assets/scss/partials/_layout.scss
Normal file
53
admin/assets/scss/partials/_layout.scss
Normal file
@ -0,0 +1,53 @@
|
||||
/* Layout */
|
||||
|
||||
#main-content {
|
||||
@include transition(all .3s ease-in-out);
|
||||
width: calc(100% - #{$sidebar-width});
|
||||
float: right;
|
||||
position: relative;
|
||||
margin-top: 65px;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
width: 100%;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
@include max-screen($break-small){
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
||||
> .container-fluid{
|
||||
padding-right: 20px;
|
||||
padding-left: 25px;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@include max-screen($break-small) {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.fullscreen-bg,
|
||||
html.fullscreen-bg body,
|
||||
html.fullscreen-bg #wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical-align-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.vertical-align-middle {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
238
admin/assets/scss/partials/_leftbar.scss
Normal file
238
admin/assets/scss/partials/_leftbar.scss
Normal file
@ -0,0 +1,238 @@
|
||||
/* Side Bar Menu */
|
||||
|
||||
#left-sidebar {
|
||||
@include transition(all .3s ease-in-out);
|
||||
@include box-shadow(0 3px 5px 0px rgba(0,0,0,.1));
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
background-color: #2c2c38;
|
||||
z-index: 9;
|
||||
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none; // Firefox /
|
||||
-ms-overflow-style: none; // IE 10+ /
|
||||
|
||||
&::-webkit-scrollbar { // WebKit /
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
@include max-screen($break-large) {
|
||||
@include box-shadow(0 5px 10px 0px rgba(0,0,0,.2));
|
||||
left: -$sidebar-width;
|
||||
}
|
||||
|
||||
.btn-toggle-offcanvas{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
@extend .displayblock;
|
||||
padding: 0 0 15px 0;
|
||||
margin: 15px 20px 0 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
|
||||
.logo{
|
||||
width: 30px;
|
||||
}
|
||||
span{
|
||||
@extend .inlineblock;
|
||||
@extend .font-18;
|
||||
@extend .m-l-10;
|
||||
color: $grey-400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-active{
|
||||
|
||||
#left-sidebar{
|
||||
left:0;
|
||||
|
||||
.btn-toggle-offcanvas{
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-fullwidth #wrapper {
|
||||
|
||||
.navbar-fixed-top{
|
||||
width: 100%;
|
||||
}
|
||||
#left-sidebar {
|
||||
left: -$sidebar-width;
|
||||
|
||||
&.ps {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
#main-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-account {
|
||||
@extend .align-center;
|
||||
color: $grey-400;
|
||||
margin: 20px;
|
||||
|
||||
.user_div{
|
||||
@include border-radius(90px);
|
||||
border: 1px solid #404050;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 90px;
|
||||
|
||||
.user-photo {
|
||||
@include border-radius(90px);
|
||||
width: 90px;
|
||||
vertical-align: top;
|
||||
border: 2px solid;
|
||||
}
|
||||
}
|
||||
.user-name {
|
||||
@extend .displayblock;
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.dropdown{
|
||||
@extend .displayblock;
|
||||
@extend .m-t-5;
|
||||
|
||||
.dropdown-menu{
|
||||
border-radius: $border-radius-large;
|
||||
transform: none !important;
|
||||
border: none;
|
||||
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.5);
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
|
||||
li.divider{
|
||||
border-bottom:1px solid rgba(255,255,255,.1);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
a{
|
||||
@extend .displayblock;
|
||||
@extend .font-14;
|
||||
padding: 10px;
|
||||
color: $grey-500;
|
||||
|
||||
&:hover{
|
||||
color: $grey-800;
|
||||
i{
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
@extend .m-r-10;
|
||||
@extend .font-14;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0 20px;
|
||||
|
||||
ul{
|
||||
@extend .padding-0;
|
||||
@extend .margin-0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
> li {
|
||||
@extend .p-b-5;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&.active > a {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.active a {
|
||||
font-weight: $font-weight-700;
|
||||
}
|
||||
|
||||
i {
|
||||
@extend .inlineblock;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition(all .3s ease-out);
|
||||
@extend .displayblock;
|
||||
@extend .font-14;
|
||||
color: $grey-500;
|
||||
border-radius: $border-radius-small;
|
||||
position: relative;
|
||||
padding: 13px 15px;
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
ul a {
|
||||
color: $grey-600;
|
||||
font-size: $font-size;
|
||||
padding: 10px 15px 10px 47px;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
content: '--';
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
ul ul a {
|
||||
padding: 10px 15px 10px 70px;
|
||||
}
|
||||
|
||||
ul.collapse a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background: #24242f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
admin/assets/scss/partials/_mediaobject.scss
Normal file
36
admin/assets/scss/partials/_mediaobject.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.media {
|
||||
@extend .m-b-20;
|
||||
|
||||
&.mleft{
|
||||
.media-left{
|
||||
@extend .m-r-20;
|
||||
}
|
||||
}
|
||||
&.mright{
|
||||
.media-body{
|
||||
@extend .align-right;
|
||||
}
|
||||
.media-right{
|
||||
@extend .m-l-20;
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
color: $grey-700;
|
||||
font-size: $font-size;
|
||||
|
||||
.media-heading {
|
||||
@extend .margin-0;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-700;
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bs-example{
|
||||
.media{
|
||||
.media-left{
|
||||
@extend .m-r-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
261
admin/assets/scss/partials/_navigation.scss
Normal file
261
admin/assets/scss/partials/_navigation.scss
Normal file
@ -0,0 +1,261 @@
|
||||
/* Navigation */
|
||||
|
||||
/* Top Nav Bar */
|
||||
.btn-toggle-fullwidth {
|
||||
@include max-screen($break-1024) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-fixed-top{
|
||||
@include transition(all .3s ease-in-out);
|
||||
background: $col-white;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
width: calc(100% - 250px);
|
||||
z-index: 8;
|
||||
padding: 7px 10px;
|
||||
border-bottom: 1px solid $grey-300;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include max-screen($break-small){
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-btn{
|
||||
@extend .p-r-15;
|
||||
@extend .m-r-15;
|
||||
@extend .m-t-10;
|
||||
display: none;
|
||||
float: left;
|
||||
border-right: 1px solid $col-white;
|
||||
|
||||
button {
|
||||
@extend .p-l-10;
|
||||
font-size: 20px;
|
||||
line-height: .7;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
color: $col-white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
@include max-screen($break-xsmall) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include max-screen($break-large) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right{
|
||||
display: inline-flex;
|
||||
|
||||
@include max-screen($break-1024){
|
||||
}
|
||||
@include max-screen($break-medium){
|
||||
}
|
||||
@include max-screen($break-small){
|
||||
}
|
||||
|
||||
#navbar-search {
|
||||
@extend .m-r-20;
|
||||
float: left;
|
||||
margin-top: 6px;
|
||||
|
||||
.form-control{
|
||||
@extend .p-l-20;
|
||||
height: 40px;
|
||||
width: 400px;
|
||||
@include max-screen($break-medium){
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@include max-screen($break-small - 1px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
@extend .margin-0;
|
||||
@extend .m-r-15;
|
||||
@extend .inlineblock;
|
||||
|
||||
> li{
|
||||
@extend .inlineblock;
|
||||
vertical-align: middle;
|
||||
a{
|
||||
color: $col-white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include box-shadow(0px 2px 20px 0px rgba(0,0,0,0.2));
|
||||
@extend .br8;
|
||||
top: 80%;
|
||||
position: absolute;
|
||||
border: 1px solid $col-white;
|
||||
padding:20px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
@include inline-block;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
@include max-screen($break-small - 1px) {
|
||||
padding: 15px 12px;
|
||||
}
|
||||
i {
|
||||
color: $grey-700;
|
||||
}
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
.notification-dot {
|
||||
@include border-radius(50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 7px;
|
||||
background-color: $col-dark;
|
||||
}
|
||||
}
|
||||
|
||||
ul.email {
|
||||
width: 360px;
|
||||
list-style: none;
|
||||
|
||||
@include max-screen($break-small) {
|
||||
width: calc(100% - 20px);
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.app_menu{
|
||||
width: 226px;
|
||||
|
||||
li{
|
||||
@extend .inlineblock;
|
||||
|
||||
a{
|
||||
border-radius: $border-radius-extra-small;
|
||||
@extend .displayblock;
|
||||
@extend .align-center;
|
||||
width: 90px;
|
||||
border: 1px solid $grey-300;
|
||||
padding: 13px 0;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background: $grey-300;
|
||||
}
|
||||
span{
|
||||
@extend .displayblock;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen($break-small - 1px) {
|
||||
margin-right: 0;
|
||||
|
||||
> li {
|
||||
//display: table-cell;
|
||||
position: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.open .dropdown-menu {
|
||||
@include box-shadow(0px 2px 6px 0px rgba(0,0,0,0.05));
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: $col-white;
|
||||
|
||||
> li > a {
|
||||
padding: 3px 20px;
|
||||
}
|
||||
|
||||
&.notifications > li > a {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include max-screen($break-small) {
|
||||
.navbar > .container .navbar-brand,
|
||||
.navbar > .container-fluid .navbar-brand {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include min-screen($break-small + 1px) {
|
||||
}
|
||||
|
||||
|
||||
.nav .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&.dropdown-md { min-width: 250px; }
|
||||
&.dropdown-lg { min-width: 360px; }
|
||||
|
||||
> li > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-animated:not(.scale-left) .dropdown-menu, .dropdown-animated:not(.scale-right) .dropdown-menu { opacity: 0; visibility: hidden; -webkit-transform: translateY(15px) !important; -moz-transform: translateY(15px) !important; -ms-transform: translateY(15px) !important; transform: translateY(15px) !important; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; display: block; margin: 0px; top: auto !important; }
|
||||
.dropdown-animated:not(.scale-left) .dropdown-menu.show, .dropdown-animated:not(.scale-right) .dropdown-menu.show { opacity: 1; visibility: visible; -webkit-transform: translateY(0px) !important; -moz-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; transform: translateY(0px) !important; }
|
||||
.dropdown-animated.scale-left .dropdown-menu { -webkit-transform-origin: top right !important; -moz-transform-origin: top right !important; -ms-transform-origin: top right !important; transform-origin: top right !important; transform: scale(0, 0) !important; -webkit-transform: scale(0, 0) !important; -moz-transform: scale(0, 0) !important; -ms-transform: scale(0, 0) !important; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; display: block; margin: 0px; right: 0 !important; left: auto !important; top: auto !important; }
|
||||
.dropdown-animated.scale-left .dropdown-menu.show { transform: scale(1, 1) !important; -webkit-transform: scale(1, 1) !important; -moz-transform: scale(1, 1) !important; -ms-transform: scale(1, 1) !important; }
|
||||
.dropdown-animated.scale-right .dropdown-menu { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transform: scale(0, 0) !important; -webkit-transform: scale(0, 0) !important; -moz-transform: scale(0, 0) !important; -ms-transform: scale(0, 0) !important; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; display: block; margin: 0px; top: auto !important; }
|
||||
.dropdown-animated.scale-right .dropdown-menu.show { transform: scale(1, 1) !important; -webkit-transform: scale(1, 1) !important; -moz-transform: scale(1, 1) !important; -ms-transform: scale(1, 1) !important; }
|
||||
136
admin/assets/scss/partials/_rightbar.scss
Normal file
136
admin/assets/scss/partials/_rightbar.scss
Normal file
@ -0,0 +1,136 @@
|
||||
.rightbar{
|
||||
@include box-shadow(0 5px 10px 0px rgba(0,0,0,.3));
|
||||
@include transition(all .3s ease-in-out);
|
||||
position: fixed;
|
||||
right: -320px;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
background: $col-white;
|
||||
height: 100vh;
|
||||
z-index: 13;
|
||||
padding: 15px 20px;
|
||||
|
||||
@include max-screen($break-large) {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
&.open{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav{
|
||||
@extend .m-b-15;
|
||||
@extend .p-b-15;
|
||||
border-bottom: 1px solid $grey-300;
|
||||
}
|
||||
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
h6{
|
||||
font-size: 15px;
|
||||
@extend .m-b-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.choose-skin{
|
||||
|
||||
@extend .m-b-0;
|
||||
|
||||
li{
|
||||
@extend .inlineblock;
|
||||
|
||||
div{
|
||||
@include transition(all .3s ease-in-out);
|
||||
@include border-radius(3px);
|
||||
@extend .inlineblock;
|
||||
@extend .m-r-10;
|
||||
@extend .m-b-10;
|
||||
height: 40px;
|
||||
width: 55px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
&.purple{
|
||||
border-left: 15px solid $col-white;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $purple;
|
||||
}
|
||||
}
|
||||
&.green{
|
||||
border-left: 15px solid $col-white;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
&.orange{
|
||||
border-left: 15px solid $col-white;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue{
|
||||
border-left: 15px solid $grey-800;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
&.cyan{
|
||||
border-left: 15px solid $grey-800;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $cyan;
|
||||
}
|
||||
}
|
||||
&.blush{
|
||||
border-left: 15px solid $grey-800;
|
||||
background: $grey-300;
|
||||
|
||||
&::before{
|
||||
background: $blush;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
div{
|
||||
&::after{
|
||||
position: absolute;
|
||||
color: $grey-800;
|
||||
font-size: 12px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
content: '\f00c';
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
admin/assets/scss/partials/_social-brands.scss
Normal file
19
admin/assets/scss/partials/_social-brands.scss
Normal file
@ -0,0 +1,19 @@
|
||||
/* social and brand colors */
|
||||
|
||||
/* colored icon */
|
||||
@each $social-name, $bg-color in $social-colors {
|
||||
.#{$social-name}-color {
|
||||
color: $bg-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* colored background */
|
||||
@each $social-name, $bg-color in $social-colors {
|
||||
.#{$social-name}-bg {
|
||||
background-color: $bg-color !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($bg-color, 5%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
admin/assets/scss/partials/_tables.scss
Normal file
81
admin/assets/scss/partials/_tables.scss
Normal file
@ -0,0 +1,81 @@
|
||||
.table {
|
||||
.thead-primary{
|
||||
th{
|
||||
color: $col-white;
|
||||
background-color: $color-primary;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
.thead-success{
|
||||
th{
|
||||
color: $col-white;
|
||||
background-color: $color-success;
|
||||
border-color: $color-success;
|
||||
}
|
||||
}
|
||||
.thead-danger{
|
||||
th{
|
||||
color: $col-white;
|
||||
background-color: $color-danger;
|
||||
border-color: $color-danger;
|
||||
}
|
||||
}
|
||||
.thead-info{
|
||||
th{
|
||||
color: $col-white;
|
||||
background-color: $color-info;
|
||||
border-color: $color-info;
|
||||
}
|
||||
}
|
||||
.thead-purple{
|
||||
th{
|
||||
color: $col-white;
|
||||
background-color: $purple;
|
||||
border-color: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr,
|
||||
th {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen($break-small - 1px) {
|
||||
div.dataTables_paginate{
|
||||
.pagination{
|
||||
justify-content: left !important;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper{
|
||||
.col-sm-12.col-md-6,
|
||||
.col-sm-12.col-md-5,
|
||||
.col-sm-12.col-md-7{
|
||||
padding: 0;
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.paging_simple_numbers{
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.dataTables_wrapper{
|
||||
div.dataTables_filter{
|
||||
text-align: left !important;
|
||||
float: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive{
|
||||
.dt-buttons{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
106
admin/assets/scss/partials/_tabs.scss
Normal file
106
admin/assets/scss/partials/_tabs.scss
Normal file
@ -0,0 +1,106 @@
|
||||
.nav{
|
||||
|
||||
&.nav-tabs{
|
||||
> li{
|
||||
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f4f7f6;
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
font-weight: $font-weight-600;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-tabs-new{
|
||||
> li{
|
||||
|
||||
> a {
|
||||
color: $grey-600;
|
||||
@extend .m-r-5;
|
||||
border: 1px solid $grey-300;
|
||||
border-radius: .25rem;
|
||||
padding:5px 15px;
|
||||
background-color: transparent;
|
||||
|
||||
@include transition(all .3s ease-in-out);
|
||||
&:hover{
|
||||
@include box-shadow(0 5px 10px 0 rgba(0,0,0,0.2));
|
||||
}
|
||||
&.active{
|
||||
border: 1px solid $grey-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-tabs-new2{
|
||||
border-bottom: 1px solid $grey-300;
|
||||
> li{
|
||||
|
||||
> a {
|
||||
color: $grey-600;
|
||||
padding: 7px 20px;
|
||||
@extend .m-r-5;
|
||||
background-color: transparent;
|
||||
border-bottom: transparent;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom: 2px solid $color-primary !important;
|
||||
}
|
||||
&.active{
|
||||
border-bottom: 2px solid $color-primary !important;
|
||||
background-color: transparent;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content{
|
||||
@extend .m-t-10;
|
||||
}
|
||||
|
||||
.nav-pills{
|
||||
|
||||
> li{
|
||||
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #efefef;
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs-colored > li.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f5f5f5;
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
64
admin/assets/scss/partials/_typography.scss
Normal file
64
admin/assets/scss/partials/_typography.scss
Normal file
@ -0,0 +1,64 @@
|
||||
/* Typography */
|
||||
h6{
|
||||
font-weight: $font-weight-600;
|
||||
}
|
||||
h3{
|
||||
font-weight: $font-weight-700;
|
||||
}
|
||||
|
||||
ul.list-justify {
|
||||
> li {
|
||||
margin-bottom: 5px;
|
||||
|
||||
span,
|
||||
strong {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.large-number {
|
||||
> li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $color-accent;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: $color-info;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $color-success;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: $color-warning;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $color-muted;
|
||||
}
|
||||
|
||||
.text-larger {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.text-large {
|
||||
font-size: 1.53em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user