2020.12.22

新增icon icon-variables 將其匯入其他主題
pull/2/head
Ron.wang 3 years ago
parent 0e619902d7
commit 3cf8220f0e

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -1,4 +1,193 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.icon-actions > a {
display: inline-block;
margin-right: .75rem;
color: #777;
font-size: .875rem;
}
.icon-actions > a:last-of-type {
margin-right: 0;
}
.icon-actions > a span {
margin-left: .1875rem;
font-weight: 700;
color: #777;
}
.icon-actions > a:hover span {
color: #5e5e5e;
}
.icon-actions > a,
.icon-actions > a:hover,
.icon-actions > a.active {
color: #333;
}
.icon-actions > .favorite:hover,
.icon-actions > .favorite.active {
color: #d47500;
}
.icon-actions > .love:hover,
.icon-actions > .love.active {
color: #cd0200;
}
.icon-actions > .like:hover,
.icon-actions > .like.active {
color: #446e9b;
}
.icon-actions-lg a {
font-size: 1.25rem;
margin-right: .875rem;
}
.icon-shape {
padding: 12px;
text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
}
.icon-shape i, .icon-shape svg {
font-size: 1.25rem;
}
.icon-shape.icon-lg i, .icon-shape.icon-lg svg {
font-size: 1.625rem;
}
.icon-shape.icon-sm i, .icon-shape.icon-sm svg {
font-size: .875rem;
}
.icon-shape.icon-xs i, .icon-shape.icon-xs svg {
font-size: .6rem;
}
.icon-shape svg {
width: 30px;
height: 30px;
}
.icon-shape-primary {
color: #2c5580;
background-color: rgba(91, 135, 183, 0.5);
}
.icon-shape-secondary {
color: #8c7373;
background-color: rgba(179, 179, 179, 0.5);
}
.icon-shape-success {
color: #299211;
background-color: rgba(79, 217, 48, 0.5);
}
.icon-shape-info {
color: #0181f2;
background-color: rgba(99, 177, 246, 0.5);
}
.icon-shape-warning {
color: #a15900;
background-color: rgba(255, 144, 8, 0.5);
}
.icon-shape-danger {
color: #9a0200;
background-color: rgba(255, 3, 1, 0.5);
}
.icon-shape-light {
color: #d9d0d0;
background-color: rgba(255, 255, 255, 0.5);
}
.icon-shape-dark {
color: #1c1717;
background-color: rgba(77, 77, 77, 0.5);
}
.icon {
width: 3rem;
height: 3rem;
}
.icon i, .icon svg {
font-size: 2.25rem;
}
.icon + .icon-text {
padding-left: 1rem;
width: calc(100% - 3rem - 1);
}
.icon-xl {
width: 5rem;
height: 5rem;
}
.icon-xl i, .icon-xl svg {
font-size: 4.25rem;
}
.icon-xl + .icon-text {
width: calc(100% - 5rem - 1);
}
.icon-lg {
width: 4rem;
height: 4rem;
}
.icon-lg i, .icon-lg svg {
font-size: 3.25rem;
}
.icon-lg + .icon-text {
width: calc(100% - 4rem - 1);
}
.icon-sm {
width: 2rem;
height: 2rem;
}
.icon-sm i, .icon-sm svg {
font-size: 1.25rem;
}
.icon-sm + .icon-text {
width: calc(100% - 2rem - 1);
}
.icon-xs {
width: 1.25rem;
height: 1.25rem;
}
.icon-xs i, .icon-xs svg {
font-size: 0.5rem;
}
.icon-xs + .icon-text {
width: calc(100% - 1.25rem - 1);
}
:root {
--blue: #446e9b;
--indigo: #6610f2;
@ -6703,6 +6892,619 @@ a.text-dark:hover, a.text-dark:focus {
border: 0;
}
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #3399f3;
background-color: #fff;
border: 1px solid #dee2e6;
}
.page-link:hover {
z-index: 2;
color: #0c73cd;
text-decoration: none;
background-color: #eee;
border-color: #dee2e6;
}
.page-link:focus {
z-index: 3;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(68, 110, 155, 0.25);
box-shadow: 0 0 0 0.2rem rgba(68, 110, 155, 0.25);
}
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #446e9b;
border-color: #446e9b;
}
.page-item.disabled .page-link {
color: #777;
pointer-events: none;
cursor: auto;
background-color: #fff;
border-color: #dee2e6;
}
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.5;
}
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
border-top-right-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.form-control {
-webkit-transition: none;
transition: none;
}
}
.form-control::-ms-expand {
background-color: transparent;
border: 0;
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #90aece;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(68, 110, 155, 0.25);
box-shadow: 0 0 0 0.2rem rgba(68, 110, 155, 0.25);
}
.form-control::-webkit-input-placeholder {
color: #777;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #777;
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: #777;
opacity: 1;
}
.form-control::placeholder {
color: #777;
opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
background-color: #eee;
opacity: 1;
}
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff;
}
.form-control-file,
.form-control-range {
display: block;
width: 100%;
}
.col-form-label {
padding-top: calc(0.375rem + 1px);
padding-bottom: calc(0.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
}
.col-form-label-lg {
padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px);
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.875rem;
line-height: 1.5;
}
.form-control-plaintext {
display: block;
width: 100%;
padding: 0.375rem 0;
margin-bottom: 0;
font-size: 1rem;
line-height: 1.5;
color: #777;
background-color: transparent;
border: solid transparent;
border-width: 1px 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0;
}
.form-control-sm {
height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.form-control-lg {
height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
select.form-control[size], select.form-control[multiple] {
height: auto;
}
textarea.form-control {
height: auto;
}
.form-group {
margin-bottom: 1rem;
}
.form-text {
display: block;
margin-top: 0.25rem;
}
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.form-check {
position: relative;
display: block;
padding-left: 1.25rem;
}
.form-check-input {
position: absolute;
margin-top: 0.3rem;
margin-left: -1.25rem;
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
color: #777;
}
.form-check-label {
margin-bottom: 0;
}
.form-check-inline {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 0;
margin-right: 0.75rem;
}
.form-check-inline .form-check-input {
position: static;
margin-top: 0;
margin-right: 0.3125rem;
margin-left: 0;
}
.valid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #3cb521;
}
.valid-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: .1rem;
font-size: 0.875rem;
line-height: 1.5;
color: #fff;
background-color: rgba(60, 181, 33, 0.9);
border-radius: 0.25rem;
}
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
display: block;
}
.was-validated .form-control:valid, .form-control.is-valid {
border-color: #3cb521;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%233cb521' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
border-color: #3cb521;
-webkit-box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.was-validated .custom-select:valid, .custom-select.is-valid {
border-color: #3cb521;
padding-right: calc(0.75em + 2.3125rem);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%233cb521' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
border-color: #3cb521;
-webkit-box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
color: #3cb521;
}
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
display: block;
}
.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
color: #3cb521;
}
.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
border-color: #3cb521;
}
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
border-color: #4fd930;
background-color: #4fd930;
}
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-webkit-box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
}
.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
border-color: #3cb521;
}
.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
border-color: #3cb521;
}
.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
border-color: #3cb521;
-webkit-box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
box-shadow: 0 0 0 0.2rem rgba(60, 181, 33, 0.25);
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #cd0200;
}
.invalid-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: .1rem;
font-size: 0.875rem;
line-height: 1.5;
color: #fff;
background-color: rgba(205, 2, 0, 0.9);
border-radius: 0.25rem;
}
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
display: block;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
border-color: #cd0200;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23cd0200' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23cd0200' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
border-color: #cd0200;
-webkit-box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.was-validated .custom-select:invalid, .custom-select.is-invalid {
border-color: #cd0200;
padding-right: calc(0.75em + 2.3125rem);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23cd0200' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23cd0200' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
border-color: #cd0200;
-webkit-box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
color: #cd0200;
}
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
display: block;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
color: #cd0200;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
border-color: #cd0200;
}
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
border-color: #ff0301;
background-color: #ff0301;
}
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-webkit-box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
}
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
border-color: #cd0200;
}
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
border-color: #cd0200;
}
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
border-color: #cd0200;
-webkit-box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
box-shadow: 0 0 0 0.2rem rgba(205, 2, 0, 0.25);
}
.form-inline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-inline .form-check {
width: 100%;
}
@media (min-width: 576px) {
.form-inline label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 0;
}
.form-inline .form-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-control-plaintext {
display: inline-block;
}
.form-inline .input-group,
.form-inline .custom-select {
width: auto;
}
.form-inline .form-check {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
padding-left: 0;
}
.form-inline .form-check-input {
position: relative;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: 0;
margin-right: 0.25rem;
margin-left: 0;
}
.form-inline .custom-control {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.form-inline .custom-control-label {
margin-bottom: 0;
}
}
.navbar .nav-link,
.navbar .navbar-brand {
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);

@ -5,8 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/argon-theme.css">
<link rel="stylesheet" href="css/spacelab-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css">
</head>
<body>
@ -186,11 +187,32 @@
</tbody>
</table>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="icon icon-shape icon-shape-info rounded-circle shadow mb-4">
<i class="bi bi-arrow-bar-up"></i>
</div>
<h5 class="h3">Components</h5>
<p>Argon comes with over 70 handcrafted components.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="icon icon-shape icon-shape-info rounded-circle shadow mb-4">
<i class="bi bi-arrow-bar-up"></i>
</div>
<h5 class="h3">Plugins</h5>
<p>Fully integrated and extendable third-party plugins that you will love.</p>
</div>
</div>
</div>
</body>
<style>
html{
font-family: ;
}
.bi{
line-height: 0;
}
</style>
</html>

@ -4,12 +4,17 @@
// Argon varialbes
@import "argon/variables";
@import "argon/custom/icon-variables";
@import "../../node_modules/bootstrap/scss/variables";
// Argon mixins
// @import "argon/mixins";
@import 'argon/custom/background-variant';
@import 'argon/custom/icon';
@import "../../node_modules/bootstrap/scss/mixins";
// Bootstrap components
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@ -28,7 +33,6 @@
// Argon components
@import 'argon/custom/forms';
@import 'argon/custom/table';
@import 'argon/custom/pagination';
@import 'argon/custom/buttons';
@import 'argon/custom/cards';

@ -0,0 +1,30 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !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;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
}
}
}

@ -0,0 +1,3 @@
$favorite-color: $yellow ;
$like-color: $blue ;
$love-color: $red ;

@ -0,0 +1,203 @@
//
@mixin icon-shape-variant($color) {
color: saturate(darken($color, 10%), 10);
background-color: transparentize(lighten($color, 10%), .5);
}
@mixin icon-font($content, $font-size) {
content: $content;
font-family: $icon-font-family;
font-size: $font-size;
}
// Icon action
//
$icon-size: 3rem !default;
$icon-size-xl: 5rem !default;
$icon-size-lg: 4rem !default;
$icon-size-sm: 2rem !default;
$icon-size-xs: 1.25rem !default;
.icon-actions {
> a {
display: inline-block;
margin-right: .75rem;
color: $gray-600;
font-size: .875rem;
&:last-of-type {
margin-right: 0;
}
span {
margin-left: .1875rem;
font-weight: $font-weight-bold;
color: $text-muted;
}
&:hover {
span {
color: darken($text-muted, 10%);
}
}
}
> a,
> a:hover,
> a.active {
color: $gray-800;
}
> .favorite:hover,
> .favorite.active {
color: $favorite-color;
}
> .love:hover,
> .love.active {
color: $love-color;
}
> .like:hover,
> .like.active {
color: $like-color;
}
}
.icon-actions-lg {
a {
font-size: 1.25rem;
margin-right: .875rem;
}
}
//
// Icon shape
//
.icon-shape {
padding: 12px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
i, svg {
font-size: 1.25rem;
}
&.icon-lg {
i, svg {
font-size: 1.625rem;
}
}
&.icon-sm {
i, svg {
font-size: .875rem;
}
}
&.icon-xs {
i, svg {
font-size: .6rem;
}
}
svg {
width: 30px;
height: 30px;
}
}
@each $color, $value in $theme-colors {
.icon-shape-#{$color} {
@include icon-shape-variant(theme-color($color));
}
}
// Icon
//
.icon {
width: $icon-size;
height: $icon-size;
i, svg {
font-size: $icon-size - .75;
}
+ .icon-text {
padding-left: 1rem;
width: calc(100% - #{$icon-size} - 1);
}
}
// Extra large icons
.icon-xl {
width: $icon-size-xl;
height: $icon-size-xl;
i, svg {
font-size: $icon-size-xl - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-xl} - 1);
}
}
// Large icons
.icon-lg {
width: $icon-size-lg;
height: $icon-size-lg;
i, svg {
font-size: $icon-size-lg - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-lg} - 1);
}
}
// Small icon
.icon-sm {
width: $icon-size-sm;
height: $icon-size-sm;
i, svg {
font-size: $icon-size-sm - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-sm} - 1);
}
}
// Extra Small icon
.icon-xs {
width: $icon-size-xs;
height: $icon-size-xs;
i, svg {
font-size: $icon-size-xs - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-xs} - 1);
}
}

@ -4,9 +4,11 @@
// Cosmo varialbes
@import "cosmo/variables";
@import "argon/custom/icon-variables";
@import "../../node_modules/bootstrap/scss/variables";
// Cosmo mixins
@import 'argon/custom/background-variant';
@import 'argon/custom/icon';
// Bootstrap mixins
@import "../../node_modules/bootstrap/scss/mixins";

@ -2,13 +2,15 @@
// Bootstrap functions
@import '../../node_modules/bootstrap/scss/functions';
// Cosmo varialbes
// cyborg varialbes
@import "../scss/cyborg/variables";
@import "argon/custom/icon-variables";
@import "../../node_modules/bootstrap/scss/variables";
// Cosmo mixins
// cyborg mixins
// Bootstrap mixins
@import 'argon/custom/background-variant';
@import 'argon/custom/icon';
@import "../../node_modules/bootstrap/scss/mixins";
// Bootstrap components
@ -21,5 +23,9 @@
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/tables";
@import "../../node_modules/bootstrap/scss/pagination";
@import "../../node_modules/bootstrap/scss/forms";
@import "../scss/cyborg/bootswatch";

@ -26,7 +26,8 @@ $orange: #fd7e14 !default;
$yellow: #f80 !default;
$green: #77b300 !default;
$teal: #20c997 !default;
$cyan: rgb(62, 33, 165) !default;
$cyan: #00A3A3 !default;
$primary: $blue !default;
$secondary: $gray-600 !default;

@ -1,13 +1,15 @@
// Bootstrap functions
@import '../../node_modules/bootstrap/scss/functions';
// Cosmo varialbes
// spacelab varialbes
@import "../scss/spacelab/variables";
@import "argon/custom/icon-variables";
@import "../../node_modules/bootstrap/scss/variables";
// Cosmo mixins
// spacelab mixins
// Bootstrap mixins
@import 'argon/custom/icon';
@import 'argon/custom/background-variant';
@import "../../node_modules/bootstrap/scss/mixins";
// Bootstrap components
@ -20,4 +22,7 @@
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/tables";
@import "../../node_modules/bootstrap/scss/pagination";
@import "../../node_modules/bootstrap/scss/forms";
@import "../scss/spacelab/bootswatch";

Loading…
Cancel
Save