bedrock_sass 0.1.2 → 0.1.3

data/assets/bedrock/scss/_bedrock-components.scss

@@ -4,7 +4,15 @@
 @import 'components/panel';
 @import 'components/logo-bar';
 @import 'components/off-canvas-menu';
+@import 'components/reveal-panel';
+@import 'components/attachments-grid';
+@import 'components/no-content';
+@import 'components/login-box';
+@import 'components/dropzone-upload';
+@import 'components/inline-edit-box';
+@import 'components/page-content';
 @import 'components/tiny-mce-editor';
+@import 'components/select-box';
 
 @include bedrock-global-styles;
 @include bedrock-prototype-classes;
@@ -12,4 +20,12 @@
 @include bedrock-panel;
 @include bedrock-logo-bar;
 @include bedrock-off-canvas-menu;
+@include bedrock-reveal-panel;
+@include bedrock-attachments-grid;
+@include bedrock-no-content;
+@include bedrock-login-box;
+@include bedrock-dropzone-upload;
+@include bedrock-inline-edit-box;
+@include bedrock-page-content;
 @include bedrock-tiny-mce-editor;
+@include bedrock-select-box;

data/assets/bedrock/scss/_bedrock-settings.scss

@@ -7,6 +7,8 @@
 //   2. Logo Bar
 //   3. Offcanvas Menu
 //   4. Panel
+//   5. No Content
+//   6. Login Box
 
 
 // 1. Header
@@ -43,3 +45,16 @@ $panel-padding: $global-padding;
 $panel-font-color: $body-font-color;
 $panel-font-color-alt: $body-background;
 $panel-radius: $global-radius;
+
+
+// 5. No Content
+// ---------
+
+$no-content-color: $medium-gray;
+
+
+// 6. Login Box
+// ---------
+
+$login-box-width: 26rem;
+$login-box-logo-width: 16rem;

data/assets/bedrock/scss/components/attachments-grid.scss

@@ -0,0 +1,138 @@
+// Attachments Grid Mixins
+
+@mixin attachments-grid-button($color: $primary-color) {
+  position: absolute;
+  top: -.6rem;
+  right: -.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  background: $color;
+  color: white;
+  font-size: 1.2rem;
+  line-height: 1;
+  padding: .2rem;
+  text-align: center;
+  opacity: 0;
+  visibility: hidden;
+  display: block;
+  cursor: pointer;
+}
+
+@mixin attachments-grid-item {
+  &.is-active .thumbnail {
+    box-shadow: 0 0 0 2px $anchor-color;
+
+    .check-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  @at-root .removable#{&} {
+
+    &:hover, &:focus {
+
+      .thumbnail {
+        box-shadow: 0 0 0 2px $alert-color;
+      }
+
+      .remove-button {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .check-button {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  .thumbnail {
+    position: relative;
+    user-select: none;
+    width: 100%;
+    font-size: $small-font-size;
+  }
+
+  .remove-button {
+    @include attachments-grid-button($alert-color);
+  }
+
+  .check-button {
+    @include attachments-grid-button;
+  }
+
+  img {
+    display: block;
+    margin: 0;
+    width: 100%;
+  }
+
+  .filename {
+    display: block;
+    line-height: 1.2;
+    position: absolute;
+    background: $white;
+    border-top: $thumbnail-border;
+    line-height: 1.2;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+@mixin attachments-grid {
+  @include xy-grid;
+  @include xy-grid-layout(1, '.attachment');
+  margin-left: -.625rem;
+  margin-right: -.625rem;
+
+  @include breakpoint(320px) {
+    @include xy-grid-layout(2, '.attachment');
+  }
+
+  @include breakpoint(480px) {
+    @include xy-grid-layout(3, '.attachment');
+  }
+
+  @include breakpoint(680px) {
+    @include xy-grid-layout(4, '.attachment');
+  }
+
+  @include breakpoint(800px) {
+    @include xy-grid-layout(5, '.attachment');
+  }
+
+  @include breakpoint(1280px) {
+    @include xy-grid-layout(6, '.attachment');
+  }
+
+  @include breakpoint(1366px) {
+    @include xy-grid-layout(7, '.attachment');
+  }
+
+  @include breakpoint(1440px) {
+    @include xy-grid-layout(8, '.attachment');
+  }
+
+  @include breakpoint(1600px) {
+    @include xy-grid-layout(9, '.attachment');
+  }
+
+  .attachment {
+    @include attachments-grid-item;
+  }
+}
+
+
+// Attachments Grid Component
+
+@mixin bedrock-attachments-grid {
+  .attachments-grid {
+    @include attachments-grid;
+  }
+}

data/assets/bedrock/scss/components/dropzone-upload.scss

@@ -0,0 +1,158 @@
+$dropzone-upload-border: 2px dashed $light-gray !default;
+$dropzone-upload-active-background: $primary-color !default;
+$dropzone-upload-active-border-color: $primary-color !default;
+
+// No Content Mixins
+
+@mixin dropzone-upload {
+
+  &.dz-drag-hover {
+
+    .dz-message {
+
+      &.bordered {
+        border-color: $dropzone-upload-active-border-color;
+      }
+
+      &:after {
+        opacity: .5;
+        visibility: visible;
+      }
+    }
+  }
+
+  .dz-message {
+    position: relative;
+    overflow: hidden;
+    transition-property: border;
+    transition-duration: .2s;
+
+    &.bordered {
+      border: $dropzone-upload-border;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: $dropzone-upload-active-background;
+      opacity: 0;
+      visibility: hidden;
+      transition-property: visibility opacity;
+      transition-duration: .2s;
+    }
+  }
+
+  .dz-complete {
+
+    .progress {
+      display: none;
+    }
+  }
+
+  .dz-success {
+
+    .thumbnail {
+
+      .success {
+        opacity: 0;
+        visibility: visible;
+        @include mui-animation(fade(0, 1), slide(out, up), fade(1, 0));
+        animation-duration: 1.5s;
+      }
+    }
+  }
+
+  .dz-error {
+
+    .thumbnail {
+
+      &:hover .message {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .error {
+        opacity: 1;
+        visibility: visible;
+        @include mui-animation(fade(0, 1), wiggle(15deg));
+        animation-duration: 1.5s;
+      }
+    }
+  }
+
+  .thumbnail {
+
+    .size, .message {
+      display: block;
+      line-height: 1.2;
+      position: absolute;
+    }
+
+    .progress {
+      position: absolute;
+      top: 50%;
+      left: 1rem;
+      right: 1rem;
+      height: 10px;
+      margin-top: -5px;
+    }
+
+    .size {
+      border-left: $thumbnail-border;
+      border-bottom: $thumbnail-border;
+      background: $white;
+      top: 0;
+      right: 0;
+    }
+
+    .message {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: 100%;
+      background: $alert-color;
+      color: $white;
+      padding: 4px;
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .success, .error {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      padding: .5rem;
+      border-radius: 50%;
+      margin-top: -1.1rem;
+      margin-left: -1.1rem;
+      color: white;
+      font-size: 1.2rem;
+      width: 2.2rem;
+      height: 2.2rem;
+      line-height: 1.2rem;
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .success {
+      background: $success-color;
+    }
+
+    .error {
+      background: $alert-color;
+    }
+  }
+}
+
+
+// No Content Component
+
+@mixin bedrock-dropzone-upload {
+  .dropzone {
+    @include dropzone-upload;
+  }
+}

data/assets/bedrock/scss/components/global.scss

@@ -9,6 +9,19 @@
     }
   }
 
+  input {
+
+    &[type="checkbox"],
+    &[type="radio"] {
+      position: relative;
+      top: 2px;
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
   .top-bar,
   .logo-bar {
     min-height: 4rem;
@@ -28,15 +41,10 @@
     }
   }
 
-  table {
-
-    input {
+  .menu {
 
-      &[type="radio"],
-      &[type="checkbox"] {
-        position: relative;
-        top: 2px;
-      }
+    a {
+      align-items: center;
     }
   }
 

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

@@ -48,6 +48,65 @@
   }
 }
 
+@mixin form-helpers {
+  #{text-inputs()}, select {
+
+    &.large {
+      $fsize: 1.292rem;
+      $height: ($fsize * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
+
+      font-size: $fsize;
+      height: $height;
+    }
+
+    &.small {
+      $fsize: .8rem;
+      $height: ($fsize * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
+
+      font-size: $fsize;
+      height: $height;
+    }
+  }
+
+  .input-group-list {
+
+    #{text-inputs()}, select, textarea {
+      margin-bottom: -1px;
+
+      &:active, &:focus {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+@mixin color-helpers {
+  @each $attr in (background, background-color, border-color, color) {
+    .#{$attr} {
+
+      &-none {
+        #{$attr}: none !important;
+      }
+
+      @each $name, $color in $foundation-palette {
+        &-#{$name} {
+          #{$attr}: $color !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin text-helpers {
+  .text-small {
+    font-size: $small-font-size;
+  }
+}
+
 @mixin bedrock-prototype-classes {
   @include table-helpers;
+  @include form-helpers;
+  @include color-helpers;
+  @include text-helpers;
 }