General updates

This commit is contained in:
Pedro Reis 2015-10-15 17:24:32 +01:00
parent 7c5bfdc0d4
commit 05c8670de0
20 changed files with 929 additions and 129 deletions

View file

@ -1,8 +1,9 @@
body {
color: $base-colour;
font-family: $base-font-stack;
font-family: $base-font-family;
@include font-size($base-font-size);
line-height: $base-line-height;
-webkit-text-size-adjust: none;
}
h1,

View file

@ -1,3 +1,3 @@
// -----------------------------------------------------------------------------
// This file contains all @font-face declarations, if any.
// -----------------------------------------------------------------------------
/**
* This file contains all @font-face declarations, if any.
*/

View file

@ -2,49 +2,59 @@
* Blanket input styles for normalisation
*/
*:focus {
outline: 0;
}
input,
select,
textarea {
background-color: $base-background-colour;
border: solid 1px $base-colour;
border-radius: 0;
color: $base-colour;
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
padding: 0 ($base-spacing-unit / 2);
width: 100%;
background-color: $base-background-colour;
border: solid 1px $base-colour;
border-radius: 0;
color: $base-colour;
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
padding: 0 ($base-spacing-unit / 2);
width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
}
input[type="file"] {
line-height: normal;
height: auto;
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
line-height: normal;
height: auto;
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
}
input[type="submit"] {
-webkit-border-radius: 0;
border-radius: 0;
}
input[disabled] {
background-color: whitesmoke;
cursor: not-allowed;
background-color: whitesmoke;
cursor: not-allowed;
}
select {
line-height: normal;
padding: 0;
padding-left: ($base-spacing-unit / 2);
line-height: normal;
padding: 0;
padding-left: ($base-spacing-unit / 2);
}
textarea {
min-height: ($base-spacing-unit * 4);
overflow: auto;
vertical-align: top;
min-height: ($base-spacing-unit * 4);
overflow: auto;
vertical-align: top;
resize: vertical;
}
@ -53,33 +63,33 @@ textarea {
*/
.form--inline {
.form__group {
display: inline-block;
}
.form__group {
display: inline-block;
}
}
.checkbox,
.radio {
display: block;
padding-left: $base-spacing-unit;
&.inline {
display: inline-block;
}
> input {
float: left;
margin-left: -($base-spacing-unit);
margin-top: 4px;
}
display: block;
padding-left: $base-spacing-unit;
&.inline {
display: inline-block;
}
> input {
float: left;
margin-left: -($base-spacing-unit);
margin-top: 4px;
}
}
.form__group {
display: block;
margin-bottom: $base-spacing-unit;
display: block;
margin-bottom: $base-spacing-unit;
}
.form__label {
display: block;
margin-bottom: ($base-spacing-unit / 2);
display: block;
margin-bottom: ($base-spacing-unit / 2);
}
@ -91,22 +101,22 @@ textarea {
*/
.input-group {
position: relative;
> input {
padding: 0 ($base-spacing-unit * 2);
}
.input-group__addon {
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
position: absolute;
text-align: center;
top: 0;
width: ($base-spacing-unit * 1.5);
&:first-child {
left: 0;
position: relative;
> input {
padding: 0 ($base-spacing-unit * 2);
}
&:last-child {
right: 0;
.input-group__addon {
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
position: absolute;
text-align: center;
top: 0;
width: ($base-spacing-unit * 1.5);
&:first-child {
left: 0;
}
&:last-child {
right: 0;
}
}
}
}

View file

@ -6,3 +6,14 @@ img {
max-width: none;
}
}
/**
* Responsive images
*/
.is-fluid {
display: block;
width: 100%;
height: auto;
}

View file

@ -11,6 +11,6 @@ li {
}
.list--unstyled {
list-style: none;
margin-left: 0;
list-style: none;
margin-left: 0;
}

View file

@ -0,0 +1,28 @@
.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;
}
}

View file

@ -5,6 +5,11 @@
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 {
@ -17,6 +22,11 @@
color: $brand-colour;
border: 1px solid $brand-colour;
}
.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
.btn--inverse {
@ -33,6 +43,9 @@
.btn--block {
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
}
.btn--link {

View file

@ -1,14 +1,14 @@
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
}
}
}

View file

@ -1,13 +1,28 @@
/**
* Base values
* Colours
*/
$base-colour: #444;
$base-background-colour: #fff;
$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
$brand-colour: #444; // Example
$success-colour: #5CB85C;
$info-colour: $brand-colour;
$warning-colour: #F0AD4E;
$danger-colour: #D9534F;
/**
* Typography
*/
$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$serif-font-family: Georgia, "Times New Roman", Times, serif;
$base-font-family: $sans-serif-font-family;
$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
/**
@ -36,7 +51,7 @@ $grid-gutter: $base-spacing-unit;
/**
* Custom variables
* Components
*/
$brand-colour: #444; // Example
$border-radius: 3px;

View file

@ -2,6 +2,7 @@
* Clearing and floating
*/
.alignleft,
.float-left {
float: left;
img & {
@ -9,7 +10,7 @@
}
}
.alignright,
.float-right {
float: right;
img & {
@ -17,7 +18,7 @@
}
}
.aligncenter,
.float-center {
display: block;
margin: {
@ -39,15 +40,15 @@
* Text aligments
*/
.align-left {
.align-text-left {
text-align: left;
}
.align-right {
.align-text-right {
text-align: right;
}
.align-center {
.align-text-center {
text-align: right;
}