bedrock_sass 0.1.2 → 0.1.3

data/assets/bedrock/scss/components/inline-edit-box.scss

@@ -0,0 +1,80 @@
+$inline-edit-box-color: $dark-gray !default;
+$inline-edit-box-background: $light-gray !default;
+$inline-edit-box-border: 1px solid darken($light-gray, 10) !default;
+
+// Inline Edit Box Mixins
+
+@mixin inline-edit-box {
+  position: relative;
+  padding: ($global-padding / 3) ($global-padding / 2);
+  padding-right: $global-padding * 2.5;
+  border: $inline-edit-box-border;
+  background: $inline-edit-box-background;
+
+  &.is-editing {
+
+    .edit-input, .save-button {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .edit-preview, .edit-button {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  input, select {
+    margin: 0 !important;
+  }
+
+  .edit-input {
+    margin: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .edit-button,
+  .save-button {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    right: 0;
+    padding: ($global-padding / 2) ($global-padding / 1.5);
+    font-size: 1.2rem;
+  }
+
+  .edit-button {
+    color: $inline-edit-box-color;
+  }
+
+  .save-button {
+    color: $success-color;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .edit-preview {
+    position: absolute;
+    top: $global-padding / 1.5;
+    left: $global-padding / 1.5;
+    bottom: $global-padding / 1.5;
+    right: $global-padding * 2.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $inline-edit-box-color;
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+
+// Inline Edit Box Component
+
+@mixin bedrock-inline-edit-box {
+  .inline-edit-box {
+    @include inline-edit-box;
+  }
+}

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

@@ -0,0 +1,48 @@
+$login-box-width: 26rem !default;
+$login-box-logo-width: 16rem !default;
+
+// Login Box Mixins
+
+@mixin login-box {
+  margin: ($global-margin * 3) auto;
+  padding: $global-padding;
+  width: 100%;
+  max-width: $login-box-width;
+
+  .logo-image {
+    width: 100%;
+    display: block;
+
+    img {
+      display: block;
+      width: $login-box-logo-width;
+      margin: ($global-margin * 2) auto;
+    }
+  }
+
+  .footer-links {
+    font-size: $small-font-size;
+    text-align: center;
+
+    a {
+      color: $body-font-color;
+      white-space: nowrap;
+      margin: 0 .2rem;
+
+      &:not(:last-child):after {
+        content: "\2022";
+        font-size: 1rem;
+        margin-left: .4rem;
+      }
+    }
+  }
+}
+
+
+// Login Box Component
+
+@mixin bedrock-login-box {
+  .login-box {
+    @include login-box;
+  }
+}

data/assets/bedrock/scss/components/no-content.scss

@@ -0,0 +1,31 @@
+$no-content-color: $medium-gray !default;
+
+// No Content Mixins
+
+@mixin no-content {
+  padding: $global-padding;
+  text-align: center;
+  color: $no-content-color;
+
+  > i {
+    font-size: 3rem;
+  }
+
+  > img {
+    height: 3rem;
+    margin-bottom: $global-margin;
+  }
+
+  > span {
+    display: block;
+  }
+}
+
+
+// No Content Component
+
+@mixin bedrock-no-content {
+  .no-content {
+    @include no-content;
+  }
+}

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

@@ -5,7 +5,7 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
 // Offcanvas Menu Mixins
 
 @mixin off-canvas-menu-wrapper {
-  @include xy-grid;
+  @include xy-grid(horizontal, false);
   @include off-canvas-wrapper;
   min-height: 100vh;
 }

data/assets/bedrock/scss/components/page-content.scss

@@ -0,0 +1,51 @@
+$page-content-sidebar-width: 340px !default;
+
+// Page Content Mixins
+
+@mixin page-content-gutter {
+  @each $name, $size in $grid-column-gutter {
+    @include breakpoint($name) {
+      padding-left: $size / 2;
+      padding-right: $size / 2;
+    }
+  }
+}
+
+@mixin page-content {
+  @include xy-grid;
+  min-height: 100vh;
+
+  @each $name, $size in $grid-column-gutter {
+    @include breakpoint($name) {
+      margin-left: -($size / 2);
+      margin-right: -($size / 2);
+    }
+  }
+
+  @include breakpoint(xlarge) {
+    flex-flow: row nowrap;
+  }
+
+  > .content {
+    @include xy-cell(auto, false);
+    @include page-content-gutter;
+  }
+
+  > .sidebar {
+    @include xy-cell(shrink, false);
+    @include page-content-gutter;
+
+    @include breakpoint(xlarge) {
+      width: $page-content-sidebar-width;
+    }
+  }
+}
+
+
+// Page Content Component
+
+@mixin bedrock-page-content {
+  .page-content {
+    @include page-content;
+  }
+}

data/assets/bedrock/scss/components/reveal-panel.scss

@@ -0,0 +1,89 @@
+$panel-font-color: $body-font-color !default;
+$panel-font-color-alt: $body-background !default;
+
+// Reveal Panel Mixins
+
+@mixin reveal-panel-header {
+  @include xy-cell-reset();
+  @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+}
+
+@mixin reveal-panel-content {
+  @include xy-cell-reset();
+  @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+  @include xy-cell-block(true);
+}
+
+@mixin reveal-panel-footer {
+  @include xy-cell-reset();
+  @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+}
+
+@mixin reveal-panel-size($full: false) {
+  @if $full {
+    height: 100vh;
+    max-height: unset;
+  }
+
+  @else {
+    height: auto;
+    max-height: 96vh;
+
+    @include breakpoint($-zf-zero-breakpoint only) {
+      height: 100vh;
+      max-height: unset;
+    }
+  }
+}
+
+@mixin reveal-panel {
+  padding: 0 !important;
+  border: 0 !important;
+
+  .close-button {
+    top: .8rem;
+  }
+
+  .panel {
+    @include xy-grid(vertical, false);
+    @include xy-grid-frame(true);
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} .close-button {
+        color: color-pick-contrast($color, ($panel-font-color, $panel-font-color-alt));
+      }
+    }
+  }
+
+  .panel-header {
+    @include reveal-panel-header;
+  }
+
+  .panel-content {
+    @include reveal-panel-content;
+  }
+
+  .panel-footer {
+    @include reveal-panel-footer;
+  }
+
+  .panel, .panel-content {
+    @include reveal-panel-size;
+  }
+
+  &.full {
+
+    .panel, .panel-content {
+      @include reveal-panel-size(true);
+    }
+  }
+}
+
+
+// Reveal Panel Component
+
+@mixin bedrock-reveal-panel {
+  .reveal-panel {
+    @include reveal-panel;
+  }
+}

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

@@ -0,0 +1,332 @@
+// Select Box Mixins
+
+@mixin select-box-list {
+  &.select2-container--list {
+    .select2-selection--multiple {
+
+      .select2-selection__choice {
+        font-size: inherit;
+        margin: 0 0 ($global-margin / 2);
+        padding: $global-margin / 2;
+        display: block;
+        width: 100%;
+      }
+
+      .select2-selection__rendered {
+        padding: 0;
+      }
+    }
+
+    .select2-search--inline {
+      display: block;
+      width: 100%;
+
+      .select2-search__field {
+        margin: 0;
+        width: 100% !important;
+      }
+    }
+  }
+}
+
+@mixin select-box-single {
+  .select2-selection--single {
+    @include form-select;
+    display: block;
+    width: 100%;
+    margin: 0;
+
+    .select2-selection__clear {
+      position: relative;
+    }
+  }
+}
+
+@mixin select-box-multiple {
+  &.select2-container--default {
+
+    .select2-selection--multiple {
+      @include form-element;
+
+      .select2-selection__choice {
+        float: left;
+        margin-right: 5px;
+        margin-top: 5px;
+      }
+
+      .select2-selection__rendered {
+        margin: -5px;
+      }
+    }
+
+    .select2-search--inline {
+      float: left;
+
+      .select2-search__field {
+        margin: 5px 0;
+        padding: 0;
+        border: none;
+        height: auto;
+        background: transparent;
+        outline: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .select2-selection--multiple {
+    display: block;
+    width: 100%;
+    height: auto !important;
+    margin: 0 !important;
+
+    .select2-selection__clear {
+      cursor: pointer;
+      float: right;
+      font-weight: bold;
+      margin-top: 5px;
+      margin-right: 10px;
+    }
+
+    .select2-selection__choice {
+      @include label;
+      background: $label-background;
+      color: $label-color;
+    }
+
+    .select2-selection__choice__remove {
+      cursor: pointer;
+      display: inline-block;
+      font-weight: bold;
+      margin-right: 5px;
+    }
+  }
+
+  [dir="rtl"] {
+    .select2-selection--multiple {
+      .select2-selection__choice {
+        margin-left: 5px;
+        margin-right: auto;
+      }
+
+      .select2-selection__choice__remove {
+        margin-left: 2px;
+        margin-right: auto;
+      }
+    }
+  }
+}
+
+@mixin select-box-basics {
+  .select2-close-mask {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    min-width: 100%;
+    height: auto;
+    width: auto;
+    opacity: 0;
+    z-index: 99;
+    background-color: #fff;
+  }
+
+  .select2-selection__rendered {
+    display: block;
+    padding: 0 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    list-style-type: none;
+    margin: 0;
+  }
+
+  .select2-selection__placeholder {
+    color: $input-placeholder-color;
+    display: inline-block;
+  }
+
+  .select2-hidden-accessible {
+    display: none !important;
+
+    + .select2-container {
+      width: 100% !important;
+    }
+  }
+
+  .select2-selection__arrow {
+    display: none !important;
+  }
+
+  .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+  }
+
+  .select2-container--disabled {
+
+    .select2-selection {
+      background-color: $input-background-disabled;
+      cursor: $input-cursor-disabled;
+      pointer-events: none;
+    }
+
+    .select2-selection__clear {
+      display: none !important;
+    }
+  }
+
+  [dir="rtl"] {
+    .select2-selection__clear {
+      float: left;
+    }
+  }
+}
+
+@mixin select-box-container {
+  .select2-container {
+    display: inline-block;
+    margin: 0 0 $form-spacing;
+    position: relative;
+
+    @include select-box-single;
+    @include select-box-multiple;
+    @include select-box-list;
+  }
+}
+
+@mixin select-box-dropdown {
+  .select2-dropdown {
+    background-color: $input-background;
+    border: $input-border;
+    border-radius: $input-radius;
+    display: block;
+    position: absolute;
+    left: -100000px;
+    width: 100%;
+    z-index: 1051;
+  }
+
+  .select2-results {
+    display: block;
+
+    > .select2-results__options {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+  }
+
+  .select2-results__group {
+    cursor: default;
+    display: block;
+    padding: 4px;
+  }
+
+  .select2-results__options {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .select2-results__option--highlighted {
+
+    &[aria-selected] {
+      background-color: $anchor-color;
+      color: white;
+    }
+  }
+
+  .select2-results__option {
+    padding: $input-padding;
+    user-select: none;
+
+    &[role=group] {
+      padding: 0;
+    }
+
+    &[aria-disabled=true] {
+      color: $dark-gray;
+    }
+
+    &[aria-selected=true] {
+      background-color: $input-background-disabled;
+      color: inherit;
+    }
+
+    .select2-results__option {
+      padding-left: 1rem;
+
+      .select2-results__group {
+        padding-left: 0;
+      }
+
+      .select2-results__option {
+        margin-left: -1rem;
+        padding-left: 2rem;
+
+        .select2-results__option {
+          margin-left: -2rem;
+          padding-left: 3rem;
+
+          .select2-results__option {
+            margin-left: -3rem;
+            padding-left: 4rem;
+
+            .select2-results__option {
+              margin-left: -4rem;
+              padding-left: 5rem;
+
+              .select2-results__option {
+                margin-left: -5rem;
+                padding-left: 6rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .select2-container--open .select2-dropdown {
+    left: 0;
+  }
+
+  .select2-container--open .select2-dropdown--above {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .select2-container--open .select2-dropdown--below {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .select2-search--dropdown {
+    display: block;
+    padding: 4px;
+
+    .select2-search__field {
+      margin: 0;
+    }
+
+    &.select2-search--hide {
+      display: none;
+    }
+  }
+}
+
+
+// Select Box Component
+
+@mixin bedrock-select-box {
+  @include select-box-container;
+  @include select-box-dropdown;
+  @include select-box-basics;
+}