Skip to content

Instantly share code, notes, and snippets.

@ronnyhartenstein
Created March 6, 2015 20:48
Show Gist options
  • Save ronnyhartenstein/d774bee8dbac81960322 to your computer and use it in GitHub Desktop.
Save ronnyhartenstein/d774bee8dbac81960322 to your computer and use it in GitHub Desktop.
OXID Bootstrap Responsive: css/page/_checkout.scss
@charset "UTF-8";
/**
* Bestellprozess
*
* @version $Id$
*/
.lineBox {
background: url("../../img/line-innershadow.png") no-repeat scroll 0 0 transparent;
border-width: 0px;
margin: 20px 0;
padding: 9px 10px 10px;
}
// ------------------------------------------------
// Überschriften
#orderAddress h3, #orderShipping h3, #orderPayment h3, .agb h3 {
font-size: 24px;
}
#orderAddress h3 strong, #orderShipping h3 strong, #orderPayment h3 strong, .agb h3 strong {
font-weight: normal;
}
h3.section {
font-size: 24px;
}
h3.section strong {
font-weight: normal;
}
h3.blockHead {
font-size: 30px;
font-weight: normal;
line-height: 1.2;
}
// ------------------------------------------------
// Schrittfolge
.checkoutSteps {
border-left: 0;
border-right: 0;
@extend .well;
@media (max-width: 767px) {
padding: 5px;
margin-top: 15px;
}
span {
padding-left: 0;
}
li {
margin-left: 0;
margin-right: 0;
padding-left: 15px;
padding-right: 15px;
}
li.step1, li.step2, li.step3, li.step4, li.step5 {
width: auto;
}
li.step1 {
padding-left: 15px;
}
li.passed, li.passed a {
color: gray;
}
li.active {
@extend .label;
@extend .label-default;
//padding-top: 7px;
padding: 0 15px;
font-size: 100%;
line-height: 29px;
}
}
// ------------------------------------------------
// Buttons
// normalhohe Buttons
%btn-checkout-default-as-normal {
font-size: 15px;
line-height: 1;
padding: 5px 10px;
&:hover {
color: white;
}
}
// Button Weiter
.nextStep {
@extend .btn-primary;
//@include background_grad_orange();
font-size: 1.2em !important;
font-weight: normal;
&:hover {
font-weight: normal;
}
}
#userNextStepTop {
@extend .btn-default;
&:hover {
color: white;
}
}
// Button zurück
.lineBox .prevStep {
@extend .btn-default;
height: auto;
&:hover {
color: white;
}
}
// Button generell
div.lineBox .largeButton,
div.lineBox a.largeButton {
height: auto;
text-transform: none;
}
// ------------------------------------------------
// Schritt 1: Warenkorb
// Hinweis "MwSt befreit.."
.basketVATFree {
float: left;
font-style: italic;
margin: 18px 30px;
}
.basketFunctions button {
color: $schwarz;
}
#basket {
// Spalte Checkbox
.checkbox input[type=checkbox] {
position: relative;
margin-left: 0;
}
td.checkbox {
border-top: 0;
}
// Artikelbild, Titel, Infos
td.basketArticleinfos {
a {
color: $dunkelgrau;
}
.basketImage {
float: left;
}
@media (max-width: 500px) {
p {
display: block;
clear: left;
}
}
.basketImage img {
padding-right: 5px;
}
}
td.quantity {
text-align: center;
}
th.basketArticleinfos {
vertical-align: bottom;
}
th.totalPrice, td.totalPrice {
text-align: right;
}
th.combinedCols, td.combinedCols {
@media (max-width: 767px) {
display: table-cell !important;
}
white-space: nowrap;
p {
margin-bottom: 0;
}
.operator {
color: #aaa;
}
}
}
// Schritt 2: Adresse & Versandart
// ------------------------------------------------
// Button Adresse ändern
#userChangeAddress {
@extend .btn-default;
@extend %btn-checkout-default-as-normal;
}
.checkoutCollumns .collumn {
@extend .col-sm-6;
@extend .col-xs-12;
}
#showShipAddress {
margin-right: 10px;
+ label {
display: inline;
}
}
label[for=subscribeNewsletter] {
width: auto;
}
// ------------------------------------------------
// Schritt 4: Überprüfen und Senden
// Hinweis "Klicken sie unten..." oben rechts
div.lineBox span.title {
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: normal;
text-shadow: 0 0 0 #fff;
text-transform: none;
}
#orderAddress .submitButton, #orderShipping .submitButton, #orderPayment .submitButton, #orderEditCart .submitButton {
@extend .btn-default;
@extend %btn-checkout-default-as-normal;
}
// ------------------------------------------------
// Schritt 5: Zusammenfassung
.summary {
@media (max-width: 767px) {
width: 100%;
}
}
// ------------------------------------------------
// Schritt 6: Danke-Seite
// Links
#thankyouPage .link,
.agb a, .cmsContent p a {
color: $orange1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment