e-commerce/prototype/src/main/resources/static/css/ecom.css

@import "fonts.css";

:root {
   font-family: "Fira Sans";
   line-height: 1.15;
   --u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
   --u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
   --u3: calc(1em * 1.5 * 1.5 * 1.5);
   --u2: calc(1em * 1.5 * 1.5);
   --u1: calc(1em * 1.5);
   --u0: calc(1em);
   --u-1: calc(1em * 0.666);
   --u-2: calc(1em * 0.666 * 0.666);
   --u-3: calc(1em * 0.666 * 0.666 * 0.666);
   --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
   --root-c-base: #ecf0f1;
   --root-c-base-highlight: #FFF;
   --root-c-primary: #1abc9c;
   --root-c-primary-highlight: #16a085;
   --root-c-secondary: #9b59b6;
   --root-c-secondary-highlight: #8e44ad;
   --root-c-black: #2c3e50;
   --root-c-black-highlight: #34495e;
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);
   --c-secondary: var(--root-c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);
   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
   --c-error: #c0392b;
}

.primary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);
   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);
   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.secondary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);
   --c-primary: var(--root-c-secondary);
   --c-primary-highlight: var(--root-c-secondary-highlight);
   --c-secondary: var(--root-c-primary);
   --c-secondary-highlight: var(--root-c-primary-highlight);
   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.black {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);
   --c-primary: var(--root-c-black);
   --c-primary-highlight: var(--root-c-black-highlight);
   --c-secondary: var(--root-c-primary);
   --c-secondary-highlight: var(--root-c-primary-highlight);
   --c-black: var(--root-c-primary);
   --c-black-highlight: var(--root-c-primary-highlight);
}

.black-as-highlight {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-black-highlight);
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-black-highlight);
   --c-secondary: var(--root-c-secondary);
   --c-secondary-highlight: var(--root-c-black-highlight);
   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.inverted {
   --c-base: var(--root-c-black);
   --c-base-highlight: var(--root-c-black-highlight);
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);
   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);
   --c-black: var(--root-c-base);
   --c-black-highlight: var(--root-c-base-highlight);
}

.bg-base {
   background-color: var(--root-c-base);
}

.bg-base {
   background-color: var(--root-c-base);
}

.bg-base-highlight {
   background-color: var(--root-c-base-highlight);
}

.bg-primary {
   background-color: var(--root-c-primary);
}

.bg-primary-highlight {
   background-color: var(--root-c-primary-highlight);
}

.bg-secondary {
   background-color: var(--root-c-secondary);
}

.bg-secondary-highlight {
   background-color: var(--root-c-secondary-highlight);
}

.bg-black {
   background-color: var(--root-c-black);
}

.bg-black-highlight {
   background-color: var(--root-c-black-highlight);
}

.highlight>*,
.highlight {
   --c-base: var(--root-c-black);
   --c-base-highlight: var(--root-c-black-highlight);
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);
   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);
   --c-black: var(--root-c-base);
   --c-black-highlight: var(--root-c-base-highlight);
}

.huge {
   --u5: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
   --u4: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5);
   --u3: calc(3.375rem * 1.5 * 1.5 * 1.5);
   --u2: calc(3.375rem * 1.5 * 1.5);
   --u1: calc(3.375rem * 1.5);
   --u0: calc(3.375rem);
   --u-1: calc(3.375rem * 0.666);
   --u-2: calc(3.375rem * 0.666 * 0.666);
   --u-3: calc(3.375rem * 0.666 * 0.666 * 0.666);
   --u-4: calc(3.375rem * 0.666 * 0.666 * 0.666 * 0.666);
}

.smaller {
   --u5: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
   --u4: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5);
   --u3: calc(0.666em * 1.5 * 1.5 * 1.5);
   --u2: calc(0.666em * 1.5 * 1.5);
   --u1: calc(0.666em * 1.5);
   --u0: calc(0.666em);
   --u-1: calc(0.666em * 0.666);
   --u-2: calc(0.666em * 0.666 * 0.666);
   --u-3: calc(0.666em * 0.666 * 0.666 * 0.666);
   --u-4: calc(0.666em * 0.666 * 0.666 * 0.666 * 0.666);
}

* {
   margin: 0em;
   padding: 0em;
   box-sizing: border-box;
}

html, body {
   font-size: var(--u0);
   height: 100%;
   background-color: var(--c-base);
   color: var(--c-black)
}

main {
   min-height: 100%;
}

h1, h2, h3, h4, h5 {
   font-family: "Fira Mono";
   padding-top: var(--u0);
   padding-bottom: var(--u-1);
   text-transform: uppercase;
}

a {
   text-decoration: underline;
   color: inherit;
}

a:visited {
   color: none;
}

a.section {
   text-decoration: none;
}

p {
   padding-top: var(--u0);
   padding-bottom: var(--u0);
}

h1 {
   font-size: var(--u2);
}

h2 {
   font-size: var(--u1);
}

h3, h4, h5 {
   font-size: var(--u0);
}

img {
   width: 100%;
   object-fit: cover;
}

img.icon {
   height: 2rem;
}

li {
   list-style-type: none;
}

table {
   width: 100%;
   border-collapse: collapse;
}

table td,
table th {
   padding: var(--u0);
   text-align: center;
}

table th {
   background-color: var(--c-primary);
   color: var(--c-base);
}

table tr:nth-child(2n+1) {
   background-color: var(--c-base-highlight);
}

table.key-value {
   width: inherit;
   border-collapse: collapse;
}

table.key-value th {
   text-align: right;
   font-family: "Fira Mono";
   text-transform: uppercase;
   background-color: var(--c-base);
   color: var(--c-black);
}

table.key-value tr {
   background-color: var(--c-base);
}

table.key-value td {
   text-align: left;
}

img.xs {
   width: var(--u2);
}

img.s {
   width: var(--u4);
}

img.m {
   width: 20rem;
}

/*
 *  NAV
 */
nav {}

nav h1 {
   font-size: var(--u0);
   margin: 0rem;
}

nav li {
   display: flex;
   flex-direction: column;
}

nav li li {
   margin-left: var(--u0);
}

nav li a {
   padding: var(--u0);
   transition: background-color 0.1s ease-out;
}

nav li a:hover,
nav li a.selected {
   padding: var(--u0);
   background-color: var(--c-primary);
   color: var(--c-base);
}

/*
 * FOOTER
 */
footer {
   padding-top: var(--u3);
   padding-bottom: var(--u1);
}

/*
 * INPUTS
 */
textarea,
input[list],
input[type="number"],
input[type="text"],
input[type="password"] {
   background-color: var(--c-base);
   font-size: var(--u0);
   border: none;
   /*border-radius: var(--u-2);*/
   margin-top: var(--u0);
   margin-bottom: var(--u0);
   padding: var(--u0);
   font-size: var(--u0);
   color: var(--c-black);
   background-color: var(--c-base-highlight);
   box-shadow: var(--s-0-secondary);
}

textarea {
   font-family: "Fira Mono";
}

/*
input[type="text"]:invalid,
input[type="password"]:invalid {
   background-color: var(--c-error);
   color: var(--c-base);
}*/
textarea::placeholder,
input[list]::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder {
   color: var(--c-primary-highlight);
   opacity: 50%;
}

button, .button {
   display: inline-block;

   font-family: "Fira Mono";
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   background-color: var(--c-primary);
   color: var(--c-base);
   border: none;
   /*border-radius: var(--u-2);*/
   margin-bottom: var(--u0);
   margin-top: var(--u0);
   padding: var(--u0);
   min-width: 10em;
   font-family: "Fira Mono";
   text-transform: uppercase;
   font-size: var(--u0);
   /* box-shadow: var(--s-0-secondary); */
}

button:enabled:active, .button:active {
   background-color: var(--c-primary-highlight);
}

input[type="text"],
input[type="password"],
input[list],
button,
.button {
   transition: background-color 0.1s ease-out;
}

button:disabled {
     filter: grayscale(100%);
}

label {
   display: block;
   min-width: 10em;
   font-weight: bold;
}

label.nolinebreak {
   display: inline;
}

input.linestyle {
   background-color: transparent;
   border-bottom: var(--u-4) solid var(--c-primary);
   border-radius: 0px;
   padding: 0px;
}

fieldset {
   border: none;
}

fieldset label {
   display: inline-block;
}

input[type=number] {
   text-align: right;
   -moz-appearance: textfield;
}

input[type="number"]:focus {
   -moz-appearance: number-input;
}

/*
 * HERO
 */
.hero {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.hero>* {
   --c-primary: var(--root-c-primary-highlight);
   --c-primary-highlight: var(--root-c-primary);
}

.header.hero>* {
   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);
}

.hero-black {
   background-color: var(--c-black);
   color: var(--c-base);
}

.primarytext {
   color: var(--c-primary)
}

.secondarytext {
   color: var(--c-secondary)
}

/*
 * LAYOUT
 */
.content-width {
   max-width: 80rem;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--u0);
   padding-right: var(--u0);
}

.full-width {
   width: 100%;
}

.flowflex {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   flex-wrap: wrap;
}

.flowflex>* {
   padding: var(--u0);
   flex: 1;
}

.flowflex>*.spacer {
   padding-top: 0px;
   padding-bottom: 0px;
}

.detailflex {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: stretch;
   flex-wrap: wrap;
}

.detailflex.s {
   max-width: calc(20rem + var(--u0) * 2);
   margin-left: auto;
   margin-right: auto;
}

.detailflex.m {
   max-width: calc(40rem + var(--u0) * 3);
   margin-left: auto;
   margin-right: auto;
}

.detailflex.l {
   max-width: calc(20rem + var(--u0) * 5);
   margin-left: auto;
   margin-right: auto;
}

.detailflex>* {
   min-width: 100%;
   padding: var(--u0);
   flex: 1;
}

.detailflex>.col-2 {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   align-items: wrap;
   padding: 0px;
}

.detailflex>.col-2>* {
   min-width: calc(15rem + var(--u0) * 3);
   flex: 1;
   padding: var(--u0);
}

.detailgrid {
   display: grid;
   grid-auto-flow: row;
   min-width: 20rem;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   grid-template-rows: auto;
   grid-column-gap: var(--u0);
   grid-row-gap: var(--u0);
}

.detailgrid.s {
   max-width: calc(20rem + var(--u0) * 2);
   margin-left: auto;
   margin-right: auto;
}

.detailgrid.m {
   max-width: calc(40rem + var(--u0) * 3);
   margin-left: auto;
   margin-right: auto;
}

.detailgrid.l {
   max-width: calc(20rem + var(--u0) * 5);
   margin-left: auto;
   margin-right: auto;
}

.detailgrid>.s {
   grid-column: span 1;
}

.detailgrid>.m {
   grid-column: span 2;
}

.detailgrid>.l {
   grid-column: span 3;
}

.detailgrid>.spacer {
   grid-column: span 3;
   height: 0px;
}

.bar-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

.bar-flex>* {
   margin: var(--u0);
}

.bar-flex>.spacer {
   flex: 1;
}

.sidebar-layout {
   display: flex;
   align-items: stretch;
   justify-content: center;
   flex-wrap: wrap;
}

.sidebar-layout>* {
   min-width: 15rem;
}

.sidebar-layout>*:nth-child(2) {
   flex: 1;
}

.grid {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.grid.vertical-center {
   align-items: center;
   height: 100%;
}

.grid.center {
   justify-content: space-around;
}

.grid>* {
   flex: 1;
   margin: var(--u0);
   padding: var(--u0);
   /*border-radius: var(--u0);*/
}

.grid.condensed>* {
   flex: 1;
   padding: 0px;
}

.grid.base>* {
   background-color: var(--c-base);
   color: var(--c-black);
}

.grid.black>* {
   background-color: var(--c-black);
   color: var(--c-base);
}

.grid.primary>* {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.grid.secondary>* {
   background-color: var(--c-primary-highlight);
   color: var(--c-base);
}

.hero-primary .grid.shadow>* {
   /* box-shadow: var(--s-0-secondary); */
}

.hero-black .grid.shadow>* {
   /* box-shadow: var(--s-0-secondary); */
}

.grid.s>.spacer {
   box-shadow: none;
   margin: calc(var(--u0) * 2);
   padding: 0px;
   width: 10rem;
   max-width: 10rem;
   min-width: 7.5rem;
   height: 0px;
}

.grid.s>* {
   max-width: 10rem;
   min-width: 7.5rem;
}

.grid.m>.spacer {
   box-shadow: none;
   margin: calc(var(--u0) * 2);
   padding: 0px;
   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.m>* {
   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
}

.grid.l>.spacer {
   box-shadow: none;
   margin: calc(var(--u0) * 2);
   padding: 0px;
   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.l>* {
   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
}

.grid.xl>.spacer {
   box-shadow: none;
   margin: calc(var(--u0) * 2);
   padding: 0px;
   width: 80rem;
   max-width: 80rem;
   min-width: 20rem;
   height: 0px;
   padding: 0px;
}

.grid.xl>* {
   width: 80rem;
   max-width: 40rem;
   min-width: 20rem;
}

.vertical-spacer.s {
   min-height: 10rem;
}

.vertical-spacer.m {
   min-height: 20rem;
}

.vertical-spacer.l {
   min-height: 40rem;
}

.modal {
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal>* {
   /*border-radius: var(--u0);*/
   padding: var(--u0);
   flex: 1;
}

.info-box {
   padding: var(--u0);
}

.error {
   background-color: var(--c-error);
   color: var(--c-base);
   text-align: center;
   font-size: var(--u0);
}

.info {
   background-color: var(--c-secondary);
   text-align: center;
   font-size: var(--u0);
}

/*
 * Impov
 */
.input-icon {
   /* box-shadow: var(--s-0-secondary); */
   display: flex;
   padding: 0px;
   /*border-radius: var(--u0);*/
}

.input-icon>input {
   flex: 1;
   margin: 0px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   box-shadow: none;
}

.input-icon>button {
   margin: 0px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   box-shadow: none;
}

/*
 * CONTENT
 */
.notification {}

.notification:hover {
   background-color: var(--c-base-highlight);
}

.notification.unread {
   background-color: var(--c-primary);
}

.notification.unread>* {
   --c-primary: var(--root-c-primary-highlight);
   --c-primary-highlight: var(--root-c-primary);
}

.notification.unread:hover {
   background-color: var(--c-primary);
}

.card {
   padding: var(--u0);
   background-color: var(--c-primary);
   color: var(--c-base);
}

.card.s {
   width: 10rem;
}

.card.m {
   width: 20rem;
}

.card.l {
   width: 40rem;
}

.price {
   opacity: 75%;
   font-size: var(--u1);
   text-align: right;
}

.center-text {
   text-align: center;
}

.no-padding {
   padding: 0px;
}

.no-margin {
   margin: 0px;
}

.logo {
   object-fit: fill;
   height: var(--u3);
   display: block;
}

th.r,
td.r {
   text-align: right;
}

th.l,
td.l {
   text-align: left;
}

.invisible {
   display: none;
}

/***

THE UGLY
TODO: Refactor

****/
.dropdown {
   width: 12.5rem;
   display: block;
}

.dropdown-content {
   display: none;
   position: absolute;
}

.dropdown .dropdown-button {
   display: block;
   width: 12.5rem;
   margin-top: 0px;
   margin-bottom: 0px;
}

.dropdown:hover .dropdown-content {}

.dropdown:hover .dropdown-button {
   display: inline-block;
   background-color: var(--root-c-black);
   width: 12.5rem;
   margin: 0px;
}

.dropdown:hover .dropdown-content {
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.dropdown:hover .dropdown-content>* {
   margin: 0px;
   width: 12.5rem;
}