mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-28 05:08:48 +01:00
Bootstrap overrides.
This commit is contained in:
smartapant
parent
f87b6ce425
commit
af30088daf
4 changed files with 386 additions and 0 deletions
185
src/app/theme/sass/bootstrap-overrides/_panel.scss
Normal file
185
src/app/theme/sass/bootstrap-overrides/_panel.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
$panel-title-height: 44px;
|
||||
$panel-heading-font-size: 16px;
|
||||
|
||||
.panel {
|
||||
border: none;
|
||||
background-color: $panel-bg;
|
||||
color: $default-text;
|
||||
position: relative;
|
||||
//transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
|
||||
/*&:hover {
|
||||
background: $panel-bg-hover;
|
||||
}*/
|
||||
&.animated {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
&.small-panel {
|
||||
height: $small-panel-height;
|
||||
}
|
||||
&.xsmall-panel {
|
||||
height: $xsmall-panel-height;
|
||||
}
|
||||
&.medium-panel {
|
||||
height: $medium-panel-height;
|
||||
}
|
||||
&.xmedium-panel {
|
||||
height: $extra-medium-panel-height;
|
||||
}
|
||||
&.large-panel {
|
||||
height: $large-panel-height;
|
||||
}
|
||||
&.viewport100 {
|
||||
height: calc(100vh - 218px);
|
||||
}
|
||||
|
||||
&.with-scroll {
|
||||
.panel-body {
|
||||
height: calc(100% - #{$panel-title-height});
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel > .panel-body {
|
||||
padding: 15px 22px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-heading, .panel-footer {
|
||||
height: $panel-title-height;
|
||||
font-size: $panel-heading-font-size;
|
||||
|
||||
$vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2;
|
||||
padding: $vertical-padding 22px;
|
||||
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-weight: $font-normal;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
//text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-white, .panel-blur {
|
||||
background-size: cover;
|
||||
> .panel-heading {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-white {
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
|
||||
.panel-blur {
|
||||
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
|
||||
background: url($blurredBgUrl);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.panel-primary {
|
||||
> .panel-heading {
|
||||
color: $primary;
|
||||
background-color: $primary-bg;
|
||||
border-color: $primary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-success {
|
||||
> .panel-heading {
|
||||
color: $success;
|
||||
background-color: $success-bg;
|
||||
border-color: $success-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-info {
|
||||
> .panel-heading {
|
||||
color: $info;
|
||||
background-color: $info-bg;
|
||||
border-color: $info-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-warning {
|
||||
> .panel-heading {
|
||||
color: $warning;
|
||||
background-color: $warning-bg;
|
||||
border-color: $warning-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-danger {
|
||||
> .panel-heading {
|
||||
color: $danger;
|
||||
background-color: $danger-bg;
|
||||
border-color: $danger-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
|
||||
.panel-heading {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.panel.bootstrap-panel{
|
||||
.panel-body, .panel-heading {
|
||||
p, div, span {
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-panel.panel.bootstrap-panel{
|
||||
&.panel-primary,
|
||||
&.panel-success,
|
||||
&.panel-info,
|
||||
&.panel-warning,
|
||||
&.panel-danger{
|
||||
.panel-heading {
|
||||
p, div, span {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-group .panel.accordion-panel{
|
||||
.panel-heading{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-group .panel {
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.p-with-code {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.contextual-example-panel {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.footer-panel{
|
||||
height: 142px;
|
||||
}
|
||||
|
||||
.light-text{
|
||||
font-weight: $font-light;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.panel-group .panel {
|
||||
border-radius: 0;
|
||||
}*/
|
||||
198
src/app/theme/sass/bootstrap-overrides/_tabs.scss
Normal file
198
src/app/theme/sass/bootstrap-overrides/_tabs.scss
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
/** Different tabs positions, which were removed from bootstrap */
|
||||
.tabs-below, .tabs-right, .tabs-left {
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-right, .tabs-left {
|
||||
.nav-tabs {
|
||||
min-width: 100px;
|
||||
}
|
||||
.tab-content {
|
||||
width: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-right .tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.tabs-left .tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content > .active,
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabs-below {
|
||||
> .nav-tabs {
|
||||
|
||||
> li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
|
||||
> a {
|
||||
&:hover, &:focus {
|
||||
}
|
||||
}
|
||||
}
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-left, .tabs-right {
|
||||
height: 100%;
|
||||
> .nav-tabs > li {
|
||||
float: none;
|
||||
margin-bottom: 0;
|
||||
> a {
|
||||
min-width: 74px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-left > .nav-tabs {
|
||||
float: left;
|
||||
border-bottom-left-radius: 5px;
|
||||
> li > a {
|
||||
margin-right: -1px;
|
||||
|
||||
&:hover, &:focus {
|
||||
}
|
||||
}
|
||||
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-right > .nav.nav-tabs {
|
||||
float: right;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
> li > a {
|
||||
margin-left: -1px;
|
||||
|
||||
&:hover, &:focus {
|
||||
}
|
||||
}
|
||||
|
||||
& > li:first-of-type a {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** /Different tabs positions, which were removed from bootstrap */
|
||||
|
||||
.nav-tabs > li.with-dropdown {
|
||||
> a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
padding: 10px 15px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 15px 15px 5px 15px;
|
||||
background: transparent;
|
||||
color: $default;
|
||||
.tab-pane p {
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .01);
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
a {
|
||||
color: $default;
|
||||
&:hover {
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
& > li > a {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
color: $default;
|
||||
&:hover {
|
||||
border: none;
|
||||
color: $default;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
& > li.active > a {
|
||||
color: $default;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
> li:first-of-type a {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.dropdown-menu > li > a {
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
|
||||
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
|
||||
.panel-heading {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.panel-open .panel-heading {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(.panel-open) .panel-heading {
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
> .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-panel .panel-heading {
|
||||
padding: 0;
|
||||
.accordion-toggle {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
2
src/app/theme/sass/bootstrap-overrides/overrides.scss
Normal file
2
src/app/theme/sass/bootstrap-overrides/overrides.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "panel";
|
||||
@import "tabs";
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import "sass/conf/conf";
|
||||
@import "sass/bootstrap-overrides/overrides";
|
||||
|
||||
@import "sass/blur-admin-theme";
|
||||
@import "sass/buttons";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue