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

tidy up, add base responsive nav, update readme

Browse source
This commit is contained in:
Lukas Juhas 2017-08-25 17:11:48 +01:00
parent f459a49dd3
commit 0d1c5d3e1e
21 changed files with 429 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1,54 +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;
}
}
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;
.btn--inverse {
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
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;
}
}
.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;
}
}
.btn--block {
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
}
.btn--link {
background-color: transparent;
color: $brand-colour;
}
background-color: transparent;
color: $brand-colour;
}

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

@ -1,14 +1,102 @@
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
// hamburger menu
.nav-burger {
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;
@include resp-max($breakpoint-md) {
display: block;
}
.nav-burger.open & {
&:nth-child(2) {
opacity: 0;
}
}
&:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
}
}
// applies to all navs
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&: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%;
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;
}
}
}
}
}