futuro 0.7.4 → 0.7.5

data/_sass/block/form/login.scss

@@ -0,0 +1,70 @@
+
+$loginHeight: 44px;
+
+.block.login-btn {
+  position: relative;
+}
+
+.block.login-title {
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  height: $loginHeight;
+
+  svg {
+    width: 30px;
+    fill: white;
+  }
+}
+
+.block.login-menu {
+  top: $loginHeight + 10px;
+  position: absolute;
+  display: none;
+  z-index: 3;
+  right: 0;
+  left: 0;
+}
+
+.list.login-list {
+  @include borderRad;
+  overflow: hidden;
+  display: grid;
+  padding: 0;
+}
+
+.item.login-item {
+  @include padding($t:3,$b:2);
+  cursor: pointer;
+}
+
+.block.basket-btn {
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+
+  svg {
+    width: 26px;
+    fill: white;
+  }
+}
+
+.text.login-text {
+  @extend %bold;
+  @include ib;
+  padding-top: 4px;
+}
+
+.text.basket-text {
+  @extend %bold;
+  display: none;
+
+  @media#{map-get($query,min700)} {
+    @include ib;
+    padding-top: 4px;
+  }
+}

data/_sass/block/form/message.scss

@@ -0,0 +1,9 @@
+
+.block.message {
+  padding: 0 ($radius * 3);
+  display: block;
+
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}

data/_sass/block/form/password.scss

@@ -0,0 +1,19 @@
+
+.block.password-indicator {
+  grid-template-columns: 100px auto;
+  grid-column: 2 / 3;
+  margin: 0 0 20px;
+  display: grid;
+}
+
+.block.password-strength {
+  border-radius: ($radius * 1.5) 0 0 ($radius * 1.5);
+  height: ($radius * 3);
+  background: green;
+}
+
+.block.password-bg {
+  @include bg(map-get($color,slate));
+  border-radius: 0 ($radius * 1.5) ($radius * 1.5) 0;
+  height: ($radius * 3);
+}

data/_sass/block/form/radio.scss

@@ -0,0 +1,12 @@
+
+.wrap.form-radio {
+  grid-row-gap: 10px;
+  display: grid;
+}
+
+.block.form-radio-group {
+  justify-content: flex-start;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  display: grid;
+}

data/_sass/block/form/screen.scss

@@ -0,0 +1,89 @@
+
+$title: 2.6rem;
+
+%small {
+  font-size: $title * 0.6;
+}
+
+%large {
+  font-size: $title * 1.5;
+}
+
+%border {
+  border-top: 1px solid rgba(white,20%);
+}
+
+.block.screen-container {
+  grid-template-columns: repeat(2,1fr);
+  grid-column-gap: 20px;
+  display: grid;
+}
+
+.block.screen-row {
+  grid-row-gap: $title * 0.2;
+  line-height: 1.1;
+  display: grid;
+}
+
+.block.screen-row.top {
+  @include padding(5,5,4.5,5);
+  background: darken(white,10%);
+  grid-row-gap: $title * 0.1;
+  color: lighten(black,8%);
+
+  .screen-title {
+    @extend %large;
+  }
+
+  .screen-title.small {
+    @extend %small;
+  }
+}
+
+.block.screen-row.alert {
+  @include padding(3,5,2.5,5);
+  background: map-get($color,dodgers);
+  white-space: nowrap;
+}
+
+.block.screen-row.event {
+  @include padding(5,5,4.5,5);
+
+  + .screen-row.event, + .screen-row.retail  {
+    @extend %border;
+  }
+}
+
+.block.screen-row.retail {
+  @include padding(5,5,4.5,5);
+  background: lighten(black,18%);
+
+  + .screen-row.retail {
+    @extend %border;
+  }
+}
+
+.block.screen-title {
+  font-size: $title;
+}
+
+.block.screen-title:not(.small) {
+  @extend %tight;
+}
+
+.block.screen-title.small {
+  @extend %small;
+}
+
+.block.screen-wrap {
+  @extend %bold;
+  background-color: lighten(black,10%);
+  color: darken(white,10%);
+  overflow: hidden;
+  height: 835px;
+}
+
+sup {
+  @extend %small;
+  left: 0.2em;
+}

data/_sass/block/form/scroller.scss

@@ -0,0 +1,8 @@
+
+$max1199: "only screen and (max-width: 1199px)";
+
+.block.scroller {
+  @media#{$max1199} {
+    display: none;
+  }
+}

data/_sass/block/form/search.scss

@@ -0,0 +1,39 @@
+
+.block.search-form {
+  grid-auto-flow: column;
+  display: grid;
+
+  @media#{map-get($query,min840)} {
+    @include borderRad;
+    @include border(white);
+    @include bg(white,10%);
+  }
+
+  input[type="text"] {
+    background-color: transparent;
+    padding-right: 0;
+    max-width: 110px;
+    color: white;
+
+    @media#{map-get($query,max839)} {
+      display: none;
+    }
+  }
+
+  button {
+    background-color: transparent;
+
+    @media#{map-get($query,min840)} {
+      @include padding($t:0,$b:0);
+    }
+  }
+
+  svg {
+    width: 28px;
+    fill: white;
+
+    @media#{map-get($query,min840)} {
+      width: 24px;
+    }
+  }
+}

data/_sass/block/form/select.scss

@@ -0,0 +1,49 @@
+
+// .jcf-select {
+//   position: relative;
+//   overflow: hidden;
+//   display: block;
+//   height: $line;
+//
+//   @media#{map-get($query,min768)} {
+//     @include ib;
+//   }
+//
+//   select {
+//     z-index: 1;
+//     left: 0;
+//     top: 0;
+//   }
+//
+//   .jcf-select-text {
+//     text-overflow: ellipsis;
+//     padding: 8px 10px 3px;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     display: block;
+//   }
+//
+//   .jcf-select-opener {
+//     @include zeros(absolute);
+//     background: url("/assets/img/arrow_drop_down-24px.svg") no-repeat center lighten(map-get($color,slate),65%);
+//     border-left: 1px solid lighten(map-get($color,slate),50%);
+//     text-align: center;
+//     width: $line;
+//     left: auto;
+//   }
+// }
+
+select {
+  @include color($tint:80%);
+  @include borderRad;
+  @include padding;
+  @include border;
+  @include bg;
+  -webkit-appearance: none;
+  display: block;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+}

data/_sass/block/form/subheader.scss

@@ -0,0 +1,60 @@
+
+.block.subheader-container {
+  @extend .header-container;
+  border-top: 1px white solid;
+  overflow: hidden;
+  display: grid;
+}
+
+.list.subheader-menu {
+  justify-content: flex-start;
+  grid-auto-flow: column;
+  list-style: none;
+  display: grid;
+  padding: 0;
+
+  @media#{map-get($query,min640)} {
+    margin: 0 -15px;
+  }
+}
+
+.item.subheader-item {
+  @extend %bold;
+  padding: 0 10px 0 15px;
+  grid-auto-flow: column;
+  grid-column-gap: 5px;
+  align-items: center;
+  white-space: nowrap;
+  cursor: pointer;
+  display: grid;
+  height: 55px;
+
+  svg {
+    width: 24px;
+    fill: white;
+  }
+
+  &:hover {
+    @include bg(white,100%);
+    @include color(black,100%);
+
+    svg {
+      fill: black;
+    }
+  }
+}
+
+.item.subheader-item.menu-item {
+  border-right: 1px solid white;
+  padding-right: 15px;
+
+  @media#{map-get($query,min768)} {
+    display: none;
+  }
+}
+
+.menu-item + .item {
+  @media#{map-get($query,max767)} {
+    padding-left: 15px;
+  }
+}

data/_sass/block/form/text.scss

@@ -0,0 +1,20 @@
+
+.textarea-wrap {
+  @include borderRad;
+  @include border;
+  display: block;
+}
+
+textarea {
+  @include padding;
+  @include color($tint:80%);
+  @include bg;
+  width: 100% !important;
+  line-height: 1.3;
+  display: block;
+  outline: none;
+  height: 200px;
+  border: none;
+  resize: none;
+  margin: 0;
+}

data/_sass/block/form/title.scss

@@ -0,0 +1,12 @@
+
+.block.title {
+  @extend %bold;
+  @include bg(map-get($color,slate));
+  @include padding;
+  border-left: $radius solid;
+  display: block;
+
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}

data/_sass/block/form.scss

@@ -0,0 +1,17 @@
+
+.block.form-row {
+  @media#{map-get($query,min768)} {
+    @include splitrow($align : center);
+  }
+}
+
+.block.form-date-group {
+  grid-template-columns: minmax(70px,90px) minmax(70px,110px) minmax(70px,95px);
+  grid-column-gap: 10px;
+  align-items: center;
+  display: grid;
+
+  @media#{map-get($query,min768)} {
+    grid-column-gap: 20px;
+  }
+}

data/_sass/block/navigation.scss

@@ -3,7 +3,7 @@
   cursor: pointer;
 
   svg {
-    fill: $gray;
+    fill: map-get($color,gray);
   }
 }
 
@@ -14,7 +14,7 @@
   grid-gap: 18px;
   display: grid;
 
-  @media#{$max767} {
+  @media#{map-get($query,max767)} {
     display: none;
   }
 }
@@ -34,7 +34,7 @@
   grid-gap: 18px;
   display: grid;
 
-  @media#{$max767} {
+  @media#{map-get($query,max767)} {
     display: none;
   }
 }

data/_sass/block/number.scss

@@ -0,0 +1,9 @@
+
+.block.number-container {
+  align-content: center;
+  text-align: center;
+  display: grid;
+  height: 420px;
+  opacity: 0.5;
+  width: 50%;
+}

data/_sass/block/pie.scss

@@ -0,0 +1,14 @@
+
+.item.pie {
+  justify-content: center;
+}
+
+.block.pie-wrap {
+  position: relative;
+  height: 200px;
+  width: 200px;
+}
+
+.block.pie-svg {
+  @include zeros(absolute);
+}

data/_sass/block/results.scss

@@ -1,8 +1,4 @@
 
-.block.results {
-  list-style: none;
-}
-
 .block.results-entry {
   cursor: pointer;
   grid-gap: 5px;
@@ -14,6 +10,14 @@
   }
 }
 
+.block.results-entry:first-of-type {
+  margin-top: 10px;
+}
+
+.block.results-entry:last-of-type {
+  margin-bottom: 10px;
+}
+
 .block.results-info {
   justify-content: flex-start;
   grid-auto-flow: column;
@@ -24,7 +28,7 @@
 }
 
 .block.results-dot {
-  background-color: $gun;
+  background-color: map-get($color,gun);
   border-radius: 50%;
   position: relative;
   height: 15px;

data/_sass/block/scroller.scss

@@ -0,0 +1,12 @@
+
+.block.scroller {
+  @include zeros;
+  grid-template-columns: 1fr auto 1fr;
+  align-content: center;
+  min-height: 600px;
+  display: grid;
+  height: 100%;
+  width: 100px;
+  z-index: 2;
+  left: auto;
+}

data/_sass/block/stop.scss

@@ -1,5 +1,4 @@
 
 .block.stop {
   position: relative;
-  top: -80px;
 }

data/_sass/block/util.scss

@@ -1,30 +1,32 @@
 
 .block.util {
+  grid-auto-rows: min-content;
   grid-row-gap: 6px;
   display: grid;
+  fill: map-get($color,coal);
+}
 
-  &.page {
-    padding-top: 20px;
-  }
+.block.util.type-page {
+  @extend %ContentPrep;
+}
 
-  &.chapter {
-    position: absolute;
-    bottom: 56px;
-    right: 56px;
-  }
+.block.util.type-chapter {
+  position: absolute;
+  bottom: 56px;
+  right: 56px;
 }
 
 .block.util-share {
-  @extend %util-grid;
+  @extend %GridUtil;
   cursor: pointer;
+}
 
-  &.chapter {
-    justify-content: flex-end;
-    direction: rtl;
+.block.util-share.type-chapter {
+  justify-content: flex-end;
+  direction: rtl;
 
-    h5 {
-      direction: ltr;
-    }
+  h5 {
+    direction: ltr;
   }
 }
 
@@ -33,9 +35,9 @@
 }
 
 .block.util-update {
-  @extend %util-grid;
+  @extend %GridUtil;
 }
 
 .block.util-author {
-  @extend %util-grid;
+  @extend %GridUtil;
 }