Version 4 with Laravel Mix

This commit is contained in:
Dan Coulthard 2023-08-03 12:57:13 +01:00
parent 0cafd60448
commit f0198f659b
32 changed files with 13032 additions and 352 deletions

View file

@ -13,22 +13,22 @@
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
color: map-get($colors, 'success');
border-color: map-get($colors, 'success');
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
color: map-get($colors, 'info');
border-color: map-get($colors, 'info');
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
color: map-get($colors, 'warning');
border-color: map-get($colors, 'warning');
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
color: map-get($colors, 'danger');
border-color: map-get($colors, 'danger');
}
}

View file

@ -1,9 +1,9 @@
.btn {
background-color: $brand-colour;
color: $base-background-colour;
background-color: map-get($colors, 'brand');
color: map-get($colors, 'background');
border: 1px solid transparent;
display: inline-block;
padding: #{$base-spacing-unit / 4} $base-spacing-unit;
padding: #{$base-spacing-unit * 0.25} $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
@ -20,9 +20,9 @@
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border-color: $brand-colour;
background-color: map-get($colors, 'background');
color: map-get($colors, 'brand');
border-color: map-get($colors, 'brand');
}
&.is-disabled,
@ -33,13 +33,13 @@
}
.btn--inverse {
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
background-color: map-get($colors, 'background');
color: map-get($colors, 'brand');
border: 1px solid map-get($colors, 'brand');
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
background-color: map-get($colors, 'brand');
color: map-get($colors, 'background');
border-color: transparent;
}
}
@ -49,11 +49,11 @@
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
margin-top: $base-spacing-unit * 0.25;
}
}
.btn--link {
background-color: transparent;
color: $brand-colour;
color: map-get($colors, 'brand');
}

View file

@ -3,17 +3,14 @@
*/
.nav-burger {
position: fixed;
top: $base-spacing-unit;
right: $base-spacing-unit;
z-index: 550;
float: right;
transition: all $animation-speed $animation;
}
.nav-burger__line {
width: 35px;
height: 3px;
background-color: $brand-colour;
background-color: map-get($colors, 'brand');
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
@ -60,48 +57,9 @@
}
.nav--header {
// mobile nav
@include resp-max($breakpoint-md) {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
width: 0;
height: 100%;
margin: 0;
transition: opacity 500ms ease;
transition: opacity .35s ease, visibility .35s ease, width .35s ease;
text-align: center;
opacity: 0;
background: $base-background-colour;
-webkit-overflow-scrolling: touch;
&.open {
z-index: 500;
visibility: visible;
width: 100%;
opacity: 1;
ul {
position: absolute;
top: 50%;
left: 0;
overflow: auto;
width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
user-select: none;
transform: translateY(-50%);
-webkit-touch-callout: none;
-webkit-overflow-scrolling: touch;
> li {
width: 100%;
margin: 0;
}
}
ul {
list-style: none;
}
}
}