bedrock_sass 0.1.9 → 0.2.0

data/assets/bedrock/scss/components/helper-classes.scss

@@ -24,6 +24,7 @@
 
     &.expand {
       width: 100%;
+      min-width: 15rem;
     }
 
     &.check {

data/assets/bedrock/scss/components/icon-box.scss

@@ -0,0 +1,38 @@
+// Icon box Mixins
+
+@mixin icon-box {
+  padding: $global-padding;
+  text-align: center;
+  line-height: 1;
+  font-size: 1.5rem;
+  display: block;
+
+  &.small {
+    padding: $global-padding / 2;
+    font-size: 1rem;
+  }
+
+  &.large {
+    padding: $global-padding * 2;
+    font-size: 2rem;
+  }
+
+  @each $name, $color in $foundation-palette {
+    &.#{$name} {
+      background-color: $color;
+
+      @if $name != 'default' {
+        color: $white;
+      }
+    }
+  }
+}
+
+
+// Icon box Component
+
+@mixin bedrock-icon-box {
+  .icon-box {
+    @include icon-box;
+  }
+}

data/assets/bedrock/scss/components/item-list.scss

@@ -0,0 +1,66 @@
+// Item-list Mixins
+
+@mixin item-list {
+  counter-reset: list-counter;
+
+  .item {
+    display: flex;
+    margin-bottom: $global-margin;
+
+    .counter, .remove {
+      display: flex;
+      align-items: center;
+      width: 3rem;
+      justify-content: center;
+      background: darken($panel-background, 3);
+      color: $medium-gray;
+      border: $input-border;
+      z-index: 0;
+    }
+
+    .counter:before {
+      content: counter(list-counter);
+      counter-increment: list-counter;
+      font-weight: bold;
+    }
+
+    .remove {
+      cursor: pointer;
+
+      &:hover, &:active, &:focus {
+        background: $alert-color;
+        color: white;
+        border-color: darken($alert-color, 10);
+        z-index: 2;
+      }
+    }
+
+    .content {
+      flex-basis: 100%;
+      margin: 0 -1px;
+
+      input, .form-element {
+        margin: 0;
+        height: 100%;
+        z-index: 0;
+
+        &:focus, &:active {
+          z-index: 1;
+        }
+
+        ~ input {
+          margin-left: -1px;
+        }
+      }
+    }
+  }
+}
+
+
+// Item-list Component
+
+@mixin bedrock-item-list {
+  .item-list {
+    @include item-list;
+  }
+}

data/assets/bedrock/scss/components/lists.scss

@@ -0,0 +1,58 @@
+// Lists Mixins
+
+@mixin list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 $global-margin;
+
+  li:not(:last-child) {
+    margin-bottom: $global-margin / 2;
+  }
+
+  i {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: .5rem;
+  }
+
+  &.border {
+
+    li {
+      margin: 0;
+
+      &:not(:first-child) {
+        padding-top: $global-padding / 2;
+      }
+
+      &:not(:last-child) {
+        padding-bottom: $global-padding / 2;
+        border-bottom: 1px solid rgba($black, .04);
+      }
+    }
+  }
+
+  &.striped {
+
+    li {
+      margin: 0;
+      padding: ($global-padding / 2) $global-padding;
+
+      &:nth-child(2n) {
+        background-color: rgba($black, .04);
+      }
+
+      &.border:not(:last-child) {
+        border-bottom: 1px solid smart-scale($panel-background, $panel-color-scale);
+      }
+    }
+  }
+}
+
+
+// Lists Component
+
+@mixin bedrock-lists {
+  .list {
+    @include list;
+  }
+}

data/assets/bedrock/scss/components/off-canvas-menu.scss

@@ -1,4 +1,8 @@
 $offcanvas-menu-background: $secondary-color !default;
+$offcanvas-menu-color: $white !default;
+$offcanvas-menu-item-color-active: $menu-item-color-active !default;
+$offcanvas-menu-item-background-active: $menu-item-background-active !default;
+$offcanvas-menu-border: none !default;
 $offcanvas-menu-collapsed-size: 4.1rem !default;
 $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !default;
 
@@ -64,7 +68,7 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: rgba($white, 0.1);
+  background: rgba($offcanvas-menu-color, 0.1);
 }
 
 @mixin offcanvas-menu-basics {
@@ -74,7 +78,7 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
       &:hover, &.is-active {
 
         > a {
-          color: $menu-item-color-active;
+          color: $offcanvas-menu-item-color-active;
           background: transparent;
         }
       }
@@ -82,20 +86,20 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
       &.is-current {
 
         > a {
-          color: $menu-item-color-active;
-          background: $menu-item-background-active;
+          color: $offcanvas-menu-item-color-active;
+          background: $offcanvas-menu-item-background-active;
         }
       }
     }
 
     a {
-      color: rgba($white, .6);
+      color: rgba($offcanvas-menu-color, .6);
       text-transform: uppercase;
     }
   }
 
   a {
-    color: $white;
+    color: $offcanvas-menu-color;
     font-size: .9rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -184,13 +188,13 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
 
 @mixin off-canvas-menu-style {
   > li {
-    border-bottom: 1px solid rgba(white, .04);
+    border-bottom: 1px solid rgba($offcanvas-menu-color, .04);
 
     &:hover, &.is-active {
 
       > a {
-        box-shadow: inset 3px 0 0 $white;
-        color: $menu-item-color-active;
+        box-shadow: inset 3px 0 0 $offcanvas-menu-color;
+        color: $offcanvas-menu-item-color-active;
         background: transparent;
       }
     }
@@ -198,8 +202,8 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
     &.is-current {
 
       > a {
-        box-shadow: inset 3px 0 0 $menu-item-background-active;
-        color: $menu-item-color-active;
+        box-shadow: inset 3px 0 0 $offcanvas-menu-item-background-active;
+        color: $offcanvas-menu-item-color-active;
         background: transparent;
       }
     }
@@ -228,17 +232,17 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
     &:last-child {
 
       > .submenu {
-        box-shadow: 0 1px 0 rgba(white, .04), 0 -1px 0 rgba(white, .04);
+        box-shadow: 0 1px 0 rgba($offcanvas-menu-color, .04), 0 -1px 0 rgba($offcanvas-menu-color, .04);
       }
     }
 
     > .submenu {
       padding: .5rem 0;
-      box-shadow: 0 -1px 0 rgba(white, .04);
+      box-shadow: 0 -1px 0 rgba($offcanvas-menu-color, .04);
 
       .submenu {
         background: rgba(darken($offcanvas-menu-background, 15), 0.1);
-        box-shadow: 0 -1px 0 rgba(white, .02), 0 1px 0 rgba(white, .02);
+        box-shadow: 0 -1px 0 rgba($offcanvas-menu-color, .02), 0 1px 0 rgba($offcanvas-menu-color, .02);
       }
     }
 
@@ -275,7 +279,7 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
   }
 
   .is-active > a {
-    color: $white;
+    color: $offcanvas-menu-item-color-active;
   }
 
   .is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
@@ -325,6 +329,14 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
   .collapse-show {
     display: none;
   }
+
+  &.position-right {
+    border-left: $offcanvas-menu-border;
+  }
+
+  &.position-left {
+    border-right: $offcanvas-menu-border;
+  }
 }
 
 

data/assets/bedrock/scss/components/place-autocomplete.scss

@@ -0,0 +1,90 @@
+// Place Autocomplete Mixins
+
+@mixin background-crosshair($color: $black) {
+  $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
+  $path: 'M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z';
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path style='fill:#{$rgb}' d='#{$path}'></path></svg>");
+}
+
+@mixin place-autocomplete-input {
+  @include background-crosshair($medium-gray);
+  padding-right: ($form-spacing / 2) + 1.8rem;
+  background-size: 24px;
+  background-position: $global-right (-1.8rem) top;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+
+  @at-root .gm-style #{&} {
+    width: 30%;
+    font-size: 11px;
+    padding: 8px;
+    padding-right: 26px;
+    margin: 10px;
+    border: 0;
+    box-shadow: rgba(black, 0.3) 0px 1px 4px -1px;
+    font: inherit;
+    border-radius: 2px;
+    height: 30px;
+    background-size: 16px;
+    background-position: right -20px top;
+  }
+}
+
+@mixin place-autocomplete-container {
+  box-shadow: none;
+  border: $input-border;
+  border-top: 0;
+  border-radius: 0;
+  box-sizing: content-box;
+
+  &:after {
+    background-color: $light-gray;
+    padding: $input-padding;
+    background-position: right 10px center !important;
+  }
+
+  .pac-item {
+    border: 0;
+    padding: $input-padding;
+    line-height: inherit;
+    font-size: .8rem;
+
+    &.pac-item-selected {
+      background: $anchor-color;
+      color: white;
+
+      .pac-item-query {
+        color: white;
+      }
+    }
+
+    .pac-icon {
+      margin-top: 1px;
+    }
+
+    .pac-item-query {
+      font-size: .9rem;
+    }
+  }
+
+  &.pac-inline {
+    border: 0;
+    border-radius: 2px;
+    margin-top: 5px;
+    box-shadow: rgba(black, 0.3) 0px 1px 4px -1px;
+    font: inherit;
+  }
+}
+
+
+// Place Autocomplete Component
+
+@mixin bedrock-place-autocomplete {
+  .pac-input {
+    @include place-autocomplete-input;
+  }
+
+  div.pac-container {
+    @include place-autocomplete-container;
+  }
+}

data/assets/bedrock/scss/components/rrule-generator.scss

@@ -0,0 +1,102 @@
+// Rrule Generator Mixins
+
+@mixin rrule-generator {
+  [data-rrule-controls] {
+    display: none;
+  }
+}
+
+@mixin rrule-output {
+  td {
+    border: $table-border;
+    padding: .5rem;
+    line-height: 1.012;
+
+    &:first-child {
+      text-align: right;
+      color: $cite-color;
+    }
+  }
+}
+
+@mixin rrule-picker {
+  text-align: center;
+
+  table {
+    background: white;
+  }
+
+  tr {
+    background: none !important;
+
+    &:first-child {
+
+      td {
+        border-top: $input-border;
+      }
+    }
+
+    &:last-child {
+
+      td {
+        border-bottom: $input-border;
+      }
+    }
+  }
+
+  td {
+    border: $table-border;
+    padding: 0;
+
+    &:first-child {
+      border-left: $input-border;
+    }
+
+    &:last-child {
+      border-right: $input-border;
+    }
+
+    &.last-day {
+      background: rgba(black, .03);
+    }
+  }
+
+  input {
+    display: none;
+
+    &:checked + span {
+      background: $anchor-color;
+      color: white;
+    }
+  }
+
+  label {
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  span {
+    display: block;
+    padding: .5rem;
+    line-height: 1.272;
+    cursor: pointer;
+  }
+}
+
+
+// Rrule Generator Component
+
+@mixin bedrock-rrule-generator {
+  [data-rrule-generator] {
+    @include rrule-generator;
+  }
+
+  [data-rrule-output] {
+    @include rrule-output;
+  }
+
+  .rrule-picker {
+    @include rrule-picker;
+  }
+}