Congegni/barebones
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

V3 amends

Browse source
This commit is contained in:
Pedro Reis 2019-01-08 10:52:31 +00:00
parent 422d2e705a
commit 87e7ce065d
23 changed files with 383 additions and 388 deletions
Download patch file Download diff file Expand all files Collapse all files

52
assets/styles/components/_alerts.scss
View file

@ -1,34 +1,34 @@
.alert {
padding: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
border: 1px solid transparent;
padding: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
border: 1px solid transparent;
> p,
> ul {
margin-bottom: 0;
}
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: $base-spacing-unit;
}
> p + p {
margin-top: $base-spacing-unit;
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
}
}

94
assets/styles/components/_buttons.scss
View file

@ -1,59 +1,59 @@
.btn {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
display: inline-block;
padding: ($base-spacing-unit / 4) $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
width: auto;
transition: all .5s;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
}
&.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
.btn--inverse {
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
}
display: inline-block;
padding: #{$base-spacing-unit / 4} $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
width: auto;
transition: all .5s;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border-color: $brand-colour;
}
&.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
.btn--inverse {
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
border-color: transparent;
}
}
.btn--block {
display: block;
width: 100%;
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
}
.btn--link {
background-color: transparent;
color: $brand-colour;
background-color: transparent;
color: $brand-colour;
}

151
assets/styles/components/_nav.scss
View file

@ -1,104 +1,107 @@
// hamburger menu
/**
* Hamburger menu
*/
.nav-burger {
position: fixed;
top: $base-spacing-unit;
right: $base-spacing-unit;
z-index: 550;
transition: all $animation-speed $animation;
position: fixed;
top: $base-spacing-unit;
right: $base-spacing-unit;
z-index: 550;
transition: all $animation-speed $animation;
}
.nav-burger__line {
width: 35px;
height: 3px;
background-color: $brand-colour;
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
width: 35px;
height: 3px;
background-color: $brand-colour;
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
@include resp-max($breakpoint-md) {
display: block;
}
.nav-burger.open & {
&:nth-child(2) {
opacity: 0;
@include resp-max($breakpoint-md) {
display: block;
}
&:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
.nav-burger.open & {
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
&:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
}
}
}
// applies to all navs
/**
* Navs
*/
.nav {
ul {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
}
}
}
.nav--header {
// header nav styling goes here
// 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%;
// mobile nav
@include resp-max($breakpoint-md) {
position: fixed;
top: 0;
left: 0;
overflow: auto;
width: 100%;
max-height: 100%;
visibility: hidden;
width: 0;
height: 100%;
margin: 0;
padding: 0;
user-select: none;
transform: translateY(-50%);
-webkit-touch-callout: none;
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;
> li {
width: 100%;
margin: 0;
&.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;
}
}
}
}
}
}
}