CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-28 04:46:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

implement vertical rhythm

Browse Source
This commit is contained in:
Keegan
2016-01-19 16:36:09 -08:00
parent 6aaad1a4dd
commit b960dc19f4
6 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_base.scss
+48 -46
View File
@@ -6,19 +6,19 @@ html, body {
@include font-pfdin(regular);
-webkit-font-smoothing: antialiased;
font-size: $em-base;
line-height: 1.15;
line-height: $base-line-height;
height:100%;
color: $color-white;
//&.platform-ios {
// font-size: 13px;
//}
&.platform-ios {
font-size: 16px;
}
}
body {
background-color: $color-gray-2;
padding: 0.75rem;
padding: $item-spacing-v $item-spacing-h;
}
h1, h2, h3, h4 {
@@ -28,46 +28,40 @@ h1, h2, h3, h4 {
}
h1 {
font-size: 2rem;
@include font-size(2);
}
h2 {
font-size: 1.8rem;
@include font-size(1.8);
}
h3 {
font-size: 1.5rem;
@include font-size(1.5);
}
h4 {
font-size: 1.3rem;
@include font-size(1.2);
}
h5 {
font-size: 1rem;
@include font-size(1);
}
h6 {
font-size: 0.8rem;
}
.section {
background: $color-gray-4;
border-radius: 0.25rem;
margin-bottom: 1rem;
box-shadow: $color-gray-1 0 0.15rem 0.25rem;
@include font-size(0.8);
}
.item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: $item-spacing-v / 2;
align-items: center;
padding-bottom: $item-spacing-v;
.input {
white-space: nowrap;
display: flex;
max-width: 50%;
margin-left: $item-spacing-h;
}
&.invalid .input:after {
@@ -89,31 +83,48 @@ h6 {
flex: 0 0 $size;
margin-left: 0.3rem;
}
//.input input {
// color: $color-orange;
// padding-right: 1em;
//
// @include placeholder {
// color: $color-orange;
// }
//
//}
}
.section & {
padding-top: $item-spacing-v / 2;
.section {
background: $color-gray-4;
border-radius: 0.25rem;
margin-bottom: 1rem;
box-shadow: $color-gray-1 0 0.15rem 0.25rem;
.item {
padding-top: $item-spacing-v;
padding-right: $item-spacing-h;
padding-left: $item-spacing-h;
position: relative;
&:last-child {
padding-bottom: $item-spacing-v /2 ;
}
&:last-child,
&:first-child {
padding-bottom: $item-spacing-v / 2;
padding-bottom: $item-spacing-v;
&:after {
display: none;
}
}
&:after {
content: "";
background: $color-gray-6;
display: block;
position: absolute;
bottom: 0;
left: $item-spacing-h / 2;
right: $item-spacing-h / 2;
height: 1px;
pointer-events: none;
}
}
.item-heading:first-child {
background: $color-gray-3;
border-radius: $border-radius $border-radius 0 0;
}
}
label.item{
@@ -124,15 +135,6 @@ label.item{
}
}
.section {
.item-heading:first-child {
background: $color-gray-3;
border-radius: $border-radius $border-radius 0 0;
}
}
strong {
@include font-pfdin(medium);
color: $color-orange;
src/styles/items/_color.scss
+3 -3
View File
@@ -3,9 +3,9 @@
.item-color {
.value {
width: 1.8rem;
height: 1rem;
border-radius: 1rem;
width: $small-component-width;
height: $base-height;
border-radius: $base-height / 2;
box-shadow: $box-shadow-small-components;
}
src/styles/items/_input.scss
+13 -17
View File
@@ -4,34 +4,30 @@
.item-input {
.input {
margin-left: 1rem;
position: relative;
min-width: 50%;
&:before {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: -0.4rem;
height: 0;
border-bottom: 1px solid $color-gray-5;
.label {
padding-bottom: $item-spacing-v;
}
.input {
position: relative;
min-width: 100%;
margin-top: $item-spacing-v;
margin-left: 0;
}
input {
display:inline-block;
display:block;
width: 100%;
background: transparent;
background: $color-gray-2;
border-radius: $border-radius;
padding: $item-spacing-v / 2 $item-spacing-h / 2;
border: none;
padding: 0;
vertical-align: baseline;
color: $color-white;
font-size: inherit;
@include placeholder {
color: $color-gray-8;
}
src/styles/items/_toggle.scss
+4 -4
View File
@@ -2,9 +2,9 @@
.item-toggle {
$slide-height: 0.75rem;
$slide-width: $slide-height * 2.4;
$marker-diameter: 1rem;
$slide-height: $base-height * 0.75;
$slide-width: $small-component-width;
$marker-diameter: $base-height;
input {
display: none; // @todo make sure this doesnt mess up interactivity on iOS
@@ -27,7 +27,7 @@
background: $color-gray-10;
width: $marker-diameter;
height: $marker-diameter;
border-radius: 50%;
border-radius: $marker-diameter;
position: absolute;
left: 0;
display: block;
src/styles/partials/_mixins.scss
+8
View File
@@ -1,3 +1,5 @@
@import "vars";
@mixin font-pfdin($weight: normal) {
font-weight: normal;
@@ -25,3 +27,9 @@
top: 0.05rem;
line-height: 0.9;
}
@mixin font-size($size: 1) {
$font-size: $size * 1rem;
font-size:$font-size;
line-height: $base-line-height * ceil($font-size / $base-line-height);
}
src/styles/partials/_vars.scss
+12 -5
View File
@@ -1,7 +1,17 @@
@import "../vendor/bourbon/bourbon";
// Bourbon settings
$em-base: 18px;
$em-base: 17px;
// custom vars
$base-line-height: 1.4;
$base-height: rem($base-line-height * $em-base);
$border-radius: 0.25rem;
$item-spacing-v: $base-height / 2;
$item-spacing-h: 0.75rem;
$small-component-width: $base-height * $golden;
// ---- Colors ------
$color-orange: #ff4700;
@@ -24,10 +34,7 @@ $color-gray-9: #a4a4a4 ;
$color-gray-10: #ececec;
$color-gray-11: #f2f2f2;
// custom vars
$border-radius: 0.25rem;
$item-spacing-v: 1.5rem;
$item-spacing-h: 0.75rem;
$global-margin: 55px;