whitespace

This commit is contained in:
captainill 2015-11-10 13:58:56 -08:00
parent 2c9f1cf791
commit a77fed8876
12 changed files with 1295 additions and 1296 deletions

View File

@ -3,49 +3,49 @@
// -------------------------------------------------- // --------------------------------------------------
.bs-api-section dl, dl.api { .bs-api-section dl, dl.api {
margin-top: 30px; margin-top: 30px;
line-height: 20px; line-height: 20px;
dt { dt {
color: #888;
text-transform: uppercase;
font-weight: normal;
float: left;
width: 150px;
text-align: right;
}
dd {
margin-left: 170px;
pre.api-sample {
margin-top: 20px;
font-size: 14px;
padding: 10px;
}
}
ul {
margin: 0;
padding: 0;
li {
margin: 0;
list-style-type: none;
padding-bottom: 20px;
font-size: 15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
span.param {
font-weight: bold;
}
span.param-flags {
font-style: italic;
color: #888; color: #888;
text-transform: uppercase; padding-right: 6px;
font-weight: normal; }
float: left;
width: 150px;
text-align: right;
}
dd {
margin-left: 170px;
pre.api-sample {
margin-top: 20px;
font-size: 14px;
padding: 10px;
}
}
ul {
margin: 0;
padding: 0;
li {
margin: 0;
list-style-type: none;
padding-bottom: 20px;
font-size: 15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
span.param {
font-weight: bold;
}
span.param-flags {
font-style: italic;
color: #888;
padding-right: 6px;
}
}
} }
}
} }

View File

@ -3,117 +3,117 @@
// -------------------------------------------------- // --------------------------------------------------
.h-btn{ .h-btn{
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;
color: $black; color: $black;
@include transition(color .3s ease-in-out); @include transition(color .3s ease-in-out);
//@include btn-shadow(); //@include btn-shadow();
font-family: $font-family-blanc-reg; font-family: $font-family-blanc-reg;
text-transform: uppercase; text-transform: uppercase;
border-radius: 3px; border-radius: 3px;
&.has-caret{ &.has-caret{
span.h-caret{ span.h-caret{
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 12px; height: 12px;
margin-left: 10px; margin-left: 10px;
@include transition(all 300ms ease-in); @include transition(all 300ms ease-in);
} }
} }
&.lrg{ &.lrg{
font-size: $font-size-reg; font-size: $font-size-reg;
padding: 10px 24px; padding: 10px 24px;
} }
&.sml{ &.sml{
padding: 8px 14px; padding: 8px 14px;
font-size: $font-size-reg - 2; font-size: $font-size-reg - 2;
line-height: 14px; line-height: 14px;
&.has-caret{ &.has-caret{
span.h-caret{ span.h-caret{
background-size: 6px 9px !important; background-size: 6px 9px !important;
margin-bottom: -2px; margin-bottom: -2px;
margin-right: -3px; margin-right: -3px;
} }
} }
} }
&.light{ &.light{
color: $green-light; color: $green-light;
&.has-border{ &.has-border{
border: 2px solid $green-light; border: 2px solid $green-light;
} }
&.has-caret{ &.has-caret{
span.h-caret{ span.h-caret{
background: image-url('../images/caret-light.png') 0 0 no-repeat; background: image-url('../images/caret-light.png') 0 0 no-repeat;
@include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px); @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px);
} }
} }
} }
&.green{ &.green{
color: $green; color: $green;
&.has-border{ &.has-border{
border: 2px solid $green; border: 2px solid $green;
} }
span.h-caret{ span.h-caret{
background: image-url('../images/caret-green.png') 0 0 no-repeat; background: image-url('../images/caret-green.png') 0 0 no-repeat;
@include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px); @include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px);
} }
&.fill{ &.fill{
background-color: $green; background-color: $green;
color: $white; color: $white;
span.h-caret{ span.h-caret{
background: image-url('../images/caret-white.png') 0 0 no-repeat; background: image-url('../images/caret-white.png') 0 0 no-repeat;
@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
} }
} }
} }
&.gray{ &.gray{
color: $blue-light; color: $blue-light;
&.border{ &.border{
border: 2px solid $blue-light; border: 2px solid $blue-light;
} }
&.fill{ &.fill{
background-color: $blue-light; background-color: $blue-light;
color: $white; color: $white;
span.h-caret{ span.h-caret{
background: image-url('../images/caret-white.png') 0 0 no-repeat; background: image-url('../images/caret-white.png') 0 0 no-repeat;
@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
} }
} }
} }
&.dark{ &.dark{
color: $green-dark; color: $green-dark;
&.border{ &.border{
border: 2px solid $green-dark; border: 2px solid $green-dark;
} }
} }
&:hover{ &:hover{
text-decoration: none; text-decoration: none;
@include transition(color 200ms ease-in); @include transition(color 200ms ease-in);
&.has-caret{ &.has-caret{
span.h-caret{ span.h-caret{
@include translate(4px, 0); @include translate(4px, 0);
@include transition(all 200ms ease-in); @include transition(all 200ms ease-in);
} }
} }
} }
} }

View File

@ -1,21 +1,21 @@
.people { .people {
margin-top: 30px; margin-top: 30px;
.person { .person {
margin-bottom: 40px; margin-bottom: 40px;
h3 { h3 {
color: $blue-dark; color: $blue-dark;
text-transform: none; text-transform: none;
}
img {
width: 125px;
margin: auto auto;
}
.bio {
padding-left: 150px;
}
} }
img {
width: 125px;
margin: auto auto;
}
.bio {
padding-left: 150px;
}
}
} }

View File

@ -17,266 +17,266 @@ body.layout-docs,
body.layout-inner, body.layout-inner,
body.layout-downloads, body.layout-downloads,
body.layout-intro{ body.layout-intro{
//background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
>.container{ >.container{
.col-md-8[role=main]{ .col-md-8[role=main]{
min-height: 800px; min-height: 800px;
background-color: white; background-color: white;
>div{ >div{
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
} }
} }
} }
.docs-sidebar{ .docs-sidebar{
position: relative; position: relative;
z-index: 20; z-index: 20;
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 50px; margin-top: 50px;
@include open(); @include open();
.nav.docs-sidenav{ .nav.docs-sidenav{
padding-bottom: 15px; padding-bottom: 15px;
:last-child{ :last-child{
border-bottom: none; border-bottom: none;
} }
//all li //all li
li{ li{
position: relative; position: relative;
> a{ > a{
padding: 10px 8px; padding: 10px 8px;
font-size: 15px; font-size: 15px;
color: $blue-dark; color: $blue-dark;
&:before{ &:before{
@include bez-1-transition(); @include bez-1-transition();
}
&:hover{
background-color: transparent !important;
&:before{
@include bez-1-transition();
}
}
}
}
$parent-active-state: -14px;
$parent-default-state: -10px;
$child-active-state: -4px;
$child-default-state: 0px;
//first teir li
> li {
margin: 0 0 0 10px;
&.active {
>a{
color: $green-dark;
font-weight: 600;
border-right: 1px solid $green-faint;
&:hover{
&:before{
left: $parent-default-state;
}
}
&:before{
@include rotate(90deg);
opacity: 1;
}
}
.nav {
display: block;
}
}
> a {
-webkit-font-smoothing: antialiased;
&:hover{
&:before{
left: $parent-active-state;
}
}
&:before{
content: '';
position: absolute;
width: 8px;
height: 12px;
top: 15px;
left: $parent-default-state;
overflow: hidden;
background: url(../images/caret-green.png) 0 0 no-repeat;
opacity: .3;
@include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px);
}
}
}
//nested ul.nav
.nav {
display: none;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
border-right: 1px solid $green-faint;
border-bottom: 1px solid $green-faint;
> li{
margin-left: 10px;
&.active{
> a{
color: $green-dark;
font-weight: 600;
&:hover{
&:before{
left: $child-default-state;
}
}
&:before{
//background: url(../images/triangle-sprite.png) 0 0 no-repeat;
//@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
}
}
}
> a{
-webkit-font-smoothing: antialiased;
padding: 6px 15px;
&:hover{
&:before{
left: $child-active-state;
}
}
&:before{
opacity: .75;
content: '';
position: absolute;
width: 5px;
height: 7px;
top: 12px;
left: $child-default-state;
overflow: hidden;
//background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
//@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
}
}
}
}
.nav-visible {
display: block;
} }
}
&:hover{
background-color: transparent !important;
&:before{
@include bez-1-transition();
}
}
}
}
$parent-active-state: -14px;
$parent-default-state: -10px;
$child-active-state: -4px;
$child-default-state: 0px;
//first teir li
> li {
margin: 0 0 0 10px;
&.active {
>a{
color: $green-dark;
font-weight: 600;
border-right: 1px solid $green-faint;
&:hover{
&:before{
left: $parent-default-state;
}
}
&:before{
@include rotate(90deg);
opacity: 1;
}
}
.nav {
display: block;
}
}
> a {
-webkit-font-smoothing: antialiased;
&:hover{
&:before{
left: $parent-active-state;
}
}
&:before{
content: '';
position: absolute;
width: 8px;
height: 12px;
top: 15px;
left: $parent-default-state;
overflow: hidden;
background: url(../images/caret-green.png) 0 0 no-repeat;
opacity: .3;
@include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px);
}
}
}
//nested ul.nav
.nav {
display: none;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
border-right: 1px solid $green-faint;
border-bottom: 1px solid $green-faint;
> li{
margin-left: 10px;
&.active{
> a{
color: $green-dark;
font-weight: 600;
&:hover{
&:before{
left: $child-default-state;
}
}
&:before{
//background: url(../images/triangle-sprite.png) 0 0 no-repeat;
//@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
}
}
}
> a{
-webkit-font-smoothing: antialiased;
padding: 6px 15px;
&:hover{
&:before{
left: $child-active-state;
}
}
&:before{
opacity: .75;
content: '';
position: absolute;
width: 5px;
height: 7px;
top: 12px;
left: $child-default-state;
overflow: hidden;
//background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
//@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
}
}
}
}
.nav-visible {
display: block;
}
}
} }
.bs-docs-section{ .bs-docs-section{
padding-top: 10px; padding-top: 10px;
padding-left: 3%; padding-left: 3%;
padding-bottom: 160px; padding-bottom: 160px;
.lead{ .lead{
margin-bottom: 48px margin-bottom: 48px
} }
.doc-sectional{ .doc-sectional{
margin-bottom: 48px; margin-bottom: 48px;
} }
p, li, .alert { p, li, .alert {
color: $blue-dark; color: $blue-dark;
font-size: 18px; font-size: 18px;
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
line-height: 1.84em; line-height: 1.84em;
margin: 0 0 18px; margin: 0 0 18px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
pre{ pre{
margin: 0 0 18px; margin: 0 0 18px;
}
a{
color: $green-dark;
border-bottom: 1px solid $green-dark;
@include transition(all 300ms ease-in);
&:hover{
color: $blue-dark;
border-bottom: 2px solid $blue-dark;
text-decoration: none;
@include transition(all 300ms ease-in);
} }
}
a{ img{
color: $green-dark; max-width: 650px;
border-bottom: 1px solid $green-dark; margin-top: 25px;
@include transition(all 300ms ease-in); margin-bottom: 25px;
}
&:hover{ h1, .h1, h2, .h2, h3, .h3, h4, .h4{
color: $blue-dark; color: $gray-dark;
border-bottom: 2px solid $blue-dark; margin-top: 54px;
text-decoration: none; margin-bottom: 18px;
@include transition(all 300ms ease-in); @include open-sb();
} }
}
img{ h1{
max-width: 650px; font-size: 36px;
margin-top: 25px; }
margin-bottom: 25px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4{ #graph {
color: $gray-dark; margin-top: 30px;
margin-top: 54px; }
margin-bottom: 18px;
@include open-sb();
}
h1{
font-size: 36px;
}
#graph {
margin-top: 30px;
}
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.bs-docs-section{ .bs-docs-section{
padding-left: 0; padding-left: 0;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.bs-docs-section{ .bs-docs-section{
padding-top: 0; padding-top: 0;
h1{ h1{
margin-top: 0; margin-top: 0;
} }
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.bs-docs-section{ .bs-docs-section{
img{ img{
max-width: 450px; max-width: 450px;
} }
h1{ h1{
font-size: 32px; font-size: 32px;
} }
} }
} }

View File

@ -1,59 +1,59 @@
.downloads { .downloads {
margin-top: 20px;
.description {
margin-bottom: 20px;
}
.download {
border-bottom: 1px solid #b2b2b2;
padding-bottom: 15px;
margin-top: 10px;
margin-bottom: 10px;
.details {
padding-left: 95px;
h2 {
margin-top: 30px;
}
ul {
padding-left: 0px;
}
li {
display: inline-block;
&:after {
content: " | ";
}
&:last-child:after {
content: "";
}
}
}
.icon {
img {
width: 75px;
}
}
.os-name {
font-size: 40px;
margin-bottom: -3px;
}
}
.poweredby {
margin-top: 20px; margin-top: 20px;
.description { img {
margin-bottom: 20px; display: block;
} margin: 0 auto;
width: 122px;
.download {
border-bottom: 1px solid #b2b2b2;
padding-bottom: 15px;
margin-top: 10px;
margin-bottom: 10px;
.details {
padding-left: 95px;
h2 {
margin-top: 30px;
}
ul {
padding-left: 0px;
}
li {
display: inline-block;
&:after {
content: " | ";
}
&:last-child:after {
content: "";
}
}
}
.icon {
img {
width: 75px;
}
}
.os-name {
font-size: 40px;
margin-bottom: -3px;
}
}
.poweredby {
margin-top: 20px;
img {
display: block;
margin: 0 auto;
width: 122px;
}
} }
}
} }

View File

@ -3,115 +3,115 @@
// -------------------------------------------------- // --------------------------------------------------
/*html{ /*html{
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
}*/ }*/
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: $black; color: $black;
background-color: $white; background-color: $white;
font-size: 15px; font-size: 15px;
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 500; font-weight: 500;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
h1{ h1{
font-size: 42px; font-size: 42px;
line-height: 42px; line-height: 42px;
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
margin-bottom: 24px; margin-bottom: 24px;
} }
h3, h4{ h3, h4{
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
} }
//an alternative color for buttons in the doc body //an alternative color for buttons in the doc body
.btn-serf{ .btn-serf{
color: $white !important; color: $white !important;
background-color: $btn-color; background-color: $btn-color;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
//@include box-shadow( $shadow ); //@include box-shadow( $shadow );
} }
.highlight{ .highlight{
margin-bottom: 18px; margin-bottom: 18px;
} }
pre { pre {
background-color: $black; background-color: $black;
color: $white; color: $white;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
border: none; border: none;
padding: 20px; padding: 20px;
margin-bottom: 0; margin-bottom: 0;
} }
//all below styles are overriding corrections for below (min-width: 992px) //all below styles are overriding corrections for below (min-width: 992px)
//below (min-width: 992px) these styles change //below (min-width: 992px) these styles change
.navbar-nav { .navbar-nav {
margin: 0; margin: 0;
} }
.navbar-right { .navbar-right {
float: right !important; float: right !important;
} }
.navbar-nav > li { .navbar-nav > li {
float: left; float: left;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
.center { .center {
text-align: center; text-align: center;
} }
//fixed grid below 992 to prevent smaller responsive sizes //fixed grid below 992 to prevent smaller responsive sizes
@media (max-width: 992px) { @media (max-width: 992px) {
.container{ .container{
max-width: 970px; max-width: 970px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
font-size: 14px; font-size: 14px;
} }
h1{ h1{
font-size: $font-size-m !important; font-size: $font-size-m !important;
line-height: $font-size-m; line-height: $font-size-m;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
margin-bottom: 24px; margin-bottom: 24px;
} }
h2{ h2{
font-size: $font-size-m !important; font-size: $font-size-m !important;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
} }
h3{ h3{
font-size: $font-size-m !important; font-size: $font-size-m !important;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
} }
h4{ h4{
font-size: $font-size-reg !important; font-size: $font-size-reg !important;
font-weight: $font-weight-reg; font-weight: $font-weight-reg;
} }
} }

View File

@ -29,7 +29,7 @@
} }
} }
} }
.buttons{ .buttons{
margin-top: 2px; //baseline everything margin-top: 2px; //baseline everything

File diff suppressed because it is too large Load Diff

View File

@ -1,38 +1,37 @@
body.livestream { body.livestream {
background-color: black; background-color: black;
} }
.livestream-container { .livestream-container {
display: block; display: block;
} }
.livestream-video { .livestream-video {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 1000px; max-width: 1000px;
} }
#live-stream-video { #live-stream-video {
margin-top: 15px; margin-top: 15px;
border: 0 none transparent; border: 0 none transparent;
width: 100%; width: 100%;
height: 650px;
@media (min-width: 1200px) {
height: 650px; height: 650px;
}
@media (min-width: 1200px) { @media (max-width: 992px) {
height: 650px; height: 500px;
} }
@media (max-width: 992px) { @media (max-width: 768px) {
height: 500px; height: 325px;
} }
@media (max-width: 768px) { @media (max-width: 422px) {
height: 325px; height: 225px;
} }
@media (max-width: 422px) {
height: 225px;
}
} }

View File

@ -86,87 +86,87 @@
// Single side border-radius // Single side border-radius
@mixin border-top-radius($radius) { @mixin border-top-radius($radius) {
border-top-right-radius: $radius; border-top-right-radius: $radius;
border-top-left-radius: $radius; border-top-left-radius: $radius;
} }
@mixin border-right-radius($radius) { @mixin border-right-radius($radius) {
border-bottom-right-radius: $radius; border-bottom-right-radius: $radius;
border-top-right-radius: $radius; border-top-right-radius: $radius;
} }
@mixin border-bottom-radius($radius) { @mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius; border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius; border-bottom-left-radius: $radius;
} }
@mixin border-left-radius($radius) { @mixin border-left-radius($radius) {
border-bottom-left-radius: $radius; border-bottom-left-radius: $radius;
border-top-left-radius: $radius; border-top-left-radius: $radius;
} }
// Drop shadows // Drop shadows
@mixin box-shadow($shadow) { @mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow; box-shadow: $shadow;
} }
// Transitions // Transitions
@mixin transition($transition) { @mixin transition($transition) {
-webkit-transition: $transition; -webkit-transition: $transition;
transition: $transition; transition: $transition;
} }
@mixin transition-delay($transition-delay) { @mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay; -webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay; transition-delay: $transition-delay;
} }
@mixin transition-duration($transition-duration) { @mixin transition-duration($transition-duration) {
-webkit-transition-duration: $transition-duration; -webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration; transition-duration: $transition-duration;
} }
@mixin transition-transform($transition) { @mixin transition-transform($transition) {
-webkit-transition: -webkit-transform $transition; -webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition; -moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition; -o-transition: -o-transform $transition;
transition: transform $transition; transition: transform $transition;
} }
// Transformations // Transformations
@mixin transform($transform...) { @mixin transform($transform...) {
-webkit-transform: $transform; -webkit-transform: $transform;
-ms-transform: $transform; -ms-transform: $transform;
transform: $transform; transform: $transform;
} }
@mixin rotate($degrees) { @mixin rotate($degrees) {
-webkit-transform: rotate($degrees); -webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees); // IE9+ -ms-transform: rotate($degrees); // IE9+
transform: rotate($degrees); transform: rotate($degrees);
} }
@mixin scale($ratio) { @mixin scale($ratio) {
-webkit-transform: scale($ratio); -webkit-transform: scale($ratio);
-ms-transform: scale($ratio); // IE9+ -ms-transform: scale($ratio); // IE9+
transform: scale($ratio); transform: scale($ratio);
} }
@mixin translate($x, $y) { @mixin translate($x, $y) {
-webkit-transform: translate($x, $y); -webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y); // IE9+ -ms-transform: translate($x, $y); // IE9+
transform: translate($x, $y); transform: translate($x, $y);
} }
@mixin skew($x, $y) { @mixin skew($x, $y) {
-webkit-transform: skew($x, $y); -webkit-transform: skew($x, $y);
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew($x, $y); transform: skew($x, $y);
} }
@mixin translate3d($x, $y, $z) { @mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z); -webkit-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z); transform: translate3d($x, $y, $z);
} }
//transform origin //transform origin
@mixin transform-origin ($origin) { @mixin transform-origin ($origin) {
moz-transform-origin: $origin; moz-transform-origin: $origin;
-o-transform-origin: $origin; -o-transform-origin: $origin;
-ms-transform-origin: $origin; -ms-transform-origin: $origin;
-webkit-transform-origin: $origin; -webkit-transform-origin: $origin;
transform-origin: $origin; transform-origin: $origin;
} }
// Backface visibility // Backface visibility
@ -175,25 +175,25 @@
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
@mixin backface-visibility($visibility) { @mixin backface-visibility($visibility) {
-webkit-backface-visibility: $visibility; -webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility; -moz-backface-visibility: $visibility;
backface-visibility: $visibility; backface-visibility: $visibility;
} }
// Box sizing // Box sizing
@mixin box-sizing($boxmodel) { @mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel; -webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel; -moz-box-sizing: $boxmodel;
box-sizing: $boxmodel; box-sizing: $boxmodel;
} }
// User select // User select
// For selecting text on the page // For selecting text on the page
@mixin user-select($select) { @mixin user-select($select) {
-webkit-user-select: $select; -webkit-user-select: $select;
-moz-user-select: $select; -moz-user-select: $select;
-ms-user-select: $select; // IE10+ -ms-user-select: $select; // IE10+
-o-user-select: $select; -o-user-select: $select;
user-select: $select; user-select: $select;
} }
// Resize anything // Resize anything
@ -205,21 +205,21 @@
// CSS3 Content Columns // CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) { @mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
-webkit-column-count: $column-count; -webkit-column-count: $column-count;
-moz-column-count: $column-count; -moz-column-count: $column-count;
column-count: $column-count; column-count: $column-count;
-webkit-column-gap: $column-gap; -webkit-column-gap: $column-gap;
-moz-column-gap: $column-gap; -moz-column-gap: $column-gap;
column-gap: $column-gap; column-gap: $column-gap;
} }
// Optional hyphenation // Optional hyphenation
@mixin hyphens($mode: auto) { @mixin hyphens($mode: auto) {
word-wrap: break-word; word-wrap: break-word;
-webkit-hyphens: $mode; -webkit-hyphens: $mode;
-moz-hyphens: $mode; -moz-hyphens: $mode;
-ms-hyphens: $mode; // IE10+ -ms-hyphens: $mode; // IE10+
-o-hyphens: $mode; -o-hyphens: $mode;
hyphens: $mode; hyphens: $mode;
} }
// Opacity // Opacity
@ -433,7 +433,7 @@
.open .dropdown-toggle& { .open .dropdown-toggle& {
color: $color; color: $color;
background-color: darken($background, 8%); background-color: darken($background, 8%);
border-color: darken($border, 12%); border-color: darken($border, 12%);
} }
&:active, &:active,
&.active, &.active,
@ -449,7 +449,7 @@
&:active, &:active,
&.active { &.active {
background-color: $background; background-color: $background;
border-color: $border border-color: $border
} }
} }
} }
@ -747,10 +747,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
@media (min--moz-device-pixel-ratio: 1.3), @media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2), (-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) { (min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */ /* on retina, use image that's scaled by 2 */
background-image: url($image); background-image: url($image);
background-size: $width $height; background-size: $width $height;

View File

@ -6,62 +6,62 @@
// //
// ------------------------- // -------------------------
@mixin anti-alias() { @mixin anti-alias() {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@mixin open-light() { @mixin open-light() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 300; font-weight: 300;
} }
@mixin open() { @mixin open() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 400; font-weight: 400;
} }
@mixin open-sb() { @mixin open-sb() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 600; font-weight: 600;
} }
@mixin open-bold() { @mixin open-bold() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 700; font-weight: 700;
} }
@mixin skewY($skew) { @mixin skewY($skew) {
-webkit-transform: skewY($skew); -webkit-transform: skewY($skew);
-moz-transform: skewY($skew); -moz-transform: skewY($skew);
-ms-transform: skewY($skew); -ms-transform: skewY($skew);
-o-transform: skewY($skew); -o-transform: skewY($skew);
transform: skewY($skew); transform: skewY($skew);
} }
@mixin v-nav-style-core{ @mixin v-nav-style-core{
color: $gray-darker; color: $gray-darker;
font-family: $font-family-blanc-reg; font-family: $font-family-blanc-reg;
font-size: 13px; font-size: 13px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.0625em; letter-spacing: 0.0625em;
} }
@mixin v-nav-style{ @mixin v-nav-style{
margin: 0 15px; margin: 0 15px;
padding: 0; padding: 0;
line-height: 22px; line-height: 22px;
@include v-nav-style-core(); @include v-nav-style-core();
@include transition( color 0.3s ease ); @include transition( color 0.3s ease );
&:hover{ &:hover{
color: $green-dark; color: $green-dark;
@include transition( color 0.3s ease ); @include transition( color 0.3s ease );
background-color: transparent; background-color: transparent;
} }
} }
@mixin bez-1-transition{ @mixin bez-1-transition{
@include transition( all 300ms ease-in-out ); @include transition( all 300ms ease-in-out );
} }
@ -90,121 +90,121 @@
} }
#demo-app .loading-bar{ #demo-app .loading-bar{
display: block; display: block;
-webkit-animation: shift-rightwards 2s ease-in-out infinite; -webkit-animation: shift-rightwards 2s ease-in-out infinite;
-moz-animation: shift-rightwards 2s ease-in-out infinite; -moz-animation: shift-rightwards 2s ease-in-out infinite;
-ms-animation: shift-rightwards 2s ease-in-out infinite; -ms-animation: shift-rightwards 2s ease-in-out infinite;
-o-animation: shift-rightwards 2s ease-in-out infinite; -o-animation: shift-rightwards 2s ease-in-out infinite;
animation: shift-rightwards 2s ease-in-out infinite; animation: shift-rightwards 2s ease-in-out infinite;
-webkit-animation-delay: .4s; -webkit-animation-delay: .4s;
-moz-animation-delay: .4s; -moz-animation-delay: .4s;
-o-animation-delay: .4s; -o-animation-delay: .4s;
animation-delay: .4s; animation-delay: .4s;
} }
.loading-bar{ .loading-bar{
position: fixed; position: fixed;
display: none; display: none;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 2px; height: 2px;
z-index: 800; z-index: 800;
background: $blue; background: $blue;
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
-moz-transform: translateX(100%); -moz-transform: translateX(100%);
-o-transform: translateX(100%); -o-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
} }
@-webkit-keyframes shift-rightwards @-webkit-keyframes shift-rightwards
{ {
0% 0%
{ {
@include translate(-100%, 0); @include translate(-100%, 0);
} }
40% 40%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
60% 60%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
100% 100%
{ {
@include translate(100%, 0); @include translate(100%, 0);
} }
} }
@-moz-keyframes shift-rightwards @-moz-keyframes shift-rightwards
{ {
0% 0%
{ {
@include translate(-100%, 0); @include translate(-100%, 0);
} }
40% 40%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
60% 60%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
100% 100%
{ {
@include translate(100%, 0); @include translate(100%, 0);
} }
} }
@-o-keyframes shift-rightwards @-o-keyframes shift-rightwards
{ {
0% 0%
{ {
@include translate(-100%, 0); @include translate(-100%, 0);
} }
40% 40%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
60% 60%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
100% 100%
{ {
@include translate(100%, 0); @include translate(100%, 0);
} }
} }
@keyframes shift-rightwards @keyframes shift-rightwards
{ {
0% 0%
{ {
@include translate(-100%, 0); @include translate(-100%, 0);
} }
40% 40%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
60% 60%
{ {
@include translate(0%, 0); @include translate(0%, 0);
} }
100% 100%
{ {
@include translate(100%, 0); @include translate(100%, 0);
} }
} }

View File

@ -6,75 +6,75 @@
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------
$header-height: 90px; $header-height: 90px;
$btn-border-radius: 4px; $btn-border-radius: 4px;
$el-border-radius: 6px; $el-border-radius: 6px;
// colors // colors
// ------------------------- // -------------------------
$white: #fff; $white: #fff;
$black: #000; $black: #000;
$gray: #929199; $gray: #929199;
$light-gray: #C2C1C7; $light-gray: #C2C1C7;
$faint-gray: #E3E3EA; $faint-gray: #E3E3EA;
$green: #56cdad; $green: #56cdad;
$green-dark: #449b82; $green-dark: #449b82;
$green-light: #9bdb9c; $green-light: #9bdb9c;
$green-faint: #E3F5E3; $green-faint: #E3F5E3;
$blue-dark: #4e5859; $blue-dark: #4e5859;
$blue-light: #89999A; $blue-light: #89999A;
$blue: #00BFE0; $blue: #00BFE0;
$blue-faint: #E0E8E8; $blue-faint: #E0E8E8;
$light-black: #242424; $light-black: #242424;
$orange: #e78c5b; $orange: #e78c5b;
$gray-dark: #3B4142; //#4e5859; $gray-dark: #3B4142; //#4e5859;
$gray: #777; $gray: #777;
$gray-light: #939393; $gray-light: #939393;
$gray-lighter: #979797; $gray-lighter: #979797;
$red: #dd4e58; $red: #dd4e58;
$red-dark: #c5454e; $red-dark: #c5454e;
$purple: #822ff7; $purple: #822ff7;
$light-purple: #f7f3f9; $light-purple: #f7f3f9;
$btn-color: #4592C5; $btn-color: #4592C5;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: #fff; $body-bg: #fff;
$text-color: $gray; $text-color: $gray;
// Links // Links
// ------------------------- // -------------------------
$link-color: $red-dark; $link-color: $red-dark;
$link-hover-color: darken($link-color, 15%); $link-hover-color: darken($link-color, 15%);
// Typography // Typography
// ------------------------- // -------------------------
$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-weight-xl: 300; $font-weight-xl: 300;
$font-weight-reg: 400; $font-weight-reg: 400;
$font-weight-sb: 600; $font-weight-sb: 600;
$font-weight-xb: 700; $font-weight-xb: 700;
$font-size-xl: 44px; $font-size-xl: 44px;
$font-size-l: 36px; $font-size-l: 36px;
$font-size-m: 28px; $font-size-m: 28px;
$font-size-reg: 16px; $font-size-reg: 16px;
$text-shadow: 1px 1px 1px #000; $text-shadow: 1px 1px 1px #000;
$shadow: $text-shadow; $shadow: $text-shadow;
//margin + padding //margin + padding
$xsmall-pad: 20px; $xsmall-pad: 20px;
$small-pad: 30px; $small-pad: 30px;
$med-pad: 70px; $med-pad: 70px;
$large-pad: 120px; $large-pad: 120px;
$xl-pad: 150px; $xl-pad: 150px;
$light-outline: #f7f7f7; $light-outline: #f7f7f7;
// //
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55); $easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275); $easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);