maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

some little changes with gradients

Browse source 
- removed default gradients
- renamed bg-*-gradient to bg-gradient-* to follow bootstrap's default gradients
- added btn related gradient hover & active changes
- updated related demo files (index.html, pages/widgets.html & pages/UI/buttons.html)
- rebuild dist files
This commit is contained in:
REJack 2019-06-19 14:36:36 +02:00
parent 01e6030f43
commit 8fe10a9963
No known key found for this signature in database
GPG key ID: 9F3976CC630CC888
11 changed files with 915 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
build/scss/_bootstrap-variables.scss
View file

@ -101,7 +101,7 @@ $yiq-text-light: $white !default;
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;

1
build/scss/_buttons.scss
View file

@ -89,3 +89,4 @@
font-weight: 400;
}
}

16
build/scss/_forms.scss
View file

@ -235,20 +235,20 @@ textarea.form-control {
@each $name, $color in $theme-colors {
&.custom-switch-off-#{$name} {
& .custom-control-input ~ .custom-control-label::before {
background-color: #{$color};
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input ~ .custom-control-label::after {
background-color: darken($color, 25%);
background: darken($color, 25%);
}
}
&.custom-switch-on-#{$name} {
& .custom-control-input:checked ~ .custom-control-label::before {
background-color: #{$color};
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-color: lighten($color, 30%);
background: lighten($color, 30%);
}
}
}
@ -257,20 +257,20 @@ textarea.form-control {
@each $name, $color in $colors {
&.custom-switch-off-#{$name} {
& .custom-control-input ~ .custom-control-label::before {
background-color: #{$color};
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input ~ .custom-control-label::after {
background-color: darken($color, 25%);
background: darken($color, 25%);
}
}
&.custom-switch-on-#{$name} {
& .custom-control-input:checked ~ .custom-control-label::before {
background-color: #{$color};
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-color: lighten($color, 30%);
background: lighten($color, 30%);
}
}
}

54
build/scss/_miscellaneous.scss
View file

@ -72,17 +72,63 @@ a.text-muted:hover {
// Gradient Background colors (theme colors)
@each $name, $color in $theme-colors {
.bg-#{$name}-gradient {
@include gradient-bg($color);
.bg-gradient-#{$name} {
@include bg-gradient-variant('&', $color);
color: color-yiq($color);
&.btn {
&.disabled,
&:disabled,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
background-image: none !important;
}
&:hover {
color: color-yiq(darken($color, 7.5%));
@include bg-gradient-variant('&', darken($color, 7.5%));
border-color: darken($color, 10%);
}
&:active,
&.active {
color: color-yiq(darken($color, 10%));
@include bg-gradient-variant('&', darken($color, 10%));
border-color: darken($color, 12.5%);
}
}
}
}
// Gradient Background colors (colors)
@each $name, $color in $colors {
.bg-#{$name}-gradient {
@include gradient-bg($color);
.bg-gradient-#{$name} {
@include bg-gradient-variant('&', $color);
color: color-yiq($color);
&.btn {
&.disabled,
&:disabled,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
background-image: none !important;
}
&:hover {
color: color-yiq(darken($color, 7.5%));
@include bg-gradient-variant('&', darken($color, 7.5%));
border-color: darken($color, 10%);
}
&:active,
&.active {
color: color-yiq(darken($color, 10%));
@include bg-gradient-variant('&', darken($color, 10%));
border-color: darken($color, 12.5%);
}
}
}
}

925
dist/css/adminlte.css vendored
View file

File diff suppressed because it is too large Load diff

2
dist/css/adminlte.css.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View file

File diff suppressed because one or more lines are too long

6
index.html
View file

@ -1001,7 +1001,7 @@
<section class="col-lg-5 connectedSortable">
<!-- Map card -->
<div class="card bg-primary-gradient">
<div class="card bg-gradient-primary">
<div class="card-header no-border">
<h3 class="card-title">
<i class="fas fa-map-marker-alt mr-1"></i>
@ -1053,7 +1053,7 @@
<!-- /.card -->
<!-- solid sales graph -->
<div class="card bg-info-gradient">
<div class="card bg-gradient-info">
<div class="card-header no-border">
<h3 class="card-title">
<i class="fas fa-th mr-1"></i>
@ -1104,7 +1104,7 @@
<!-- /.card -->
<!-- Calendar -->
<div class="card bg-success-gradient">
<div class="card bg-gradient-success">
<div class="card-header no-border">
<h3 class="card-title">

130
pages/UI/buttons.html
View file

@ -828,6 +828,136 @@
<!-- /.col -->
</div>
<!-- ./row -->
<div class="row">
<div class="col-md-12">
<div class="card card-primary card-outline">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-edit"></i>
Gradient Buttons (bg-*)
</h3>
</div>
<div class="card-body pad table-responsive">
<p>Various types of buttons. Using the base class <code>.btn</code></p>
<table class="table table-bordered text-center">
<tr>
<th>Normal</th>
<th>Large <code>.btn-lg</code></th>
<th>Small <code>.btn-sm</code></th>
<th>Flat <code>.btn-flat</code></th>
<th>Disabled <code>.disabled</code></th>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-primary">Primary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-primary btn-lg">Primary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-primary btn-sm">Primary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-primary disabled">Primary</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary">Secondary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-lg">Secondary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary disabled">Secondary</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-success">Success</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-success btn-lg">Success</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-success btn-sm">Success</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-success disabled">Success</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-info">Info</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-info btn-lg">Info</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-info btn-sm">Info</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-info disabled">Info</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-danger">Danger</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-danger btn-lg">Danger</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-danger btn-sm">Danger</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-danger disabled">Danger</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-block bg-gradient-warning">Warning</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-warning btn-lg">Warning</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-warning btn-sm">Warning</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
</td>
<td>
<button type="button" class="btn btn-block bg-gradient-warning disabled">Warning</button>
</td>
</tr>
</table>
</div>
<!-- /.card -->
</div>
</div>
<!-- /.col -->
</div>
<!-- ./row -->
<div class="row">
<div class="col-md-6">
<!-- Block buttons -->

18
pages/widgets.html
View file

@ -696,10 +696,10 @@
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mt-4 mb-2">Info Box With <code>bg-*-gradient</code></h5>
<h5 class="mt-4 mb-2">Info Box With <code>bg-gradient-*</code></h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-info-gradient">
<div class="info-box bg-gradient-info">
<span class="info-box-icon"><i class="far fa-bookmark"></i></span>
<div class="info-box-content">
@ -719,7 +719,7 @@
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-success-gradient">
<div class="info-box bg-gradient-success">
<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
<div class="info-box-content">
@ -739,7 +739,7 @@
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-warning-gradient">
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
<div class="info-box-content">
@ -759,7 +759,7 @@
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-danger-gradient">
<div class="info-box bg-gradient-danger">
<span class="info-box-icon"><i class="fas fa-comments"></i></span>
<div class="info-box-content">
@ -1225,7 +1225,7 @@
<div class="row">
<div class="col-md-3">
<div class="card bg-primary-gradient">
<div class="card bg-gradient-primary">
<div class="card-header">
<h3 class="card-title">Primary Gradient</h3>
@ -1245,7 +1245,7 @@
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-success-gradient">
<div class="card bg-gradient-success">
<div class="card-header">
<h3 class="card-title">Success Gradient</h3>
@ -1265,7 +1265,7 @@
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-warning-gradient">
<div class="card bg-gradient-warning">
<div class="card-header">
<h3 class="card-title">Warning Gradient</h3>
@ -1285,7 +1285,7 @@
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-danger-gradient">
<div class="card bg-gradient-danger">
<div class="card-header">
<h3 class="card-title">Danger Gradient</h3>
</div>