solidus_starter_frontend 0.1.0

data/app/assets/stylesheets/spree/frontend.css

@@ -0,0 +1,8 @@
+/*
+Solidus Dummy app generator creates a vendor manifest in vendor/assets/stylesheets/frontend/all
+that requires this file: spree/frontend.
+Inside solidus_starter_frontend we don't need anything from spree/frontend,
+but the file must be there for the dummy application that expects it.
+This approach is in order to don't have to make changes in the solidus_core
+dummy app generator in the process of developing this extension.
+*/

data/app/assets/stylesheets/spree/frontend/base/_base.scss

@@ -0,0 +1,29 @@
+html {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 10px;
+}
+
+body {
+  color: $color-copy;
+  text-rendering: optimizeLegibility;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  color: inherit;
+  font-family: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+code,
+pre {
+  font-family: "SFMono-Regular", "SF Mono", "Ubuntu Mono", "Consolas",
+    "DejaVu Sans Mono", "Menlo", monospace;
+}

data/app/assets/stylesheets/spree/frontend/base/_reset.scss

@@ -0,0 +1,179 @@
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: transparent;
+}
+
+abbr[title] {
+  border-bottom: 0;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}

data/app/assets/stylesheets/spree/frontend/base/_responsive.scss

@@ -0,0 +1,21 @@
+$tablet-screen: 600px;
+$small-screen: 900px;
+$wide-screen: 1150px;
+
+@mixin tablet {
+  @media (min-width: $tablet-screen) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $small-screen) {
+    @content;
+  }
+}
+
+@mixin wide-desktop {
+  @media (min-width: $wide-screen) {
+    @content;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/account/_account_order.scss

@@ -0,0 +1,23 @@
+.account-order {
+  border-top: 1px solid $color-border-light;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 1rem 0;
+
+  &:last-of-type {
+    border-bottom: 1px solid $color-border-light;
+  }
+
+  &__detail {
+    flex-grow: 1;
+
+    dt {
+      font-weight: bold;
+    }
+
+    dd {
+      margin: .5rem 0 0;
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/account/_account_summary.scss

@@ -0,0 +1,17 @@
+.account-summary {
+  @extend %section-spacings;
+
+  > h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    margin: 0 0 2rem;
+  }
+
+  &__orders {
+    margin-top: 4rem;
+  }
+
+  button {
+    margin-top: 2rem;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/auth/_auth_container.scss

@@ -0,0 +1,11 @@
+.auth-container {
+  margin: 0 auto;
+  max-width: 35rem;
+  padding: 8rem 2rem;
+
+  > h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    margin: 0 0 2rem;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/auth/_auth_form.scss

@@ -0,0 +1,5 @@
+.auth-form {
+  &__input-wrapper {
+    margin: 2rem 0;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/brand/_logo.scss

@@ -0,0 +1,4 @@
+.logo {
+  flex-grow: 1;
+  margin: 0;
+}

data/app/assets/stylesheets/spree/frontend/components/buttons/_button_inline.scss

@@ -0,0 +1,8 @@
+.button-inline {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  height: auto;
+  padding: 0;
+  text-decoration: underline;
+}

data/app/assets/stylesheets/spree/frontend/components/buttons/_button_primary.scss

@@ -0,0 +1,26 @@
+.button-primary {
+  background: $color-accent;
+  border: 0;
+  border-radius: 2px;
+  color: $color-copy-bright;
+  font-size: 1.4rem;
+  font-weight: 500;
+  height: 3.8rem;
+  padding: 0 2rem;
+
+  &--bordered {
+    background: none;
+    border: solid 1px $color-accent;
+    color: $color-accent;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--small {
+    font-size: 1.2rem;
+    height: 3.2rem;
+    padding: 0 1.2rem;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_adjustments.scss

@@ -0,0 +1,6 @@
+.cart-adjustments {
+  font-size: 1.3rem;
+  margin-left: auto;
+  margin-top: 2rem;
+  width: 20em;
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_amount_row.scss

@@ -0,0 +1,11 @@
+.cart-amount-row {
+  display: flex;
+  justify-content: space-between;
+  margin-left: auto;
+  padding: .5rem 0;
+
+  &__type,
+  &__amount {
+    font-weight: bold;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_empty.scss

@@ -0,0 +1,10 @@
+.cart-empty {
+  &__title {
+    font-size: 2.6rem;
+    font-weight: 700;
+  }
+
+  &__action {
+    font-size: 1.5rem;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_footer.scss

@@ -0,0 +1,20 @@
+.cart-footer {
+  align-items: center;
+  display: flex;
+  font-size: 1.3rem;
+  margin: 4rem 0;
+
+  &__total {
+    flex-grow: 1;
+    margin: 0;
+    text-align: right;
+
+    > strong {
+      font-size: 1.8rem;
+    }
+  }
+
+  &__primary-action {
+    padding-left: 2rem;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_header.scss

@@ -0,0 +1,12 @@
+.cart-header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4rem;
+
+  &__title {
+    flex-grow: 1;
+    font-size: 2.6rem;
+    font-weight: 700;
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/spree/frontend/components/cart/_cart_item.scss

@@ -0,0 +1,86 @@
+.cart-item {
+  border-bottom: solid 1px $color-border-light;
+  font-size: 1.3rem;
+  padding: 2rem 0;
+
+  @include desktop {
+    align-items: center;
+    display: flex;
+
+    > * {
+      margin-bottom: 0;
+    }
+
+    &__image {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 20%;
+
+      img {
+        max-width: 100%;
+      }
+    }
+
+    &__info {
+      flex-grow: 1;
+      padding-left: 4rem;
+      padding-right: 2rem;
+    }
+
+    &__price-single,
+    &__price {
+      padding: 0 1rem;
+    }
+
+    &__quantity,
+    &__price,
+    &__remove {
+      margin: 0;
+    }
+
+    &__price {
+      font-size: 1.5rem;
+    }
+
+    &__quantity {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 10%;
+    }
+
+    &__remove {
+      text-align: right;
+      width: 12%;
+    }
+  }
+
+  > * {
+    margin-bottom: 1rem;
+  }
+
+  &:first-child {
+    border-top: solid 1px $color-border-light;
+  }
+
+  &__image {
+    text-align: center;
+  }
+
+  &__quantity,
+  &__price,
+  &__remove {
+    margin: 10px 0 10px auto;
+    text-align: right;
+    width: 10rem;
+  }
+
+  &__remove {
+    > input {
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      padding: 0;
+      text-decoration: underline;
+    }
+  }
+}