checkout.bootstrap.scss

/*
 * Shopify checkout bootstrap - extends Shopify's checkout styles with bootstrap
 */
 
@import "bower_components/sass-bootstrap/lib/bootstrap.scss";

/* Layout */
#info-bar, #container, #container.slim{
  @extend .container;
}

#main, #container.slim #main{
  margin-bottom: 80px;
}

#overview, #content{
  @extend .row;
}

#products{
  @extend .col-xs-12;
  @extend .col-sm-8;
}

#wallet{
  @extend .col-xs-12;
  @extend .col-sm-4;
}

#new_order, #email, .slim .group{
  @extend .col-xs-12;
}

.gleft, .gright, #create-account{
  @extend .col-xs-12;
  @extend .col-sm-6;
}

#create-account + p{
  clear: both;
}

/* Type */
h1, #header h1{
  @extend h1;
  span.subtitle{
    @extend .small;
  }
}

#overview h2{
  @extend h2;
}

h3.divider, #pay-with h3, .group h3, .pgroup h3, #thumbs .plisthead, #email label{
  @extend h3;
}

.pageform h4, h4.active-customer, .group h4{
  @extend h4;
}

p, .medium p, fieldset p, .header-description p{
  @extend p;
}

/* Forms */
fieldset, fieldset#switchsolo{
  @extend fieldset;
}

legend{
  @extend legend;
}

label, label.inline, #shipping-same label, .soft label, .medium label, td.label, .form ul.inline li label, .item-inventory-action label{
  @extend label;
}

#email input, #payment-methods input, .field-with-errors input, input[type=text], input[type=password], textarea, textarea.short, input.digit-2, textarea.tall, input.long,
input.short, .form td input, .form td input.short, .form td textarea, .form.full td input{
  @extend .form-control;
}

.form td input#shipping-toggle{
  @extend .checkbox;
  display: inline;
  height: auto;
}

form table{
  width: 100%;
}

.form td.lbl{
  width: 30%;
}

.form td, .form td.lbl{
  vertical-align: top;
  padding-bottom: 0.75em;
}

.field-with-errors{
  @extend .has-error;
  .error-message{
    @extend .text-danger;
  }
}

/* Buttons */
input[type=submit], input.btn, #buttons input, .sign-in-area input[type=submit], #create-account-btn{
  @extend .btn;
  @extend .btn-default;
}

/* Alerts */

.flash{
  @extend .alert;
  @extend .alert-info;
}
.flash.notice{
  @extend .alert;
  @extend .alert-success;
}
.flash.error{
  @extend .alert;
  @extend .alert-danger;
}

/* Media */
#thumbs{
  width: 100%;
  margin-top: 1.5em;
}
#thumbs td, .slim #thumbs td{
  display: block;
  overflow: auto;
  & > div{
    @extend .thumbnail;
    @extend .pull-left;
    margin-right: 1em;
  }
  .images{
    @extend .media-object;
  }
  .plisthead{
    @extend .media-heading;
  }
}
.slim #thumbs td{
  .images{
    @extend .thumbnail;
    @extend .pull-left;
    margin-right: 1em;
  }
}