b2fd38a1c8
After moving the padding to the content of buttons, we ended up with extra padding around text buttons that wasn't there before. The "Download" bar doesn't look great with no padding at all, but it needs to match the text buttons so the text doesn't jump to the right when it switches from "Download" (text button) to "Connecting" (progress bar). So we pad both text buttons and progress bars just a little bit, less than a standard button but enough that progress bars look OK.
152 lines
No EOL
3.3 KiB
SCSS
152 lines
No EOL
3.3 KiB
SCSS
@charset "UTF-8";
|
|
|
|
$spacing-vertical: 24px;
|
|
|
|
$padding-button: 12px;
|
|
$padding-text-link: 4px;
|
|
|
|
$color-primary: #155B4A;
|
|
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
|
$color-text-dark: #000;
|
|
$color-help: rgba(0,0,0,.6);
|
|
$color-notice: #921010;
|
|
$color-canvas: #f5f5f5;
|
|
$color-bg: #ffffff;
|
|
$color-bg-alt: #D9D9D9;
|
|
$color-money: #216C2A;
|
|
$color-meta-light: #505050;
|
|
|
|
$font-size: 16px;
|
|
$font-line-height: 1.3333;
|
|
|
|
$mobile-width-threshold: 801px;
|
|
$max-content-width: 1000px;
|
|
$max-text-width: 660px;
|
|
|
|
$height-header: $spacing-vertical * 2.5;
|
|
$height-button: $spacing-vertical * 1.5;
|
|
|
|
$default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
|
|
|
$blur-intensity: 8px;
|
|
|
|
@mixin clearfix()
|
|
{
|
|
&:before, &:after
|
|
{
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
&:after
|
|
{
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin border-radius($radius)
|
|
{
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
-ms-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
@mixin placeholder-color($color) {
|
|
/*do not group these it breaks because CSS*/
|
|
&:-moz-placeholder {
|
|
color: $color;
|
|
}
|
|
&::-moz-placeholder {
|
|
color: $color;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: $color;
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
@mixin display-flex()
|
|
{
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
@mixin flex($columns)
|
|
{
|
|
-webkit-flex: $columns;
|
|
-moz-flex: $columns;
|
|
-ms-flex: $columns;
|
|
flex: $columns;
|
|
}
|
|
|
|
@mixin flex-flow($flow) {
|
|
-webkit-flex-flow: $flow;
|
|
-moz-flex-flow: $flow;
|
|
-ms-flex-flow: $flow;
|
|
flex-flow: $flow;
|
|
}
|
|
|
|
@mixin flex-direction($direction) {
|
|
-webkit-flex-direction: $direction;
|
|
-moz-flex-direction: $direction;
|
|
-ms-flex-direction: $direction;
|
|
flex-direction: $direction;
|
|
}
|
|
|
|
@mixin absolute-center()
|
|
{
|
|
@include display-flex();
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-moz-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin linear-gradient($from-color, $to-color) {
|
|
background-color: $to-color; /* Fallback Color */
|
|
background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
|
background-image: -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
|
|
background-image: -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
|
|
background-image: linear-gradient(top, $from-color, $to-color);
|
|
}
|
|
|
|
@mixin box-sizing( $type: border-box ) {
|
|
-webkit-box-sizing: $type;
|
|
-moz-box-sizing: $type;
|
|
-o-box-sizing: $type;
|
|
-ms-box-sizing: $type;
|
|
box-sizing: $type;
|
|
}
|
|
|
|
@mixin background-size ($size) {
|
|
-webkit-background-size: $size;
|
|
-moz-background-size: $size;
|
|
-o-background-size: $size;
|
|
background-size: $size;
|
|
}
|
|
|
|
@mixin placeholder {
|
|
&::-webkit-input-placeholder {@content}
|
|
&:-moz-placeholder {@content}
|
|
&:-ms-input-placeholder {@content}
|
|
}
|
|
|
|
@mixin offscreen() {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top:auto;
|
|
width:1px;
|
|
height:1px;
|
|
overflow:hidden;
|
|
} |