Merge pull request 'master' (#3) from RonWang/custom-bootstrap4:master into master

Reviewed-on: #3
master
BobsonLin 3 years ago
commit b3dbef891e

@ -239,7 +239,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
body {
margin: 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 0.875rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #adafae;
@ -548,31 +548,31 @@ h1, h2, h3, h4, h5, h6,
}
h1, .h1 {
font-size: 4rem;
font-size: 2.5rem;
}
h2, .h2 {
font-size: 3rem;
font-size: 2rem;
}
h3, .h3 {
font-size: 2.5rem;
font-size: 1.75rem;
}
h4, .h4 {
font-size: 2rem;
font-size: 1.5rem;
}
h5, .h5 {
font-size: 1.5rem;
font-size: 1.25rem;
}
h6, .h6 {
font-size: 0.875rem;
font-size: 1rem;
}
.lead {
font-size: 1.09375rem;
font-size: 1.25rem;
font-weight: 300;
}
@ -644,7 +644,7 @@ mark,
.blockquote {
margin-bottom: 1rem;
font-size: 1.09375rem;
font-size: 1.25rem;
}
.blockquote-footer {
@ -1993,7 +1993,7 @@ mark,
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 1rem;
font-size: 0.875rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@ -2639,14 +2639,14 @@ fieldset:disabled a.btn {
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1.09375rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
@ -6954,7 +6954,7 @@ a.text-dark:hover, a.text-dark:focus {
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.09375rem;
font-size: 1.25rem;
line-height: 1.5;
}
@ -6970,7 +6970,7 @@ a.text-dark:hover, a.text-dark:focus {
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
}
@ -6989,7 +6989,7 @@ a.text-dark:hover, a.text-dark:focus {
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 1rem;
font-size: 0.875rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #282828;
@ -7085,14 +7085,14 @@ select.form-control:focus::-ms-value {
.col-form-label-lg {
padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px);
font-size: 1.09375rem;
font-size: 1.25rem;
line-height: 1.5;
}
.col-form-label-sm {
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
}
@ -7101,7 +7101,7 @@ select.form-control:focus::-ms-value {
width: 100%;
padding: 0.375rem 0;
margin-bottom: 0;
font-size: 0.875rem;
font-size: 1rem;
line-height: 1.5;
color: #adafae;
background-color: transparent;
@ -7117,7 +7117,7 @@ select.form-control:focus::-ms-value {
.form-control-sm {
height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
@ -7125,7 +7125,7 @@ select.form-control:focus::-ms-value {
.form-control-lg {
height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.09375rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
@ -7219,7 +7219,7 @@ textarea.form-control {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: .1rem;
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
color: #fff;
background-color: #77b300;
@ -7324,7 +7324,7 @@ textarea.form-control {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: .1rem;
font-size: 0.76562rem;
font-size: 0.875rem;
line-height: 1.5;
color: #fff;
background-color: #cc0000;
@ -7504,6 +7504,258 @@ textarea.form-control {
}
}
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
-webkit-transition: none;
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: none;
transform: none;
}
.modal.modal-static .modal-dialog {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
.modal-dialog-scrollable {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-dialog-centered {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
.modal-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #222;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #282828;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #282828;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
margin: 0.25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.modal-sm {
max-width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg,
.modal-xl {
max-width: 800px;
}
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 1140px;
}
}
.navbar.bg-primary {
border: 1px solid #282828;
}

@ -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;
@ -7669,4 +7957,9 @@ textarea.form-control {
.list-group-item h6 {
color: inherit;
}
.card {
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
}
/*# sourceMappingURL=spacelab-theme.css.map */

@ -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;
}

@ -25,6 +25,8 @@
@import "../../node_modules/bootstrap/scss/tables";
@import "../../node_modules/bootstrap/scss/pagination";
@import "../../node_modules/bootstrap/scss/forms";
@import "../../node_modules/bootstrap/scss/modal";
@import "../scss/cyborg/bootswatch";

@ -49,12 +49,12 @@ $body-color: $gray-400 !default;
// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
$font-size-base: .875rem !default;
$h1-font-size: 4rem !default;
$h2-font-size: 3rem !default;
$h3-font-size: 2.5rem !default;
$h4-font-size: 2rem !default;
$h5-font-size: 1.5rem !default;
// $font-size-base: .875rem !default;
// $h1-font-size: 4rem !default;
// $h2-font-size: 3rem !default;
// $h3-font-size: 2.5rem !default;
// $h4-font-size: 2rem !default;
// $h5-font-size: 1.5rem !default;
$headings-color: $white !default;
// Tables

@ -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

@ -95,3 +95,9 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,
color: inherit;
}
}
//Card ==================================================================
.card{
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
}

Loading…
Cancel
Save