Switched from LESS to SASS

src/static/pretixpresale/scss/_event.scss

@@ -0,0 +1,110 @@
+.product-row {
+    border-top: 1px solid $table-border-color;
+
+    &:last-child {
+    }
+    p  {
+        margin-bottom: 0;
+    }
+
+    .input-item-count {
+        text-align: center;
+    }
+    .input-group-price {
+        margin-bottom: 3px;
+    }
+    .input-item-price {
+        text-align: right;
+    }
+    .availability-box {
+        text-align: center;
+
+        &.gone {
+            color: $alert-danger-text;
+        }
+        &.unavailable {
+            color: $alert-warning-text;
+        }
+    }
+
+    .productpicture {
+        float: left;
+        margin-right: 10px;
+        text-decoration: none;
+        display: block;
+    }
+}
+.voucher-row {
+    margin-top: 10px;
+}
+#voucher-toggle {
+    display: none;
+}
+.item-with-variations .product-row.headline, .product-row.simple {
+    border-top: 2px solid $table-border-color;
+}
+.item-with-variations:last-child {
+    border-bottom: 2px solid $table-border-color;
+}
+
+.panel-body address:last-child {
+    margin-bottom: 0;
+}
+
+.cart-row, .product-row {
+    padding: 10px 0;
+
+    .count form {
+        display: inline;
+    }
+    .price, .count {
+        text-align: right;
+    }
+    .price small,
+    .availability-box small {
+        display: block;
+        line-height: 1;
+    }
+
+    &.total {
+        border-top: 1px solid $table-border-color;
+    }
+
+    dl {
+        padding-left: 20px;
+        margin-bottom: 0;
+
+        dd {
+            padding-left: 20px;
+        }
+    }
+}
+.panel-contact dl {
+    margin-bottom: 0;
+}
+.panel-primary .panel-heading a {
+    color: white;
+}
+.checkout-button-row {
+    padding: 15px 0;
+}
+.offline-banner {
+    background: $brand-danger;
+    color: white;
+    width: 100%;
+    padding: 5px;
+    text-align: center;
+
+    a {
+        text-decoration: underline;
+        color: white;
+    }
+}
+@media (max-width: $screen-sm-max) {
+    .checkout-button-row div {
+        margin-bottom: 10px;
+    }
+    .page-header h1 small {
+        display: block;
+    }
+}

src/static/pretixpresale/scss/_forms.scss

@@ -0,0 +1,16 @@
+.panel-title .radio {
+    margin-left: 20px;
+}
+.form-control + .form-control-feedback {
+    /* Fix for https://github.com/FortAwesome/Font-Awesome/issues/4313 */
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2; // Ensure icon is above input groups
+    display: block;
+    width: $input-height-base;
+    height: $input-height-base;
+    line-height: $input-height-base;
+    text-align: center;
+    pointer-events: none;
+}

src/static/pretixpresale/scss/index.scss

@@ -0,0 +1,28 @@
+@import "../../bootstrap/scss/_bootstrap.scss";
+$fa-font-path: static("fontawesome/fonts");
+@import "../../fontawesome/scss/font-awesome.scss";
+@import "../../pretixbase/scss/colors.scss";
+
+
+body {
+    background: #ececec;
+    text-align: center;
+    padding: 50px 0;
+}
+
+.big-rotating-icon {
+    margin-top: 50px;
+    -webkit-animation: fa-spin 8s infinite linear;
+    animation: fa-spin 8s infinite linear;
+    font-size: 200px;
+    color: $brand-primary;
+}
+
+.logo {
+    width: 330px;
+    margin: auto;
+    display: block;
+    margin-top: 10%;
+    height: auto;
+    max-width: 100%;
+}

src/static/pretixpresale/scss/main.scss

@@ -0,0 +1,119 @@
+@import "../../pretixbase/scss/colors.scss";
+@import "../../bootstrap/scss/_bootstrap.scss";
+$fa-font-path: static("fontawesome/fonts");
+@import "../../fontawesome/scss/font-awesome.scss";
+
+@import "_event.scss";
+@import "_forms.scss";
+
+footer {
+    text-align: center;
+    padding: 10px 0;
+    font-size: 11px;
+}
+.page-header {
+    position: relative;
+    padding-bottom: 9px;
+
+    h1 {
+        margin: 0;
+    }
+    .loginbox {
+        padding-top: 15px;
+    }
+}
+.js-only {
+    display: none;
+}
+.locales {
+    display: inline;
+    a {
+        text-decoration: none;
+    }
+    img {
+        vertical-align: baseline;
+    }
+}
+.huge {
+    font-size: 40px;
+}
+a:hover .panel-primary > .panel-heading {
+    background-color: darken($btn-primary-bg, 10%);
+    border-color: darken($btn-primary-border, 12%);
+}
+
+.thank-you {
+    margin-bottom: 25px;
+    .fa {
+        font-size: 150px;
+        line-height: 170px;
+        display: block;
+        color: $brand-success;
+    }
+
+    h2 {
+        color: $brand-success;
+    }
+}
+
+body.loading .container {
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -ms-filter: blur(2px);
+    -o-filter: blur(2px);
+    filter: blur(2px);
+}
+
+#loadingmodal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, .7);
+    opacity: 0;
+    text-align: center;
+    z-index: 900000;
+    visibility: hidden;
+
+    .big-rotating-icon {
+        margin-top: 50px;
+        -webkit-animation: fa-spin 8s infinite linear;
+        animation: fa-spin 8s infinite linear;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+}
+
+.loading #loadingmodal {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity .5s ease-in-out;
+    -moz-transition: opacity .5s ease-in-out;
+    -webkit-transition: opacity .5s ease-in-out;
+}
+
+@media (min-width: $screen-md-min) {
+    .thank-you {
+        height: 170px;
+        width: 70%;
+        margin: auto;
+
+        .fa {
+            float: left;
+            margin-right: 30px;
+        }
+
+        h2 {
+            padding-top: 35px;
+        }
+    }
+}
+@media (max-width: $screen-sm-max) {
+    .thank-you {
+        text-align: center;
+    }
+    h2 {
+        margin-top: 0;
+    }
+}

src/static/pretixpresale/scss/waiting.scss

@@ -0,0 +1,19 @@
+@import "../../bootstrap/scss/_bootstrap.scss";
+$fa-font-path: static("fontawesome/fonts");
+@import "../../fontawesome/scss/font-awesome.scss";
+@import "../../pretixbase/scss/colors.scss";
+
+
+body {
+    background: #ececec;
+    text-align: center;
+    padding: 50px 0;
+}
+
+.big-rotating-icon {
+    margin-top: 50px;
+    -webkit-animation: fa-spin 8s infinite linear;
+    animation: fa-spin 8s infinite linear;
+    font-size: 200px;
+    color: $brand-primary;
+}