mirror of
https://github.com/pebble-dev/clay.git
synced 2026-09-02 15:17:44 -04:00
styling for input, toggle, color, select and button.
This commit is contained in:
Keegan
@@ -0,0 +1,197 @@
|
||||
@import "vendor/bourbon/bourbon";
|
||||
@import "partials/vars";
|
||||
@import "partials/mixins";
|
||||
|
||||
html, body {
|
||||
@include font-pfdin(regular);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $em-base;
|
||||
line-height: 1;
|
||||
height:100%;
|
||||
color: $color-white;
|
||||
|
||||
//&.platform-ios {
|
||||
// font-size: 13px;
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-gray-2;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
text-transform: uppercase;
|
||||
@include font-pfdin(medium);
|
||||
@include pfdin-uppercase();
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding-bottom: $item-spacing-v / 2;
|
||||
|
||||
.input {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
&.invalid .input:after {
|
||||
$size: 1.1rem;
|
||||
|
||||
content: "!";
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
background: $color-orange;
|
||||
border-radius: $size / 2;
|
||||
width: $size;
|
||||
text-align: center;
|
||||
height: $size;
|
||||
font-size: $size * 0.75;
|
||||
vertical-align: middle;
|
||||
line-height: $size;
|
||||
box-shadow: $box-shadow-small-components;
|
||||
@include font-pfdin(medium);
|
||||
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;
|
||||
padding-right: $item-spacing-h;
|
||||
padding-left: $item-spacing-h;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $item-spacing-v /2 ;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: $item-spacing-v / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.item{
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-gray-8;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: block;
|
||||
width:100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
.section & .item {
|
||||
display: table;
|
||||
width:100%;
|
||||
|
||||
.label,
|
||||
.input {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
.input:after {
|
||||
content: "!";
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
background: $color-orange;
|
||||
border-radius: $border-radius;
|
||||
width: 1.2em;
|
||||
text-align: center;
|
||||
height: 1.2em;
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
line-height: 1.3em;
|
||||
margin-left: -0.7em;
|
||||
position:absolute;
|
||||
@include font-pfdin(regular);
|
||||
}
|
||||
|
||||
.input input {
|
||||
color: $color-orange;
|
||||
padding-right: 1em;
|
||||
|
||||
@include placeholder {
|
||||
color: $color-orange;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,303 +0,0 @@
|
||||
@import "vendor/bourbon/bourbon";
|
||||
@import "partials/vars";
|
||||
@import "partials/mixins";
|
||||
|
||||
html, body {
|
||||
@include font-pfdin(regular);
|
||||
font-size: $em-base;
|
||||
height:100%;
|
||||
color: $color-white;
|
||||
|
||||
&.platform-ios {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-grey-darker;
|
||||
}
|
||||
|
||||
strong {
|
||||
@include font-pfdin(medium);
|
||||
color: $color-orange;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
input[type="submit"] {
|
||||
@include font-pfdin(medium);
|
||||
text-transform: uppercase;
|
||||
background-color: $color-grey-medium;
|
||||
border-radius: rem($border-radius);
|
||||
font-size: rem(18px);
|
||||
line-height: rem($button-line-height);
|
||||
border: none;
|
||||
display: block;
|
||||
|
||||
color: $color-white;
|
||||
margin: 0 auto rem(12px);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@include user-select(none);
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
padding: rem($button-padding);
|
||||
.platform-ios & {
|
||||
padding: rem($button-padding-ios);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $color-grey-dark;
|
||||
color: $color-grey-lighter;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background-color: $color-grey-lighter;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background-color: $color-orange;
|
||||
|
||||
&:disabled {
|
||||
background-color: darken($color-orange, 20%);
|
||||
color: $color-grey-lighter;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background-color: $color-red;
|
||||
}
|
||||
}
|
||||
|
||||
&.light-grey {
|
||||
background-color: $color-grey-light;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-grey-lighter;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: block;
|
||||
width:100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: rem(20px);
|
||||
|
||||
@include font-pfdin(light);
|
||||
|
||||
label {
|
||||
display: table-row;
|
||||
|
||||
.label,
|
||||
.input {
|
||||
display: table-cell;
|
||||
padding: rem(13px) rem(10px) rem(13px) rem(5px);
|
||||
font-size: rem(21px);
|
||||
border-bottom: $border-standard;
|
||||
position:relative;
|
||||
|
||||
&.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: rem(21px);
|
||||
@include font-pfdin(light);
|
||||
color: $color-white;
|
||||
|
||||
@include placeholder {
|
||||
color: $color-grey-lighter;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include placeholder {
|
||||
color: $color-grey-dark;
|
||||
}
|
||||
border: none;
|
||||
box-shadow: none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .label,
|
||||
&:last-child .input {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:first-child .label,
|
||||
&:first-child .input {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:only-child .label,
|
||||
&:only-child .input {
|
||||
border-bottom: $border-standard;
|
||||
border-top: $border-standard;
|
||||
padding-top: rem(13px);
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
.input:after {
|
||||
content: "!";
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
background: $color-orange;
|
||||
border-radius: 0.6em;
|
||||
width: 1.2em;
|
||||
text-align: center;
|
||||
height: 1.2em;
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
line-height: 1.3em;
|
||||
margin-left: -0.7em;
|
||||
position:absolute;
|
||||
@include font-pfdin(regular);
|
||||
}
|
||||
|
||||
.input input {
|
||||
color: $color-orange;
|
||||
padding-right: 1em;
|
||||
|
||||
@include placeholder {
|
||||
color: $color-orange;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.view-inner-container {
|
||||
// @include display(flex);
|
||||
// @include flex-direction(column);
|
||||
// @include flex-wrap(nowrap);
|
||||
// @include align-content(stretch);
|
||||
height:100%;
|
||||
width:100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
// @include flex-grow(1);
|
||||
// @include display(flex);
|
||||
// @include flex-direction(column);
|
||||
// @include flex-wrap(nowrap);
|
||||
// @include justify-content(center);
|
||||
height: 100%;
|
||||
display: table-row;
|
||||
|
||||
form {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: rem($global-margin/2) rem($form-margin);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding: 0 rem($global-margin - $form-margin);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
|
||||
text-align: center;
|
||||
font-size: rem(14px);
|
||||
line-height: 1;
|
||||
|
||||
.privacy-policy-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
|
||||
text-align: center;
|
||||
margin: 0 auto rem(25px);
|
||||
color: $color-grey-lightest;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
//
|
||||
//html, body {
|
||||
// height: 100%;
|
||||
// margin: 0;
|
||||
//}
|
||||
//
|
||||
//.hide {
|
||||
// display:none;
|
||||
//}
|
||||
//.item-styled-color .value {
|
||||
// box-sizing: border-box;
|
||||
// height: 26px;
|
||||
//}
|
||||
//
|
||||
//.item-container {
|
||||
// margin-top: 0;
|
||||
// padding-top: 15px;
|
||||
//}
|
||||
//
|
||||
//input[type="button"]:disabled {
|
||||
// background-color: #ccc;
|
||||
//}
|
||||
//
|
||||
//#cancel-btn {
|
||||
// background-color: #444;
|
||||
//}
|
||||
//
|
||||
//#cancel-btn,
|
||||
//#save-btn {
|
||||
// width: 45%;
|
||||
//}
|
||||
//
|
||||
//#main-form {
|
||||
// min-height: 100%;
|
||||
// /* equal to footer height */
|
||||
// margin-bottom: -1.5rem;
|
||||
//}
|
||||
//
|
||||
//#main-form:after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// padding-top: 2rem;
|
||||
//}
|
||||
//
|
||||
//footer, #main-form:after {
|
||||
// height: 1.5rem;
|
||||
//}
|
||||
//
|
||||
//footer {
|
||||
// display: block;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
//}
|
||||
//
|
||||
//.item {
|
||||
// display: table;
|
||||
// width:100%;
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
@@ -1,6 +1,11 @@
|
||||
@import "partials/vars";
|
||||
@import "partials/mixins";
|
||||
@import "partials/reset";
|
||||
@import "fonts";
|
||||
@import "base";
|
||||
|
||||
@import "items/color";
|
||||
@import "items/toggle";
|
||||
@import "items/input";
|
||||
@import "items/select";
|
||||
@import "items/button";
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
@import "../partials/vars";
|
||||
|
||||
.item-button {
|
||||
}
|
||||
|
||||
|
||||
button,
|
||||
.button {
|
||||
@include font-pfdin(medium);
|
||||
text-transform: uppercase;
|
||||
background-color: $color-gray-4;
|
||||
border-radius: $border-radius;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
display: block;
|
||||
|
||||
color: $color-white;
|
||||
min-width: 12rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
padding: $button-padding;
|
||||
|
||||
.platform-ios & {
|
||||
padding: $button-padding-ios;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $color-gray-3;
|
||||
color: $color-gray-8;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background-color: $color-gray-8;
|
||||
}
|
||||
|
||||
&.orange, &[type="submit"] {
|
||||
background-color: $color-orange;
|
||||
|
||||
&:disabled {
|
||||
background-color: $color-orange-dark;
|
||||
color: $color-gray-3;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background-color: $color-red;
|
||||
}
|
||||
}
|
||||
|
||||
&.light-grey {
|
||||
background-color: $color-gray-5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@import "../partials/vars";
|
||||
|
||||
.item-color {
|
||||
|
||||
.value {
|
||||
width: 1.8rem;
|
||||
height: 1rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: $box-shadow-small-components;
|
||||
}
|
||||
|
||||
.picker-wrap {
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
padding: 1rem;
|
||||
background: rgba(0,0,0,0.7);
|
||||
opacity: 0;
|
||||
transition: opacity 70ms ease-in 175ms;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
|
||||
.picker {
|
||||
padding: 1rem;
|
||||
background: $color-gray-11;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.show {
|
||||
transition-delay: 0ms;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.color-box-wrap {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0; // overridden with inline style
|
||||
margin: 0.6em 0 0em;
|
||||
|
||||
.color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.color-box {
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
&.rounded-tl {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-tr {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-bl {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-br {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
transform: scale(1.15);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: #111 0 0 0.24rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import "../partials/vars";
|
||||
@import "../partials/mixins";
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
color: $color-white;
|
||||
font-size: inherit;
|
||||
|
||||
|
||||
@include placeholder {
|
||||
color: $color-gray-8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include placeholder {
|
||||
color: $color-gray-6;
|
||||
}
|
||||
border: none;
|
||||
box-shadow: none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@import "../vendor/bourbon/bourbon";
|
||||
@import "../partials/vars";
|
||||
|
||||
.item-select {
|
||||
position: relative;
|
||||
|
||||
.value {
|
||||
$triangle-size: 0.85rem;
|
||||
position: relative;
|
||||
padding-right: $triangle-size + 0.25rem;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -0.1rem;
|
||||
@include triangle($triangle-size, $color-gray-10, down);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import "../partials/vars";
|
||||
|
||||
.item-toggle {
|
||||
|
||||
$slide-height: 0.75rem;
|
||||
$slide-width: $slide-height * 2.4;
|
||||
$marker-diameter: 1rem;
|
||||
|
||||
input {
|
||||
display: none; // @todo make sure this doesnt mess up interactivity on iOS
|
||||
}
|
||||
|
||||
.graphic {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.slide {
|
||||
display:block;
|
||||
border-radius: $slide-height;
|
||||
height: $slide-height;
|
||||
width: $slide-width;
|
||||
background: $color-gray-1;
|
||||
transition: background-color 150ms linear;
|
||||
}
|
||||
|
||||
.marker {
|
||||
background: $color-gray-10;
|
||||
width: $marker-diameter;
|
||||
height: $marker-diameter;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: block;
|
||||
top: ($marker-diameter - $slide-height) / 2 * -1;
|
||||
transition: transform 150ms linear;
|
||||
box-shadow: $box-shadow-small-components;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .graphic {
|
||||
.slide {
|
||||
background: $color-orange-dark;
|
||||
}
|
||||
|
||||
.marker {
|
||||
background: $color-orange;
|
||||
transform: translateX($slide-width - $marker-diameter);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
@import "../partials/vars";
|
||||
|
||||
.item-color {
|
||||
|
||||
.picker {
|
||||
}
|
||||
|
||||
.value {
|
||||
width: rem(10px);
|
||||
border-color: $color-grey-medium;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.color-box-wrap {
|
||||
display:none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0; // overridden with inline style
|
||||
margin: 0.6em 0 0em;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.color-box {
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
|
||||
&.rounded-tl {
|
||||
border-top-left-radius: rem($border-radius);
|
||||
}
|
||||
|
||||
&.rounded-tr {
|
||||
border-top-right-radius: rem($border-radius);
|
||||
}
|
||||
|
||||
&.rounded-bl {
|
||||
border-bottom-left-radius: rem($border-radius);
|
||||
}
|
||||
|
||||
&.rounded-br {
|
||||
border-bottom-right-radius: rem($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,21 +2,26 @@
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
@if $weight == light {
|
||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
||||
}
|
||||
|
||||
@if $weight == normal or $weight == regular {
|
||||
font-family: 'PFDinDisplayPro-Regular', PFDinDisplayProRegularWebfont, sans-serif;
|
||||
}
|
||||
|
||||
@if $weight == medium {
|
||||
// iOS includes the PFDinDisplayPro-Medium in the webview but Android does not,
|
||||
// so we apply a faux bold on the regular weight.
|
||||
font-family: 'PFDinDisplayPro-Medium', PFDinDisplayProRegularWebfont, sans-serif;
|
||||
|
||||
.platform-android & {
|
||||
font-family: PFDinDisplayProLightWebfont, sans-serif;
|
||||
font-family: PFDinDisplayProRegularWebfont, sans-serif;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.03em;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pfdin-uppercase {
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
top: 0.05rem;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
@@ -50,11 +50,9 @@ q:before, q:after {
|
||||
|
||||
/* apply a natural box layout model to all elements, but allowing components to change */
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
-webkit-box-sizing: inherit;
|
||||
}
|
||||
|
||||
@@ -1,37 +1,40 @@
|
||||
@import "../vendor/bourbon/bourbon";
|
||||
|
||||
// Bourbon settings
|
||||
$em-base: 16px;
|
||||
$em-base: 18px;
|
||||
|
||||
// ---- Colors ------
|
||||
$color-orange: #ff4700;
|
||||
$color-orange-dark: #993d19;
|
||||
$color-red: #ff0000;
|
||||
$color-white: #ffffff;
|
||||
$color-borders: #5c5c5c;
|
||||
$color-black: #000000;
|
||||
|
||||
// background color
|
||||
$color-grey-darker: #333333;
|
||||
|
||||
// secondary background
|
||||
$color-grey-dark: #484848;
|
||||
|
||||
//buttons
|
||||
$color-grey-medium: #666666;
|
||||
$color-grey-light: #767676;
|
||||
$border-radius: 4px;
|
||||
|
||||
// used for fonts
|
||||
$color-grey-lighter: #848484;
|
||||
$color-grey-lightest: #adadad;
|
||||
|
||||
$color-gray-0: #111111;
|
||||
$color-gray-1: #2f2f2f;
|
||||
$color-gray-2: #333333;
|
||||
$color-gray-3: #414141;
|
||||
$color-gray-4: #484848; // divider
|
||||
$color-gray-5: #5b5b5b;
|
||||
$color-gray-6: #666666;
|
||||
$color-gray-7: #767676;
|
||||
$color-gray-8: #858585;
|
||||
$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;
|
||||
$form-margin: 25px;
|
||||
$button-padding: 18px;
|
||||
$button-padding-ios: 16px;
|
||||
$button-padding: 0.7rem;
|
||||
$button-padding-ios: 0.6rem;
|
||||
$button-line-height: 13px;
|
||||
$footer-height-large: 90px;
|
||||
|
||||
$border-standard: 1px solid $color-borders;
|
||||
|
||||
$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
|
||||
|
||||
Reference in New Issue
Block a user