2020.12.23

spacelab新增 icon-gradient 漸層效果
pull/3/head
Ron.wang 3 years ago
parent b50138e38e
commit 7246587b6b

@ -1,4 +1,292 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.bg-blue {
background-color: #446e9b !important;
}
.bg-indigo {
background-color: #6610f2 !important;
}
.bg-purple {
background-color: #6f42c1 !important;
}
.bg-pink {
background-color: #e83e8c !important;
}
.bg-red {
background-color: #cd0200 !important;
}
.bg-orange {
background-color: #fd7e14 !important;
}
.bg-yellow {
background-color: #d47500 !important;
}
.bg-green {
background-color: #3cb521 !important;
}
.bg-teal {
background-color: #20c997 !important;
}
.bg-cyan {
background-color: #3399f3 !important;
}
.bg-white {
background-color: #fff !important;
}
.bg-gray {
background-color: #777 !important;
}
.bg-gray-dark {
background-color: #333 !important;
}
.bg-gradient-primary {
background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
}
.bg-gradient-secondary {
background: linear-gradient(87deg, #999 0, #999999 100%) !important;
}
.bg-gradient-success {
background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
}
.bg-gradient-info {
background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
}
.bg-gradient-warning {
background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
}
.bg-gradient-danger {
background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
}
.bg-gradient-light {
background: linear-gradient(87deg, #eee 0, #eeeeee 100%) !important;
}
.bg-gradient-dark {
background: linear-gradient(87deg, #333 0, #333333 100%) !important;
}
.bg-gradient-blue {
background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
}
.bg-gradient-indigo {
background: linear-gradient(87deg, #6610f2 0, #c410f2 100%) !important;
}
.bg-gradient-purple {
background: linear-gradient(87deg, #6f42c1 0, #a442c1 100%) !important;
}
.bg-gradient-pink {
background: linear-gradient(87deg, #e83e8c 0, #e83e45 100%) !important;
}
.bg-gradient-red {
background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
}
.bg-gradient-orange {
background: linear-gradient(87deg, #fd7e14 0, #fddf14 100%) !important;
}
.bg-gradient-yellow {
background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
}
.bg-gradient-green {
background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
}
.bg-gradient-teal {
background: linear-gradient(87deg, #20c997 0, #20b5c9 100%) !important;
}
.bg-gradient-cyan {
background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
}
.bg-gradient-white {
background: linear-gradient(87deg, #fff 0, white 100%) !important;
}
.bg-gradient-gray {
background: linear-gradient(87deg, #777 0, #777777 100%) !important;
}
.bg-gradient-gray-dark {
background: linear-gradient(87deg, #333 0, #333333 100%) !important;
}
.bg-translucent-primary {
background-color: rgba(57, 92, 130, 0.6) !important;
}
.bg-translucent-secondary {
background-color: rgba(135, 135, 135, 0.6) !important;
}
.bg-translucent-success {
background-color: rgba(50, 151, 27, 0.6) !important;
}
.bg-translucent-info {
background-color: rgba(17, 136, 241, 0.6) !important;
}
.bg-translucent-warning {
background-color: rgba(176, 97, 0, 0.6) !important;
}
.bg-translucent-danger {
background-color: rgba(169, 2, 0, 0.6) !important;
}
.bg-translucent-light {
background-color: rgba(220, 220, 220, 0.6) !important;
}
.bg-translucent-dark {
background-color: rgba(33, 33, 33, 0.6) !important;
}
.section-primary {
background-color: #446e9b !important;
}
.section-secondary {
background-color: #999 !important;
}
.section-light {
background-color: #ced4da !important;
}
.section-dark {
background-color: #333 !important;
}
.section-darker {
background-color: #333 !important;
}
.bg-gradient-primary {
background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
}
.bg-gradient-secondary {
background: linear-gradient(87deg, #999 0, #999999 100%) !important;
}
.bg-gradient-success {
background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
}
.bg-gradient-info {
background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
}
.bg-gradient-warning {
background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
}
.bg-gradient-danger {
background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
}
.bg-gradient-light {
background: linear-gradient(87deg, #eee 0, #eeeeee 100%) !important;
}
.bg-gradient-dark {
background: linear-gradient(87deg, #333 0, #333333 100%) !important;
}
.fill-primary {
fill: #446e9b;
}
.stroke-primary {
stroke: #446e9b;
}
.fill-secondary {
fill: #999;
}
.stroke-secondary {
stroke: #999;
}
.fill-success {
fill: #3cb521;
}
.stroke-success {
stroke: #3cb521;
}
.fill-info {
fill: #3399f3;
}
.stroke-info {
stroke: #3399f3;
}
.fill-warning {
fill: #d47500;
}
.stroke-warning {
stroke: #d47500;
}
.fill-danger {
fill: #cd0200;
}
.stroke-danger {
stroke: #cd0200;
}
.fill-light {
fill: #eee;
}
.stroke-light {
stroke: #eee;
}
.fill-dark {
fill: #333;
}
.stroke-dark {
stroke: #333;
}
.fill-opacity-8 {
fill-opacity: .8;
}
.icon-actions > a {
display: inline-block;
margin-right: .75rem;

@ -199,7 +199,7 @@
</div>
<div class="card">
<div class="card-body">
<div class="icon icon-shape icon-shape-info rounded-circle shadow mb-4">
<div class="icon icon-shape bg-gradient-primary rounded-circle shadow mb-4">
<i class="bi bi-arrow-bar-up"></i>
</div>
<h5 class="h3">Plugins</h5>

@ -0,0 +1,87 @@
$translucent-color-opacity: .6 ;
// Sections
$section-colors: () !default;
$section-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"light": $gray-400,
"dark": $dark,
"darker": $dark
), $section-colors);
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
}
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
}
}
@mixin bg-translucent-variant($parent, $color) {
#{$parent} {
background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
}
}
//
// Backgrounds
//
@each $color, $value in $colors {
@include bg-variant(".bg-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
@each $color, $value in $colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Background colors with transparency
@each $color, $value in $theme-colors {
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
}
// Sections backgrounds
@each $color, $value in $section-colors {
@include bg-variant(".section-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Shape (svg) fill colors
@each $color, $value in $theme-colors {
.fill-#{$color} {
fill: $value;
}
.stroke-#{$color} {
stroke: $value;
}
}
.fill-opacity-8 {
fill-opacity: .8;
}

@ -3,8 +3,9 @@
// spacelab varialbes
@import "../scss/spacelab/variables";
@import "argon/custom/icon-variables";
@import "../../node_modules/bootstrap/scss/variables";
@import "argon/custom/icon-variables";
@import "../scss/argon/custom/icon-gradient";
// spacelab mixins
// Bootstrap mixins

Loading…
Cancel
Save