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

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;
}