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

Change to rems

Browse source
This commit is contained in:
Mike Francis 2013-07-04 22:31:54 +01:00
parent 1c26a1bb56
commit a577e8111b
7 changed files with 121 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_/scss/_vars.scss
View file

@ -34,4 +34,5 @@ $input-border: solid 1px #ccc;
$input-background: #fff;
$btn-border: solid 1px #ccc;
$btn-background: #eee;
$btn-background-hover: #ddd;
$btn-color: #333;

10
_/scss/generic/_mixins.scss
View file

@ -44,4 +44,14 @@
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -moz-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
@function calculate-rem($size) {
$remSize: $size / 10;
@return #{$remSize}rem;
}
@mixin font-size($size) {
font-size: $size + px; //Fallback in px
font-size: calculate-rem($size);
}

12
_/scss/generic/_normalise.scss
View file

@ -1,7 +1,14 @@
html {
background-color: $base-background-colour;
color: $base-colour;
font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
font-size: 62.5%;
}
body {
//font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
font-family: $base-font-stack;
@include font-size($base-font-size);
line-height: $base-line-height;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
@ -9,8 +16,7 @@ h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
}
h1 {
font-size: ($h1-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h1-font-size ) * 1em;
@include font-size($h1-font-size);
}
h2 {

21
_/scss/objects/_forms.scss
View file

@ -3,13 +3,11 @@ input, select, textarea, button {
font-family: $base-font-stack;
font-size: 1em;
line-height: $base-margin-bottom + px;
padding: 2.5px 5px;
padding: 4px 8px;
color: $base-colour;
background: $input-background;
border: $input-border;
@include border-radius(3px);
margin-right: 5px;
margin-bottom: -1px;
width: 208px;
}
@ -31,16 +29,21 @@ textarea {
@extend .clearfix;
}
.checkbox input {
width: auto;
}
.btn {
cursor: pointer;
display: inline-block;
background: $btn-background;
color: $btn-color;
line-height: $base-margin-bottom + px;
border: $btn-border;
@include border-radius(3px);
@include gradient(#fff, #eee);
color: $btn-color;
cursor: pointer;
display: inline-block;
line-height: $base-margin-bottom + px;
padding: 5px 20px;
width: auto;
&:hover {
@include gradient(#eee, #fff);
background: $btn-background-hover;
}
}