Skip to content

Instantly share code, notes, and snippets.

@gustavoreis
Created December 10, 2019 20:06
Show Gist options
  • Save gustavoreis/d72d703ed9ff31c3f55d93c932fb0ef1 to your computer and use it in GitHub Desktop.
Save gustavoreis/d72d703ed9ff31c3f55d93c932fb0ef1 to your computer and use it in GitHub Desktop.
@mixin transition($elements: all, $time: 300ms, $timing-function: ease) {
-webkit-transition: $elements $time $timing-function;
-moz-transition: $elements $time $timing-function;
-ms-transition: $elements $time $timing-function;
-o-transition: $elements $time $timing-function;
transition: $elements $time $timing-function;
}
$background-color-content: #fff;
$background-color: #f9f9f9;
$border-box-content: 1px solid #e1e1e1;
$border-radius: 0px;
$main-color: #204468;
$secondary-color: #f58432;
$main-color-light: lighten($main-color, 0.5);
$main-color-dark: darken($main-color, 0.5);
$color-text: #1c324e;
$path-logo: url('../images/logo.png');
$color-success: #58c55a;
$color-success-dark: #387b39;
$color-error: #ff7370;
$color-error-dark: #a7403e;
$primary-font-family: 'Open Sans', sans-serif;
$secondary-font-family: 'Open Sans', serif;
#checkout {
/* GERAL */
font-family: $primary-font-family;
background: $background-color !important;
#main-header {
background: $background-color-content;
border-bottom: 1px solid #e0e0e0;
.logo {
width: 350px;
height: 50px;
float: left;
background-image: $path-logo;
background-position: center left;
background-repeat: no-repeat;
background-size: contain;
margin-top: 30px;
}
}
#main-footer {
background: $background-color-content;
}
a {
color: $main-color;
@include transition;
&:hover {
color: darken($main-color, 20);
}
}
.has-success .form-control:focus {
border-color: $main-color;
-webkit-box-shadow: inset 0 1px 1px $main-color, 0 0 6px $main-color;
box-shadow: inset 0 1px 1px $main-color, 0 0 6px $main-color;
}
.has-success .form-control {
border-color: $main-color;
}
/* FIM GERAL */
/* CARRINHO */
.checkout-box {
border: 1px solid darken($background-color, 10);
border-radius: 0px;
#product_list_table {
background: $background-color-content;
.description {
font-family: $secondary-font-family;
}
}
}
#products_summary {
border: 1px solid darken($background-color, 10);
padding: 15px;
background: $background-color-content;
#checkout_email {
.finish {
background-color: $main-color;
box-shadow: none;
&:hover {
color: white;
background-color: darken($main-color, 10);
box-shadow: none;
}
}
}
}
.btn-color {
background-color: $main-color;
box-shadow: 1px 2px 0px darken($main-color, 15);
}
.shipping-type-item label.checked {
border-color: $main-color;
}
/* FIM CARRINHO */
/* PAGAMENTO */
#call-to-zip, .shipping-type-title {
color: $main-color;
}
#client_data_form_btn, #shipping_form_btn {
background-color: $main-color;
box-shadow: 1px 2px 0px darken($main-color, 15);
&:hover {
color: white;
background-color: darken($main-color, 10);
box-shadow: 1px 2px 0px darken($main-color, 20);
}
}
/* FIM PAGAMENTO */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment