feat: update to 8 - comment out mixins

This commit is contained in:
nixa 2019-05-29 14:59:34 +03:00
parent fcb65af61f
commit 66261961cb
17 changed files with 753 additions and 722 deletions

View file

@ -131,13 +131,13 @@
@include keyframes(pulse) { @include keyframes(pulse) {
0% { 0% {
box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0); //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
} }
20% { 20% {
box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4); //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
} }
100% { 100% {
box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0); //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
} }
} }

View file

@ -1,112 +1,112 @@
@import '../../styles/themes'; //@import '../../styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons'; //@import '~@nebular/bootstrap/styles/hero-buttons';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
.switch-label { // .switch-label {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
cursor: pointer; // cursor: pointer;
margin: 0; // margin: 0;
//
&.vertical { // &.vertical {
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
//
.first, // .first,
.second { // .second {
padding: 0; // padding: 0;
} // }
//
.switch { // .switch {
margin-top: 0.5em; // margin-top: 0.5em;
} // }
} // }
//
& > span { // & > span {
font-size: 1.125rem; // font-size: 1.125rem;
font-weight: nb-theme(font-weight-bold); // font-weight: nb-theme(font-weight-bold);
transition: opacity 0.3s ease; // transition: opacity 0.3s ease;
color: nb-theme(color-fg); // color: nb-theme(color-fg);
//
&.first { // &.first {
@include nb-ltr(padding-right, 10px); // @include nb-ltr(padding-right, 10px);
@include nb-rtl(padding-left, 10px); // @include nb-rtl(padding-left, 10px);
} // }
//
&.second { // &.second {
@include nb-ltr(padding-left, 10px); // @include nb-ltr(padding-left, 10px);
@include nb-rtl(padding-right, 10px); // @include nb-rtl(padding-right, 10px);
} // }
//
&.active { // &.active {
color: nb-theme(color-fg-text); // color: nb-theme(color-fg-text);
} // }
//
@include nb-for-theme(cosmic) { // @include nb-for-theme(cosmic) {
color: nb-theme(color-fg); // color: nb-theme(color-fg);
//
&.active { // &.active {
color: nb-theme(color-white); // color: nb-theme(color-white);
} // }
} // }
//
&:active { // &:active {
opacity: 0.78; // opacity: 0.78;
} // }
} // }
} // }
//
.switch { // .switch {
position: relative; // position: relative;
display: inline-block; // display: inline-block;
width: 3rem; // width: 3rem;
height: 1.5rem; // height: 1.5rem;
margin: 0; // margin: 0;
//
input { // input {
display: none; // display: none;
//
&:checked + .slider::before { // &:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5rem)); // @include nb-ltr(transform, translateX(1.5rem));
@include nb-rtl(transform, translateX(-1.5rem)); // @include nb-rtl(transform, translateX(-1.5rem));
} // }
} // }
//
.slider { // .slider {
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
border-radius: 1.75rem; // border-radius: 1.75rem;
background-color: nb-theme(layout-bg); // background-color: nb-theme(layout-bg);
} // }
//
.slider::before { // .slider::before {
position: absolute; // position: absolute;
content: ''; // content: '';
height: 1.5rem; // height: 1.5rem;
width: 1.5rem; // width: 1.5rem;
border-radius: 50%; // border-radius: 50%;
background-color: nb-theme(color-success); // background-color: nb-theme(color-success);
transition: 0.2s; // transition: 0.2s;
//
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4); // //box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
//
@include nb-for-theme(cosmic) { // @include nb-for-theme(cosmic) {
@include btn-hero-primary-gradient(); // @include btn-hero-primary-gradient();
} // }
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
background-color: nb-theme(color-primary); // background-color: nb-theme(color-primary);
} // }
} // }
} // }
//
@include media-breakpoint-down(xs) { // @include media-breakpoint-down(xs) {
align-items: flex-end; // align-items: flex-end;
} // }
} //}

View file

@ -1,118 +1,118 @@
@import '../../styles/themes'; //@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
@import '~@nebular/bootstrap/styles/hero-buttons'; ////@import '~@nebular/bootstrap/styles/hero-buttons';
//
@include nb-install-component() { //@include nb-install-component() {
.toggle-settings { // .toggle-settings {
position: fixed; // position: fixed;
top: 50%; // top: 50%;
height: 3rem; // height: 3rem;
width: 3rem; // width: 3rem;
padding: 0; // padding: 0;
text-align: center; // text-align: center;
border: none; // border: none;
transition: transform 0.3s ease, background-image 0.3s ease; // transition: transform 0.3s ease, background-image 0.3s ease;
transform: translate(0, -50%); // transform: translate(0, -50%);
z-index: 998; // z-index: 998;
//
@include nb-ltr() { // @include nb-ltr() {
border-top-left-radius: nb-theme(radius); // border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius); // border-bottom-left-radius: nb-theme(radius);
right: 0; // right: 0;
//
&.sidebar-end { // &.sidebar-end {
border-top-left-radius: 0; // border-top-left-radius: 0;
border-bottom-left-radius: 0; // border-bottom-left-radius: 0;
right: auto; // right: auto;
border-top-right-radius: nb-theme(radius); // border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius); // border-bottom-right-radius: nb-theme(radius);
left: 0; // left: 0;
} // }
} // }
//
@include nb-rtl() { // @include nb-rtl() {
border-top-right-radius: nb-theme(radius); // border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius); // border-bottom-right-radius: nb-theme(radius);
left: 0; // left: 0;
//
&.sidebar-end { // &.sidebar-end {
border-top-right-radius: 0; // border-top-right-radius: 0;
border-bottom-right-radius: 0; // border-bottom-right-radius: 0;
left: auto; // left: auto;
border-top-left-radius: nb-theme(radius); // border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius); // border-bottom-left-radius: nb-theme(radius);
right: 0; // right: 0;
} // }
} // }
//
&.expanded { // &.expanded {
@include nb-ltr(transform, translate(-19rem, -50%)); // @include nb-ltr(transform, translate(-19rem, -50%));
@include nb-rtl(transform, translate(19rem, -50%)); // @include nb-rtl(transform, translate(19rem, -50%));
//
&.sidebar-end { // &.sidebar-end {
@include nb-rtl(transform, translate(-19rem, -50%)); // @include nb-rtl(transform, translate(-19rem, -50%));
@include nb-ltr(transform, translate(19rem, -50%)); // @include nb-ltr(transform, translate(19rem, -50%));
} // }
} // }
//
@include nb-for-theme(cosmic) { // @include nb-for-theme(cosmic) {
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72); // box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
@include btn-hero-success-gradient(); // @include btn-hero-success-gradient();
} // }
//
@include nb-for-theme(default) { // @include nb-for-theme(default) {
border: 1px solid #d5dbe0; // border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15); // box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
background-color: #ffffff; // background-color: #ffffff;
} // }
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
border: 1px solid #d5dbe0; // border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15); // box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
color: nb-theme(color-danger); // color: nb-theme(color-danger);
background-color: #ffffff; // background-color: #ffffff;
} // }
//
i { // i {
font-size: 2.75rem; // font-size: 2.75rem;
color: #ffffff; // color: #ffffff;
display: block; // display: block;
//
//
@include nb-for-theme(default) { // @include nb-for-theme(default) {
color: nb-theme(color-danger); // color: nb-theme(color-danger);
} // }
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
color: nb-theme(color-warning); // color: nb-theme(color-warning);
} // }
} // }
//
&:not(.was-expanded) i { // &:not(.was-expanded) i {
animation-name: gear-pulse; // animation-name: gear-pulse;
animation-duration: 1s; // animation-duration: 1s;
animation-iteration-count: infinite; // animation-iteration-count: infinite;
} // }
//
@keyframes gear-pulse { // @keyframes gear-pulse {
from { // from {
transform: scale3d(1, 1, 1); // transform: scale3d(1, 1, 1);
} // }
//
50% { // 50% {
transform: scale3d(1.2, 1.2, 1.2); // transform: scale3d(1.2, 1.2, 1.2);
} // }
//
to { // to {
transform: scale3d(1, 1, 1); // transform: scale3d(1, 1, 1);
} // }
} // }
} // }
//
@include media-breakpoint-down(sm) { // @include media-breakpoint-down(sm) {
.toggle-settings { // .toggle-settings {
display: none; // display: none;
} // }
} // }
} //}

View file

@ -1,3 +1,3 @@
html { html {
font-size: 14px; //font-size: 14px;
} }

View file

@ -4,7 +4,7 @@
// framework component themes (styles tied to theme variables) // framework component themes (styles tied to theme variables)
@import '~@nebular/theme/styles/globals'; @import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/all'; @import '~@nebular/auth/styles/all';
@import '~@nebular/bootstrap/styles/globals'; //@import '~@nebular/bootstrap/styles/globals';
// ... // ...
// global app font size // global app font size
@ -19,7 +19,7 @@
// framework global styles // framework global styles
@include nb-theme-global(); @include nb-theme-global();
@include nb-auth-global(); @include nb-auth-global();
@include nb-bootstrap-global(); //@include nb-bootstrap-global();
// loading progress bar // loading progress bar
@include ngx-pace-theme(); @include ngx-pace-theme();

View file

@ -4,7 +4,7 @@
@import '~@nebular/theme/styles/themes'; @import '~@nebular/theme/styles/themes';
// which themes you what to enable (empty to enable all) // which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default, cosmic, corporate); $nb-enabled-themes: (default, cosmic, corporate, dark);
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme
@ -95,3 +95,34 @@ $nb-themes: nb-register-theme((
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%), progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
), corporate, corporate); ), corporate, corporate);
$nb-themes: nb-register-theme((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,
font-main: Roboto,
font-secondary: Exo,
switcher-background: #4e41a5,
switcher-background-percentage: 14%,
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
list-item-border-width: 1px,
slide-out-container-width: 30%,
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
chart-panel-summary-box-shadow: none,
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
chart-panel-summary-border-color: #332e73,
chart-panel-summary-border-width: 1px,
ecommerce-card-border-width: 1px,
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
), dark, dark);

View file

@ -1,135 +1,135 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-body { // nb-card-body {
padding-bottom: 0; // padding-bottom: 0;
} // }
//
.none { // .none {
position: relative; // position: relative;
transform: rotate(45deg); // transform: rotate(45deg);
//
&::before, &::after { // &::before, &::after {
position: absolute; // position: absolute;
content: ''; // content: '';
background: nb-theme(form-control-border-color); // background: nb-theme(form-control-border-color);
} // }
//
&::before { // &::before {
left: 50%; // left: 50%;
top: 10%; // top: 10%;
transform: translateX(-50%); // transform: translateX(-50%);
width: 1px; // width: 1px;
height: 80%; // height: 80%;
} // }
//
&::after { // &::after {
top: 50%; // top: 50%;
left: 10%; // left: 10%;
transform: translateY(-50%); // transform: translateY(-50%);
height: 1px; // height: 1px;
width: 80%; // width: 80%;
} // }
} // }
//
.shadow { // .shadow {
box-shadow: nb-theme(btn-hero-shadow); // box-shadow: nb-theme(btn-hero-shadow);
} // }
//
.primary-container { // .primary-container {
.color { // .color {
background-color: nb-theme(color-primary); // background-color: nb-theme(color-primary);
} // }
.gradient { // .gradient {
@include btn-hero-primary-gradient(); // @include btn-hero-primary-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-primary-glow(); // box-shadow: btn-hero-primary-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-primary-bevel(); // box-shadow: btn-hero-primary-bevel();
} // }
} // }
//
.warning-container { // .warning-container {
.color { // .color {
background-color: nb-theme(color-warning); // background-color: nb-theme(color-warning);
} // }
.gradient { // .gradient {
@include btn-hero-warning-gradient(); // @include btn-hero-warning-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-warning-glow(); // box-shadow: btn-hero-warning-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-warning-bevel(); // box-shadow: btn-hero-warning-bevel();
} // }
} // }
//
.success-container { // .success-container {
.color { // .color {
background-color: nb-theme(color-success); // background-color: nb-theme(color-success);
} // }
.gradient { // .gradient {
@include btn-hero-success-gradient(); // @include btn-hero-success-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-success-glow(); // box-shadow: btn-hero-success-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-success-bevel(); // box-shadow: btn-hero-success-bevel();
} // }
} // }
//
.info-container { // .info-container {
.color { // .color {
background-color: nb-theme(color-info); // background-color: nb-theme(color-info);
} // }
.gradient { // .gradient {
@include btn-hero-info-gradient(); // @include btn-hero-info-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-info-glow(); // box-shadow: btn-hero-info-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-info-bevel(); // box-shadow: btn-hero-info-bevel();
} // }
} // }
//
.danger-container { // .danger-container {
.color { // .color {
background-color: nb-theme(color-danger); // background-color: nb-theme(color-danger);
} // }
.gradient { // .gradient {
@include btn-hero-danger-gradient(); // @include btn-hero-danger-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-danger-glow(); // box-shadow: btn-hero-danger-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-danger-bevel(); // box-shadow: btn-hero-danger-bevel();
} // }
} // }
//
.secondary-container { // .secondary-container {
.color { // .color {
background-color: nb-theme(btn-secondary-bg); // background-color: nb-theme(btn-secondary-bg);
} // }
.border { // .border {
color: nb-theme(btn-secondary-color); // color: nb-theme(btn-secondary-color);
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border); // border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
} // }
.glow { // .glow {
box-shadow: btn-hero-secondary-glow(); // box-shadow: btn-hero-secondary-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-secondary-bevel(); // box-shadow: btn-hero-secondary-bevel();
} // }
} // }
//
.example-container { // .example-container {
margin-bottom: 1.5rem; // margin-bottom: 1.5rem;
} // }
} //}

View file

@ -1,5 +1,5 @@
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons'; //@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() { @include nb-install-component() {
nb-tabset { nb-tabset {

View file

@ -3,7 +3,7 @@
@import '~@nebular/theme/styles/global/typography/typography'; @import '~@nebular/theme/styles/global/typography/typography';
@import '~bootstrap/scss/mixins/breakpoints'; @import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@import '~@nebular/bootstrap/styles/hero-buttons'; //@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() { @include nb-install-component() {
@ -133,7 +133,7 @@
padding-left: 1rem; padding-left: 1rem;
font-size: 0.75rem; font-size: 0.75rem;
color: text-danger(); //color: text-danger();
&::before { &::before {
position: absolute; position: absolute;
@ -143,15 +143,15 @@
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 8px solid text-danger(); //border-bottom: 8px solid text-danger();
} }
&.down { &.down {
color: text-success(); //color: text-success();
&::before { &::before {
top: 3px; top: 3px;
border-top: 8px solid text-success(); //border-top: 8px solid text-success();
border-bottom: none; border-bottom: none;
} }
} }
@ -240,10 +240,10 @@
&:hover { &:hover {
&::before { &::before {
$color-top: nb-theme(btn-success-bg); $color-top: nb-theme(btn-success-bg);
$color-bottom: btn-hero-success-left-color(); //$color-bottom: btn-hero-success-left-color();
background-image: linear-gradient(to top, $color-top, $color-bottom); //background-image: linear-gradient(to top, $color-top, $color-bottom);
box-shadow: 0 0 16px -2px btn-hero-success-middle-color(); //box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
} }
} }
} }
@ -269,10 +269,10 @@
.delta { .delta {
&.down { &.down {
color: text-primary(); //color: text-primary();
&::before { &::before {
border-top: 8px solid text-primary(); //border-top: 8px solid text-primary();
} }
} }
} }

View file

@ -204,8 +204,8 @@
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
background-color: nb-theme(color-white); background-color: nb-theme(color-white);
box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4); //box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4);
border: solid 1px rgba(nb-theme(color-fg), 0.4); //border: solid 1px rgba(nb-theme(color-fg), 0.4);
margin-top: calc(-0.875rem + 1px); margin-top: calc(-0.875rem + 1px);
position: relative; position: relative;
z-index: 10; z-index: 10;

View file

@ -1,184 +1,184 @@
@import '../../../@theme/styles/themes'; //@import '../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons'; ////@import '~@nebular/bootstrap/styles/hero-buttons';
//
@include nb-install-component() { //@include nb-install-component() {
nb-card { // nb-card {
flex-direction: row; // flex-direction: row;
align-items: center; // align-items: center;
height: 6rem; // height: 6rem;
overflow: visible; // overflow: visible;
//
$bevel: btn-hero-bevel(nb-theme(card-bg)); // $bevel: btn-hero-bevel(nb-theme(card-bg));
$shadow: nb-theme(btn-hero-shadow); // $shadow: nb-theme(btn-hero-shadow);
box-shadow: $bevel, $shadow; // box-shadow: $bevel, $shadow;
//
.icon-container { // .icon-container {
height: 100%; // height: 100%;
padding: 0.625rem; // padding: 0.625rem;
} // }
//
.icon { // .icon {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
width: 5.75rem; // width: 5.75rem;
height: 4.75rem; // height: 4.75rem;
font-size: 3.75rem; // font-size: 3.75rem;
border-radius: nb-theme(card-border-radius); // border-radius: nb-theme(card-border-radius);
transition: width 0.4s ease; // transition: width 0.4s ease;
transform: translate3d(0, 0, 0); // transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d; // -webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
color: nb-theme(color-white); // color: nb-theme(color-white);
//
&.primary { // &.primary {
@include btn-hero-primary-gradient(); // @include btn-hero-primary-gradient();
@include btn-hero-primary-bevel-glow-shadow(); // @include btn-hero-primary-bevel-glow-shadow();
} // }
&.success { // &.success {
@include btn-hero-success-gradient(); // @include btn-hero-success-gradient();
@include btn-hero-success-bevel-glow-shadow(); // @include btn-hero-success-bevel-glow-shadow();
} // }
&.info { // &.info {
@include btn-hero-info-gradient(); // @include btn-hero-info-gradient();
@include btn-hero-info-bevel-glow-shadow(); // @include btn-hero-info-bevel-glow-shadow();
} // }
&.warning { // &.warning {
@include btn-hero-warning-gradient(); // @include btn-hero-warning-gradient();
@include btn-hero-warning-bevel-glow-shadow(); // @include btn-hero-warning-bevel-glow-shadow();
} // }
&.danger { // &.danger {
@include btn-hero-danger-gradient(); // @include btn-hero-danger-gradient();
@include btn-hero-danger-bevel-glow-shadow(); // @include btn-hero-danger-bevel-glow-shadow();
} // }
&.secondary { // &.secondary {
@include btn-hero-secondary-bg(); // @include btn-hero-secondary-bg();
@include btn-hero-secondary-bevel-glow-shadow(); // @include btn-hero-secondary-bevel-glow-shadow();
color: nb-theme(card-fg); // color: nb-theme(card-fg);
} // }
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
&.primary, // &.primary,
&.success, // &.success,
&.info, // &.info,
&.warning, // &.warning,
&.danger, // &.danger,
&.secondary { // &.secondary {
box-shadow: none; // box-shadow: none;
} // }
} // }
} // }
//
&:hover { // &:hover {
background: lighten(nb-theme(card-bg), 5%); // //background: lighten(nb-theme(card-bg), 5%);
//
.icon { // .icon {
&.primary { // &.primary {
background-image: btn-hero-primary-light-gradient(); // background-image: btn-hero-primary-light-gradient();
} // }
&.success { // &.success {
background-image: btn-hero-success-light-gradient(); // background-image: btn-hero-success-light-gradient();
} // }
&.info { // &.info {
background-image: btn-hero-info-light-gradient(); // background-image: btn-hero-info-light-gradient();
} // }
&.warning { // &.warning {
background-image: btn-hero-warning-light-gradient(); // background-image: btn-hero-warning-light-gradient();
} // }
&.danger { // &.danger {
background-image: btn-hero-danger-light-gradient(); // background-image: btn-hero-danger-light-gradient();
} // }
&.secondary { // &.secondary {
background-image: btn-hero-secondary-light-gradient(); // background-image: btn-hero-secondary-light-gradient();
} // }
} // }
} // }
//
&.off { // &.off {
color: nb-theme(card-fg); // color: nb-theme(card-fg);
//
.icon { // .icon {
color: nb-theme(card-fg); // color: nb-theme(card-fg);
//
&.primary, &.success, &.info, &.warning, &.danger { // &.primary, &.success, &.info, &.warning, &.danger {
box-shadow: none; // box-shadow: none;
background-image: linear-gradient(to right, transparent, transparent); // background-image: linear-gradient(to right, transparent, transparent);
} // }
//
&.secondary { // &.secondary {
background: transparent; // background: transparent;
} // }
} // }
//
.title { // .title {
color: nb-theme(card-fg); // color: nb-theme(card-fg);
} // }
} // }
//
.details { // .details {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
height: 100%; // height: 100%;
@include nb-ltr(padding, 0 0.5rem 0 0.75rem); // @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
@include nb-rtl(padding, 0 0.75rem 0 0.5rem); // @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
border-left: 1px solid transparent; // border-left: 1px solid transparent;
} // }
//
.title { // .title {
font-family: nb-theme(font-secondary); // font-family: nb-theme(font-secondary);
font-size: 1.25rem; // font-size: 1.25rem;
font-weight: nb-theme(font-weight-bold); // font-weight: nb-theme(font-weight-bold);
color: nb-theme(card-fg-heading); // color: nb-theme(card-fg-heading);
} // }
//
.status { // .status {
font-size: 1rem; // font-size: 1rem;
font-weight: nb-theme(font-weight-light); // font-weight: nb-theme(font-weight-light);
text-transform: uppercase; // text-transform: uppercase;
color: nb-theme(card-fg); // color: nb-theme(card-fg);
} // }
} // }
//
@include nb-for-theme(cosmic) { // @include nb-for-theme(cosmic) {
nb-card { // nb-card {
&.off .icon-container { // &.off .icon-container {
@include nb-ltr(border-right, 1px solid nb-theme(separator)); // @include nb-ltr(border-right, 1px solid nb-theme(separator));
@include nb-rtl(border-left, 1px solid nb-theme(separator)); // @include nb-rtl(border-left, 1px solid nb-theme(separator));
} // }
//
.icon-container { // .icon-container {
padding: 0; // padding: 0;
} // }
//
.details { // .details {
@include nb-ltr(padding-left, 1.25rem); // @include nb-ltr(padding-left, 1.25rem);
@include nb-rtl(padding-right, 1.25rem); // @include nb-rtl(padding-right, 1.25rem);
} // }
//
.icon { // .icon {
width: 7rem; // width: 7rem;
height: 100%; // height: 100%;
font-size: 4.5rem; // font-size: 4.5rem;
@include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius)); // @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
@include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0); // @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
} // }
//
.title { // .title {
font-weight: nb-theme(font-weight-bolder); // font-weight: nb-theme(font-weight-bolder);
} // }
//
.status { // .status {
font-weight: nb-theme(font-weight-light); // font-weight: nb-theme(font-weight-light);
} // }
} // }
} // }
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
nb-card { // nb-card {
.icon-container { // .icon-container {
height: auto; // height: auto;
} // }
} // }
} // }
} //}

View file

@ -20,7 +20,7 @@
bottom: -2rem; bottom: -2rem;
right: 1rem; right: 1rem;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2); //box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);
} }
} }

View file

@ -1,5 +1,5 @@
@import '../../../../@theme/styles/themes'; @import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons'; //@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() { @include nb-install-component() {
position: relative; position: relative;
@ -40,7 +40,7 @@
border: 2px solid nb-theme(separator); border: 2px solid nb-theme(separator);
@include nb-for-theme(cosmic) { @include nb-for-theme(cosmic) {
background-color: lighten(nb-theme(layout-bg), 2%); //background-color: lighten(nb-theme(layout-bg), 2%);
border: none; border: none;
} }
} }
@ -65,11 +65,11 @@
border: 2px solid nb-theme(separator); border: 2px solid nb-theme(separator);
&:hover { &:hover {
background-color: lighten(nb-theme(card-bg), 5%); //background-color: lighten(nb-theme(card-bg), 5%);
} }
&:active { &:active {
background-color: darken(nb-theme(card-bg), 5%); //background-color: darken(nb-theme(card-bg), 5%);
box-shadow: none; box-shadow: none;
} }

View file

@ -119,8 +119,8 @@
.btn-icon.active { .btn-icon.active {
color: nb-theme(color-fg-heading); color: nb-theme(color-fg-heading);
border-color: nb-theme(color-fg-highlight); border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25); //box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25); //background-color: rgba(nb-theme(color-fg-highlight), 0.25);
} }
} }

View file

@ -1,5 +1,5 @@
@import '../../../../../@theme/styles/themes'; @import '../../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons'; //@import '~@nebular/bootstrap/styles/hero-buttons';
@import '~@nebular/theme/styles/global/typography/typography'; @import '~@nebular/theme/styles/global/typography/typography';
$traffic-bar-background-color: #d0d8e3; $traffic-bar-background-color: #d0d8e3;

View file

@ -20,6 +20,6 @@
} }
[class$='placeholder'] { [class$='placeholder'] {
background: rgba(nb-theme(layout-bg), 0.6); //background: rgba(nb-theme(layout-bg), 0.6);
} }
} }

View file

@ -1,144 +1,144 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-body { // nb-card-body {
padding-bottom: 0; // padding-bottom: 0;
} // }
//
.none { // .none {
position: relative; // position: relative;
transform: rotate(45deg); // transform: rotate(45deg);
//
&::before, &::after { // &::before, &::after {
position: absolute; // position: absolute;
content: ''; // content: '';
background: nb-theme(form-control-border-color); // background: nb-theme(form-control-border-color);
} // }
//
&::before { // &::before {
left: 50%; // left: 50%;
top: 10%; // top: 10%;
transform: translateX(-50%); // transform: translateX(-50%);
width: 1px; // width: 1px;
height: 80%; // height: 80%;
} // }
//
&::after { // &::after {
top: 50%; // top: 50%;
left: 10%; // left: 10%;
transform: translateY(-50%); // transform: translateY(-50%);
height: 1px; // height: 1px;
width: 80%; // width: 80%;
} // }
} // }
//
.shadow { // .shadow {
box-shadow: nb-theme(btn-hero-shadow); // box-shadow: nb-theme(btn-hero-shadow);
} // }
//
.primary-container { // .primary-container {
.color { // .color {
background-color: nb-theme(color-primary); // background-color: nb-theme(color-primary);
} // }
.gradient { // .gradient {
@include btn-hero-primary-gradient(); // @include btn-hero-primary-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-primary-glow(); // box-shadow: btn-hero-primary-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-primary-bevel(); // box-shadow: btn-hero-primary-bevel();
} // }
} // }
//
.warning-container { // .warning-container {
.color { // .color {
background-color: nb-theme(color-warning); // background-color: nb-theme(color-warning);
} // }
.gradient { // .gradient {
@include btn-hero-warning-gradient(); // @include btn-hero-warning-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-warning-glow(); // box-shadow: btn-hero-warning-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-warning-bevel(); // box-shadow: btn-hero-warning-bevel();
} // }
} // }
//
.success-container { // .success-container {
.color { // .color {
background-color: nb-theme(color-success); // background-color: nb-theme(color-success);
} // }
.gradient { // .gradient {
@include btn-hero-success-gradient(); // @include btn-hero-success-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-success-glow(); // box-shadow: btn-hero-success-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-success-bevel(); // box-shadow: btn-hero-success-bevel();
} // }
} // }
//
.info-container { // .info-container {
.color { // .color {
background-color: nb-theme(color-info); // background-color: nb-theme(color-info);
} // }
.gradient { // .gradient {
@include btn-hero-info-gradient(); // @include btn-hero-info-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-info-glow(); // box-shadow: btn-hero-info-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-info-bevel(); // box-shadow: btn-hero-info-bevel();
} // }
} // }
//
.danger-container { // .danger-container {
.color { // .color {
background-color: nb-theme(color-danger); // background-color: nb-theme(color-danger);
} // }
.gradient { // .gradient {
@include btn-hero-danger-gradient(); // @include btn-hero-danger-gradient();
} // }
.glow { // .glow {
box-shadow: btn-hero-danger-glow(); // box-shadow: btn-hero-danger-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-danger-bevel(); // box-shadow: btn-hero-danger-bevel();
} // }
} // }
//
.secondary-container { // .secondary-container {
.color { // .color {
background-color: nb-theme(btn-secondary-bg); // background-color: nb-theme(btn-secondary-bg);
} // }
.border { // .border {
color: nb-theme(btn-secondary-color); // color: nb-theme(btn-secondary-color);
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border); // border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
} // }
.glow { // .glow {
box-shadow: btn-hero-secondary-glow(); // box-shadow: btn-hero-secondary-glow();
} // }
.bevel { // .bevel {
box-shadow: btn-hero-secondary-bevel(); // box-shadow: btn-hero-secondary-bevel();
} // }
} // }
//
.example-container { // .example-container {
margin-bottom: 1.5rem; // margin-bottom: 1.5rem;
} // }
//
@include media-breakpoint-up(xxl) { // @include media-breakpoint-up(xxl) {
.example-container { // .example-container {
flex: 0 0 20%; // flex: 0 0 20%;
max-width: 20%; // max-width: 20%;
} // }
} // }
} //}