mirror of https://github.com/ColorlibHQ/AdminLTE
added ribbon style & some little changes
- added !important to elevation-* & text-sm, text-xs, text-lg & text-xl - added variables for ribbon - added ribbon style code in scss/_miscellaneouspull/2149/head
REJack
parent
04b90fdd55
commit
4a05cb5e99
|
|
@ -73,7 +73,7 @@
|
|||
// Miscellaneous
|
||||
// ---------------------------------------------------
|
||||
@import 'miscellaneous';
|
||||
@import 'colors';
|
||||
@import 'print';
|
||||
@import 'text';
|
||||
@import 'elevation';
|
||||
@import 'colors';
|
||||
|
|
|
|||
|
|
@ -4,25 +4,25 @@
|
|||
*/
|
||||
|
||||
.elevation-0 {
|
||||
box-shadow: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.elevation-1 {
|
||||
box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
|
||||
box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24) !important;
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23);
|
||||
box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23);
|
||||
box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22);
|
||||
box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22) !important;
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22);
|
||||
box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -288,3 +288,68 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Ribbon
|
||||
.ribbon-wrapper {
|
||||
height: $ribbon-wrapper-size;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: -2px;
|
||||
z-index: 10;
|
||||
width: $ribbon-wrapper-size;
|
||||
|
||||
&.ribbon-lg {
|
||||
height: $ribbon-lg-wrapper-size;
|
||||
width: $ribbon-lg-wrapper-size;
|
||||
|
||||
.ribbon {
|
||||
top: $ribbon-lg-top;
|
||||
right: $ribbon-lg-right;
|
||||
width: $ribbon-lg-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-xl {
|
||||
height: $ribbon-xl-wrapper-size;
|
||||
width: $ribbon-xl-wrapper-size;
|
||||
|
||||
.ribbon {
|
||||
top: $ribbon-xl-top;
|
||||
right: $ribbon-xl-right;
|
||||
width: $ribbon-xl-width;
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
|
||||
font-size: $ribbon-font-size;
|
||||
line-height: $ribbon-line-height;
|
||||
padding: $ribbon-padding;
|
||||
position: relative;
|
||||
right: $ribbon-right;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba($black, .4);
|
||||
text-transform: uppercase;
|
||||
top: $ribbon-top;
|
||||
transform: rotate(45deg);
|
||||
width: $ribbon-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-left: $ribbon-border-size solid transparent;
|
||||
border-right: $ribbon-border-size solid transparent;
|
||||
border-top: $ribbon-border-size solid #9e9e9e;
|
||||
bottom: -$ribbon-border-size;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: $font-size-sm;
|
||||
font-size: $font-size-sm !important;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: $font-size-base;
|
||||
font-size: $font-size-base !important;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: $font-size-lg;
|
||||
font-size: $font-size-lg !important;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: $font-size-xl;
|
||||
font-size: $font-size-xl !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -161,3 +161,21 @@ $button-default-background-color: #f4f4f4 !default;
|
|||
$button-default-color: #444 !default;
|
||||
$button-default-border-color: #ddd !default;
|
||||
|
||||
// RIBBON
|
||||
// --------------------------------------------------------
|
||||
$ribbon-border-size: 3px !default;
|
||||
$ribbon-line-height: 100% !default;
|
||||
$ribbon-padding: .375rem 0 !default;
|
||||
$ribbon-font-size: .8rem !default;
|
||||
$ribbon-width: 110px !default;
|
||||
$ribbon-wrapper-size: 90px !default;
|
||||
$ribbon-top: 9px !default;
|
||||
$ribbon-right: -12px !default;
|
||||
$ribbon-lg-wrapper-size: 180px !default;
|
||||
$ribbon-lg-width: 160px !default;
|
||||
$ribbon-lg-top: 26px !default;
|
||||
$ribbon-lg-right: -59px !default;
|
||||
$ribbon-xl-wrapper-size: 240px !default;
|
||||
$ribbon-xl-width: 240px !default;
|
||||
$ribbon-xl-top: 59px !default;
|
||||
$ribbon-xl-right: -48px !default;
|
||||
|
|
|
|||
|
|
@ -16503,6 +16503,214 @@ html.maximized-card {
|
|||
color: #ced4da;
|
||||
}
|
||||
|
||||
.ribbon-wrapper {
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: -2px;
|
||||
z-index: 10;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper.ribbon-lg {
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper.ribbon-lg .ribbon {
|
||||
top: 26px;
|
||||
right: -59px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper.ribbon-xl {
|
||||
height: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper.ribbon-xl .ribbon {
|
||||
top: 59px;
|
||||
right: -48px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper .ribbon {
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
font-size: 0.8rem;
|
||||
line-height: 100%;
|
||||
padding: 0.375rem 0;
|
||||
position: relative;
|
||||
right: -12px;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
|
||||
text-transform: uppercase;
|
||||
top: 9px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.ribbon-wrapper .ribbon::before, .ribbon-wrapper .ribbon::after {
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-top: 3px solid #9e9e9e;
|
||||
bottom: -3px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ribbon-wrapper .ribbon::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ribbon-wrapper .ribbon::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Misc: Print
|
||||
* -----------
|
||||
*/
|
||||
@media print {
|
||||
.no-print, .main-sidebar,
|
||||
.main-header,
|
||||
.content-header {
|
||||
display: none !important;
|
||||
}
|
||||
.content-wrapper,
|
||||
.main-footer {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
margin-left: 0 !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.layout-fixed .content-wrapper {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.invoice {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.invoice-col {
|
||||
float: left;
|
||||
width: 33.3333333%;
|
||||
}
|
||||
.table-responsive {
|
||||
overflow: auto;
|
||||
}
|
||||
.table-responsive > .table tr th,
|
||||
.table-responsive > .table tr td {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Component: Text
|
||||
* -------------
|
||||
*/
|
||||
.text-bold, .text-bold.table td, .text-bold.table th {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.text-blue {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.text-indigo {
|
||||
color: #6610f2;
|
||||
}
|
||||
|
||||
.text-purple {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.text-pink {
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.text-yellow {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.text-teal {
|
||||
color: #20c997;
|
||||
}
|
||||
|
||||
.text-cyan {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.text-gray-dark {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/*
|
||||
* Component: Elevation
|
||||
* --------------------
|
||||
*/
|
||||
.elevation-0 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.elevation-1, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-dark .nav-sidebar > .nav-item > .nav-link.active, .callout {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Misc: Colors
|
||||
* ------------
|
||||
|
|
@ -17872,147 +18080,4 @@ a.text-muted:hover {
|
|||
.link-black:hover, .link-black:focus {
|
||||
color: #e6e8ea;
|
||||
}
|
||||
|
||||
/*
|
||||
* Misc: Print
|
||||
* -----------
|
||||
*/
|
||||
@media print {
|
||||
.no-print, .main-sidebar,
|
||||
.main-header,
|
||||
.content-header {
|
||||
display: none !important;
|
||||
}
|
||||
.content-wrapper,
|
||||
.main-footer {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
margin-left: 0 !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.layout-fixed .content-wrapper {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.invoice {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.invoice-col {
|
||||
float: left;
|
||||
width: 33.3333333%;
|
||||
}
|
||||
.table-responsive {
|
||||
overflow: auto;
|
||||
}
|
||||
.table-responsive > .table tr th,
|
||||
.table-responsive > .table tr td {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Component: Text
|
||||
* -------------
|
||||
*/
|
||||
.text-bold, .text-bold.table td, .text-bold.table th {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text-blue {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.text-indigo {
|
||||
color: #6610f2;
|
||||
}
|
||||
|
||||
.text-purple {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.text-pink {
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.text-yellow {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.text-teal {
|
||||
color: #20c997;
|
||||
}
|
||||
|
||||
.text-cyan {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.text-gray-dark {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/*
|
||||
* Component: Elevation
|
||||
* --------------------
|
||||
*/
|
||||
.elevation-0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.elevation-1, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-dark .nav-sidebar > .nav-item > .nav-link.active, .callout {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
/*# sourceMappingURL=adminlte.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue