Lucid One - Responsive Checkout SCSS

checkout.scss.liquid

{% if settings.typeface_method == "google_webfonts" %}
{% if settings.heading_font contains "Google" %}
@import url('//fonts.googleapis.com/css?family={{ settings.heading_font | replace: ' ', '+' | remove: 'Google|' }}:300,400,700');
{% endif %}
{% endif %}
  
/***** GETTING SASSY *****/
  
$background-color: {{ settings.main_background_color }};
$text-color: {{ settings.text_color }};

$fieldset-heading-color: {{ settings.heading_color }};
$fieldset-background-color: {{ settings.section_bg_color }};

  
@function set-fieldset-heading-color($fieldset-heading-color) {
  @if (lightness($fieldset-background-color) >= lightness($fieldset-heading-color)) {
    @return darken($fieldset-heading-color, 100%);
  } @else {
    @return $fieldset-heading-color;
  }
}

@function set-fieldset-text-color($fieldset-background-color) {
  @if (lightness($fieldset-background-color) > 50% ) {
    @return darken($fieldset-background-color, 30%);
  } @else {
    @return lighten($fieldset-background-color, 30%);
  }
}

@function set-fieldset-border-color($fieldset-background-color) {
  @if (lightness($fieldset-background-color) > 50% ) {
    @return darken($fieldset-background-color, 10%);
  } @else {
    @return lighten($fieldset-background-color, 10%);
  }
}

@function set-fieldset-strong-text-color($fieldset-background-color) {
  @if (lightness($fieldset-background-color) > 50% ) {
    @return darken($fieldset-background-color, 50%);
  } @else {
    @return lighten($fieldset-background-color, 50%);
  }
}

@function set-fieldset-sub-bg-color($fieldset-background-color) {
  @if (lightness($fieldset-background-color) > 50% ) {
    @return darken($fieldset-background-color, 20%);
  } @else {
    @return lighten($fieldset-background-color, 20%);
  }
}
  
/***** GENERAL *****/

body {
  	font-family: {{ settings.standard_font }};
	font-size: {{ settings.standard_font_size }};
  	{% if settings.custom_background_image %}
	background: url('{{ 'background_image.png' | asset_url }}') {% if settings.background_image_style == "repeat" %}repeat scroll{% elsif settings.background_image_style == "no-repeat" %}no-repeat scroll {{ settings.background_image_hpos }} {{ settings.background_image_vpos }}{% endif %} $background-color; 
  	{% else %}
    background-color: $background-color;
  	{% endif %}
}

h1,
h2,
h3,
h4,
h5,
h6,
{
  {% if settings.heading_font_custom != "" %}
  font-family: '{{ settings.heading_font_custom }}';
  {% elsif settings.heading_font contains "Google" %}
  font-family: '{{ settings.heading_font | remove: 'Google|' }}';
  {% else %}
  font-family: {{ settings.heading_font }};
  {% endif %}
  font-weight: {{ settings.heading_font_weight }};
  text-transform: {{ settings.site_title_font_case }};
  color: {{ settings.heading_color }};
}
h1 {
  font-size: {{ settings.heading_h1_font_size }};
  line-height: {{ settings.heading_h1_line_height }};
}
h2 {
  font-size: {{ settings.heading_h2_font_size }};
  line-height: {{ settings.heading_h2_line_height }};
}
h3 {
  font-size: {{ settings.heading_h3_font_size }};
  line-height: {{ settings.heading_h3_line_height }};
}
h4 {
  font-size: {{ settings.heading_h4_font_size }};
  line-height: {{ settings.heading_h4_line_height }};
  margin-bottom: 1em;
}

p,
.section--thank-you p,
.payment-method-additional-info {
  color: $text-color;
  strong {
    color: darken($text-color, 20%);
  }
}

a {
  color: {{ settings.link_color }};
  text-decoration: none;
  &:hover {
    color:{{ settings.link_hover_color }};
  }
}

.btn {
  display: inline-block;
  padding: 4px 14px;
  background-image: none;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  border: 1px solid #bbb;
  border-color: #c5c5c5;
  border-bottom-color: #a2a2a2;
  color: #333333;
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  &.btn--primary, 
  &.btn--inset, 
  &.btn--disabled {
  	@extend .btn;
  }
  &:hover, &:active {
    color: #333333;
  	background-color: #e6e6e6;
  }
  &.btn--primary {
   	background-color: {{ settings.button_bg_color }};
	color: {{ settings.button_text_color }};
	border-color: {{ settings.button_bg_color }}; 
    &:hover, &:active {
      color: {{ settings.button_text_color }};
	  background-color: {{ settings.hover_button_bg_color }};
    }
  }
}
  

/***** MAIN *****/

.shop {
  .shop__name {
    line-height: 60px;
    font-size: {{ settings.site_title_font_size }};
  }
  .shop__logo {
    margin-top: 10px;
  }
}

.cssgradients .header__backdrop, 
.header__backdrop {
  background: none;
}
    
.header {
  background-color: {{ settings.nav_bar_color }};
  padding: 0;
  min-height: 60px;
}

.section {
  border-color: {{ settings.separator_color }};
}

.order-summary,
.payment-due__currency {
  color: set-fieldset-text-color($fieldset-background-color);
  .payment-due__price, 
  strong {
    color: set-fieldset-strong-text-color($fieldset-background-color);
  }
}

.order-summary,
.order-summary__section,
.summary-body,
.total-line--total,
.field+.field,
.fieldset  {
	border-color: set-fieldset-border-color($fieldset-background-color);
}

.payment-method-name {
  color: darken($text-color, 20%);
}

.order-summary__section h3 {
  color: set-fieldset-heading-color($fieldset-heading-color);
}

.fieldset,
.order-summary {
  background-color: $fieldset-background-color;
}   

.field label,
input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="password"], 
select {
	color: set-fieldset-strong-text-color($fieldset-background-color);
  	&::-webkit-input-placeholder,
  	::-moz-placeholder,
  	:-ms-input-placeholder, 
  	small {
      color: set-fieldset-text-color($fieldset-background-color);
    }
}

.field-group--has-subfields {
	background-color: set-fieldset-sub-bg-color($fieldset-background-color);
}
 
.payment-method-total {
  color: {{ settings.checkout_accent_color }};
}

.footer {
  background: none;
}
    
.boxshadow .footer {
  box-shadow: none;
}

.icon--order-success {
  &.svg g {
    stroke: {{ settings.checkout_accent_color }};
  }
}
.icon--print {
	background-image: url('{{ 'checkout-print.svg' | asset_url }}'),none;
}


/**** MEDIA QUERIES ****/

@media screen and (min-width: 1100px) {
  .step--completed .section__header:before {
  	border-color: {{ settings.checkout_accent_color }};
  	background-image: url('{{ 'checkout-tick.svg' | asset_url }}'),none;
  }
}

@media screen and (min-width: 1000px) {
  .wrap {
  	max-width: 1170px;
  }
}