Skip to content

GitLab

G
GSC Bootstrap
Commit 507417c5 authored by Ben Galloway's avatar Ben Galloway
Browse files
Options

Perfect some colour calculations - particularly for the Alert component

parent 95abf7e2
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 320 deletions
dist/bootstrap.css
View file @ 507417c5
......@@ -94,6 +94,7 @@ p {
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
......@@ -437,7 +438,7 @@ small,
mark,
.mark {
padding: 0.2em;
background-color: #d9dcdd;
background-color: #dee0e1;
}
.list-unstyled {
......@@ -503,7 +504,7 @@ mark,
.figure-caption {
font-size: 90%;
color: #434257;
color: #3f3e53;
}
code,
......@@ -1426,121 +1427,121 @@ pre code {
.table-primary,
.table-primary > th,
.table-primary > td {
background-color: #43bdc1;
background-color: #c5ebec;
}
.table-hover .table-primary:hover {
background-color: #3aadb0;
background-color: #b2e4e6;
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
background-color: #3aadb0;
background-color: #b2e4e6;
}
.table-secondary,
.table-secondary > th,
.table-secondary > td {
background-color: #414055;
background-color: #c4c4cb;
}
.table-hover .table-secondary:hover {
background-color: #363546;
background-color: #b6b6bf;
}
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
background-color: #363546;
background-color: #b6b6bf;
}
.table-success,
.table-success > th,
.table-success > td {
background-color: #36bc80;
background-color: #c1ead8;
}
.table-hover .table-success:hover {
background-color: #30a873;
background-color: #aee4cc;
}
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
background-color: #30a873;
background-color: #aee4cc;
}
.table-info,
.table-info > th,
.table-info > td {
background-color: #48b1e4;
background-color: #c7e7f7;
}
.table-hover .table-info:hover {
background-color: #32a8e1;
background-color: #b1ddf4;
}
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
background-color: #32a8e1;
background-color: #b1ddf4;
}
.table-warning,
.table-warning > th,
.table-warning > td {
background-color: #e7bf5c;
background-color: #f8ebcd;
}
.table-hover .table-warning:hover {
background-color: #e4b646;
background-color: #f5e2b7;
}
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
background-color: #e4b646;
background-color: #f5e2b7;
}
.table-danger,
.table-danger > th,
.table-danger > td {
background-color: #e61b3a;
background-color: #f7b9c2;
}
.table-hover .table-danger:hover {
background-color: #d11733;
background-color: #f4a2ae;
}
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
background-color: #d11733;
background-color: #f4a2ae;
}
.table-light,
.table-light > th,
.table-light > td {
background-color: #f2f5f6;
background-color: #fbfcfc;
}
.table-hover .table-light:hover {
background-color: #e3e9ec;
background-color: #ecf1f1;
}
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
background-color: #e3e9ec;
background-color: #ecf1f1;
}
.table-dark,
.table-dark > th,
.table-dark > td {
background-color: #414055;
background-color: #c4c4cb;
}
.table-hover .table-dark:hover {
background-color: #363546;
background-color: #b6b6bf;
}
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
background-color: #363546;
background-color: #b6b6bf;
}
.table-active,
......@@ -1684,6 +1685,21 @@ pre code {
box-shadow: 0 0 0 0.2rem rgba(48, 183, 187, 0.25);
}
.form-control::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control::placeholder {
color: #6c757d;
opacity: 1;
......@@ -2107,6 +2123,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
......@@ -3261,6 +3280,9 @@ tbody.collapse.show {
height: 1rem;
pointer-events: none;
content: "";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #dee2e6;
}
......@@ -3334,6 +3356,8 @@ tbody.collapse.show {
background-size: 8px 10px;
border: 1px solid #2e2d44;
border-radius: 0.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
......@@ -4150,7 +4174,9 @@ tbody.collapse.show {
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.card-columns .card {
......@@ -4400,7 +4426,7 @@ tbody.collapse.show {
.jumbotron {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #c1c3c4;
background-color: #cacdce;
border-radius: 0.3rem;
}
......@@ -4445,115 +4471,124 @@ tbody.collapse.show {
}
.alert-primary {
color: #2dacb0;
background-color: #45bec2;
border-color: #43bdc1;
color: #195f61;
background-color: #d6f1f1;
border-color: #c5ebec;
}
.alert-primary hr {
border-top-color: #3aadb0;
border-top-color: #b2e4e6;
}
.alert-primary .alert-link {
color: #238487;
color: #0f3738;
}
.alert-secondary {
color: #2b2a40;
background-color: #434257;
border-color: #414055;
color: #181723;
background-color: #d5d5da;
border-color: #c4c4cb;
}
.alert-secondary hr {
border-top-color: #363546;
border-top-color: #b6b6bf;
}
.alert-secondary .alert-link {
color: #161621;
color: #030304;
}
.alert-success {
color: #20aa6c;
background-color: #38bc81;
border-color: #36bc80;
color: #125e3c;
background-color: #d3f0e3;
border-color: #c1ead8;
}
.alert-success hr {
border-top-color: #30a873;
border-top-color: #aee4cc;
}
.alert-success .alert-link {
color: #187f51;
color: #0a3321;
}
.alert-info {
color: #339fd4;
background-color: #4ab2e4;
border-color: #48b1e4;
color: #1c5875;
background-color: #d7eef9;
border-color: #c7e7f7;
}
.alert-info hr {
border-top-color: #32a8e1;
border-top-color: #b1ddf4;
}
.alert-info .alert-link {
color: #2582af;
color: #12394c;
}
.alert-warning {
color: #d7ae47;
background-color: #e8c05e;
border-color: #e7bf5c;
color: #776028;
background-color: #faf1db;
border-color: #f8ebcd;
}
.alert-warning hr {
border-top-color: #e4b646;
border-top-color: #f5e2b7;
}
.alert-warning .alert-link {
color: #c1962a;
color: #51411b;
}
.alert-danger {
color: #d60424;
background-color: #e71d3c;
border-color: #e61b3a;
color: #770214;
background-color: #facdd4;
border-color: #f7b9c2;
}
.alert-danger hr {
border-top-color: #d11733;
border-top-color: #f4a2ae;
}
.alert-danger .alert-link {
color: #a4031c;
color: #45010c;
}
.alert-light {
color: #e3e5e6;
background-color: #f2f5f6;
border-color: #f2f5f6;
color: #7d7f7f;
background-color: #fcfdfd;
border-color: #fbfcfc;
}
.alert-light hr {
border-top-color: #e3e9ec;
border-top-color: #ecf1f1;
}
.alert-light .alert-link {
color: #c8ccce;
color: #646565;
}
.alert-dark {
color: #2b2a40;
background-color: #434257;
border-color: #414055;
color: #181723;
background-color: #d5d5da;
border-color: #c4c4cb;
}
.alert-dark hr {
border-top-color: #363546;
border-top-color: #b6b6bf;
}
.alert-dark .alert-link {
color: #161621;
color: #030304;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
......@@ -4590,6 +4625,7 @@ tbody.collapse.show {
}
.progress-bar-animated {
-webkit-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
}
......@@ -4678,131 +4714,131 @@ tbody.collapse.show {
}
.list-group-item-primary {
color: #2dacb0;
background-color: #43bdc1;
color: #195f61;
background-color: #c5ebec;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
color: #2dacb0;
background-color: #3aadb0;
color: #195f61;
background-color: #b2e4e6;
}
.list-group-item-primary.list-group-item-action.active {
color: #fff;
background-color: #2dacb0;
border-color: #2dacb0;
background-color: #195f61;
border-color: #195f61;
}
.list-group-item-secondary {
color: #2b2a40;
background-color: #414055;
color: #181723;
background-color: #c4c4cb;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
color: #2b2a40;
background-color: #363546;
color: #181723;
background-color: #b6b6bf;
}
.list-group-item-secondary.list-group-item-action.active {
color: #fff;
background-color: #2b2a40;
border-color: #2b2a40;
background-color: #181723;
border-color: #181723;
}
.list-group-item-success {
color: #20aa6c;
background-color: #36bc80;
color: #125e3c;
background-color: #c1ead8;
}
.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
color: #20aa6c;
background-color: #30a873;
color: #125e3c;
background-color: #aee4cc;
}
.list-group-item-success.list-group-item-action.active {
color: #fff;
background-color: #20aa6c;
border-color: #20aa6c;
background-color: #125e3c;
border-color: #125e3c;
}
.list-group-item-info {
color: #339fd4;
background-color: #48b1e4;
color: #1c5875;
background-color: #c7e7f7;
}
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
color: #339fd4;
background-color: #32a8e1;
color: #1c5875;
background-color: #b1ddf4;
}
.list-group-item-info.list-group-item-action.active {
color: #fff;
background-color: #339fd4;
border-color: #339fd4;
background-color: #1c5875;
border-color: #1c5875;
}
.list-group-item-warning {
color: #d7ae47;
background-color: #e7bf5c;
color: #776028;
background-color: #f8ebcd;
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
color: #d7ae47;
background-color: #e4b646;
color: #776028;
background-color: #f5e2b7;
}
.list-group-item-warning.list-group-item-action.active {
color: #fff;
background-color: #d7ae47;
border-color: #d7ae47;
background-color: #776028;
border-color: #776028;
}
.list-group-item-danger {
color: #d60424;
background-color: #e61b3a;
color: #770214;
background-color: #f7b9c2;
}
.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
color: #d60424;
background-color: #d11733;
color: #770214;
background-color: #f4a2ae;
}
.list-group-item-danger.list-group-item-action.active {
color: #fff;
background-color: #d60424;
border-color: #d60424;
background-color: #770214;
border-color: #770214;
}
.list-group-item-light {
color: #e3e5e6;
background-color: #f2f5f6;
color: #7d7f7f;
background-color: #fbfcfc;
}
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
color: #e3e5e6;
background-color: #e3e9ec;
color: #7d7f7f;
background-color: #ecf1f1;
}
.list-group-item-light.list-group-item-action.active {
color: #fff;
background-color: #e3e5e6;
border-color: #e3e5e6;
background-color: #7d7f7f;
border-color: #7d7f7f;
}
.list-group-item-dark {
color: #2b2a40;
background-color: #414055;
color: #181723;
background-color: #c4c4cb;
}
.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
color: #2b2a40;
background-color: #363546;
color: #181723;
background-color: #b6b6bf;
}
.list-group-item-dark.list-group-item-action.active {
color: #fff;
background-color: #2b2a40;
border-color: #2b2a40;
background-color: #181723;
border-color: #181723;
}
.close {
......@@ -4861,11 +4897,15 @@ button.close {
}
.modal.fade .modal-dialog {
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, -25%);
transform: translate(0, -25%);
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
......@@ -5109,7 +5149,7 @@ button.close {
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-color: #f1f4f5;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
......@@ -5154,7 +5194,7 @@ button.close {
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
bottom: 1px;
border-top-color: #fff;
border-top-color: #f1f4f5;
}
.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
......@@ -5183,7 +5223,7 @@ button.close {
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
left: 1px;
border-right-color: #fff;
border-right-color: #f1f4f5;
}
.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
......@@ -5209,7 +5249,7 @@ button.close {
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
top: 1px;
border-bottom-color: #fff;
border-bottom-color: #f1f4f5;
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
......@@ -5220,7 +5260,7 @@ button.close {
width: 1rem;
margin-left: -0.5rem;
content: "";
border-bottom: 1px solid #f7f7f7;
border-bottom: 1px solid #dee0e1;
}
.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
......@@ -5249,7 +5289,7 @@ button.close {
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
right: 1px;
border-left-color: #fff;
border-left-color: #f1f4f5;
}
.popover-header {
......@@ -5257,8 +5297,8 @@ button.close {
margin-bottom: 0;
font-size: 1rem;
color: inherit;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
background-color: #dee0e1;
border-bottom: 1px solid #d1d3d5;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
......@@ -5287,8 +5327,12 @@ button.close {
display: none;
align-items: center;
width: 100%;
transition: -webkit-transform 0.6s ease;
transition: transform 0.6s ease;
transition: transform 0.6s ease, -webkit-transform 0.6s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
......@@ -5306,36 +5350,42 @@ button.close {
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
-webkit-transform: translateX(0);
transform: translateX(0);
}
@supports (transform-style: preserve-3d) {
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.active.carousel-item-right {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
@supports (transform-style: preserve-3d) {
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
.carousel-item-next,
.active.carousel-item-right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.carousel-item-prev,
.active.carousel-item-left {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
@supports (transform-style: preserve-3d) {
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
.carousel-item-prev,
.active.carousel-item-left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
......@@ -5349,7 +5399,7 @@ button.close {
align-items: center;
justify-content: center;
width: 15%;
color: #fff;
color: #f1f4f5;
text-align: center;
opacity: 0.5;
}
......@@ -5357,7 +5407,7 @@ button.close {
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
color: #fff;
color: #f1f4f5;
text-decoration: none;
outline: 0;
opacity: .9;
......@@ -5381,11 +5431,11 @@ button.close {
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f1f4f5' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f1f4f5' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-indicators {
......@@ -5410,7 +5460,7 @@ button.close {
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(241, 244, 245, 0.5);
}
.carousel-indicators li::before {
......@@ -5434,7 +5484,7 @@ button.close {
}
.carousel-indicators .active {
background-color: #fff;
background-color: #f1f4f5;
}
.carousel-caption {
......@@ -5445,7 +5495,7 @@ button.close {
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
color: #f1f4f5;
text-align: center;
}
......@@ -6457,6 +6507,7 @@ button.bg-dark:focus {
}
.position-sticky {
position: -webkit-sticky !important;
position: sticky !important;
}
......@@ -6476,8 +6527,9 @@ button.bg-dark:focus {
z-index: 1030;
}
@supports (position: sticky) {
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
......@@ -6492,6 +6544,7 @@ button.bg-dark:focus {
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
......@@ -6503,6 +6556,7 @@ button.bg-dark:focus {
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}
......@@ -8113,5 +8167,4 @@ a.text-dark:hover, a.text-dark:focus {
border: 1px solid #ddd !important;
}
}
/*# sourceMappingURL=bootstrap.css.map */
\ No newline at end of file
dist/bootstrap.css.map
View file @ 507417c5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/bootstrap.min.css
View file @ 507417c5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/bootstrap.min.css.map
View file @ 507417c5
This source diff could not be displayed because it is too large. You can view the blob instead.
scss/_gsc-variables.scss
View file @ 507417c5
......@@ -72,7 +72,7 @@ $theme-colors: map-merge((
// stylelint-enable
// Set a specific jump point for requesting color jumps
$theme-color-interval: 1%;
$theme-color-interval: 8%;
// Body
//
......@@ -104,7 +104,7 @@ $headings-font-weight: 400;
$headings-line-height: 1.0;
// stylelint-enable value-keyword-case
$mark-bg: theme-color-level("light", 10);
$mark-bg: theme-color-level("light", 1);
// Forms
......@@ -130,7 +130,7 @@ $pagination-bg: theme-color("light");
// Jumbotron
$jumbotron-bg: theme-color-level("light", 20);
$jumbotron-bg: theme-color-level("light", 2);
// Tooltips
......@@ -141,8 +141,8 @@ $tooltip-bg: theme-color("dark");
// Popovers
//$popover-bg: theme-color("light");
//$popover-header-bg: theme-color-level("light", 3);
$popover-bg: theme-color("light");
$popover-header-bg: theme-color-level("light", 1);
// Modals
......@@ -165,14 +165,14 @@ $list-group-bg: theme-color("light");
// Figures
$figure-caption-color: theme-color-level("dark", -10);
$figure-caption-color: theme-color-level("dark", -1);
// Carousel
//$carousel-control-color: theme-color("light");
//$carousel-indicator-active-bg: theme-color("light");
//$carousel-caption-color: theme-color("light");
$carousel-control-color: theme-color("light");
$carousel-indicator-active-bg: theme-color("light");
$carousel-caption-color: theme-color("light");
// Close
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment