bedrock_sass 0.1.9 → 0.2.0

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

@@ -2,11 +2,13 @@
 @import 'components/helper-classes';
 @import 'components/header';
 @import 'components/panel';
+@import 'components/lists';
 @import 'components/logo-bar';
 @import 'components/off-canvas-menu';
 @import 'components/reveal-panel';
 @import 'components/attachments-grid';
 @import 'components/no-content';
+@import 'components/file-preview';
 @import 'components/login-box';
 @import 'components/dropzone-upload';
 @import 'components/inline-edit-box';
@@ -18,16 +20,26 @@
 @import 'components/seo-analysis';
 @import 'components/shortcode-reveal';
 @import 'components/media-reveal';
+@import 'components/date-picker';
+@import 'components/ace-editor';
+@import 'components/place-autocomplete';
+@import 'components/item-list';
+@import 'components/rrule-generator';
+@import 'components/rrule-reveal';
+@import 'components/frame-embed';
+@import 'components/icon-box';
 
 @include bedrock-global-styles;
 @include bedrock-prototype-classes;
 @include bedrock-header;
 @include bedrock-panel;
+@include bedrock-lists;
 @include bedrock-logo-bar;
 @include bedrock-off-canvas-menu;
 @include bedrock-reveal-panel;
 @include bedrock-attachments-grid;
 @include bedrock-no-content;
+@include bedrock-file-preview;
 @include bedrock-login-box;
 @include bedrock-dropzone-upload;
 @include bedrock-inline-edit-box;
@@ -39,3 +51,11 @@
 @include bedrock-seo-analysis;
 @include bedrock-shortcode-reveal;
 @include bedrock-media-reveal;
+@include bedrock-date-picker;
+@include bedrock-ace-editor;
+@include bedrock-place-autocomplete;
+@include bedrock-item-list;
+@include bedrock-rrule-generator;
+@include bedrock-rrule-reveal;
+@include bedrock-frame-embed;
+@include bedrock-icon-box;

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

@@ -8,8 +8,9 @@
 //   3. Offcanvas Menu
 //   4. Panel
 //   5. No Content
-//   6. Page Content
-//   7. Login Box
+//   6. File Preview
+//   7. Page Content
+//   8. Login Box
 
 
 // 1. Header
@@ -54,7 +55,14 @@ $panel-radius: $global-radius;
 $no-content-color: $medium-gray;
 
 
-// 6. Page Content
+// 6. File Preview
+// ---------
+
+$file-preview-background: #cccccc;
+$file-preview-color: #808080;
+
+
+// 7. Page Content
 // ---------
 
 $page-content-sidebar-sizes: (
@@ -63,7 +71,7 @@ $page-content-sidebar-sizes: (
 );
 
 
-// 7. Login Box
+// 8. Login Box
 // ---------
 
 $login-box-width: 26rem;

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

@@ -723,8 +723,10 @@ $prototype-text-overflow: ellipsis;
 
 $responsive-embed-margin-bottom: rem-calc(16);
 $responsive-embed-ratios: (
-  default: 4 by 3,
-  widescreen: 16 by 9,
+  default: 16 by 9,
+  vertical: 9 by 16,
+  panorama: 16 by 6,
+  square: 1 by 1,
 );
 
 // 47. Reveal

data/assets/bedrock/scss/components/ace-editor.scss

@@ -0,0 +1,21 @@
+// No Content Mixins
+
+@mixin ace-editor {
+  border: 1px solid smart-scale($panel-background, $panel-color-scale);
+
+  .ace_editor {
+
+    textarea {
+      min-height: 0;
+    }
+  }
+}
+
+
+// No Content Component
+
+@mixin bedrock-ace-editor {
+  .ace-editor {
+    @include ace-editor;
+  }
+}

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

@@ -28,6 +28,15 @@
     }
   }
 
+  &.is-new .thumbnail {
+    box-shadow: 0 0 0 2px $success-color !important;
+
+    .new-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
   @at-root .removable#{&} {
 
     &:hover, &:focus {
@@ -53,12 +62,18 @@
     user-select: none;
     width: 100%;
     font-size: $small-font-size;
+    display: flex;
+    min-height: calc(100% - #{$thumbnail-margin-bottom});
   }
 
   .remove-button {
     @include attachments-grid-button($alert-color);
   }
 
+  .new-button {
+    @include attachments-grid-button($success-color);
+  }
+
   .check-button {
     @include attachments-grid-button;
   }
@@ -86,24 +101,12 @@
 }
 
 @mixin attachments-grid {
-  @include xy-grid;
-  @include xy-grid-layout(1, '.attachment');
-  margin-left: -.625rem;
-  margin-right: -.625rem;
-
-  @for $i from 1 through 9 {
-    &[data-grid-columns="#{$i}"] {
-      @include xy-grid-layout($i, '.attachment');
-
-      .attachment {
-        max-width: 100% !important;
-      }
-    }
-  }
+  display: grid;
+  grid-gap: 0 1.2rem;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
 
   .attachment {
     @include attachments-grid-item;
-    max-width: 170px;
   }
 }
 

data/assets/bedrock/scss/components/date-picker.scss

@@ -0,0 +1,146 @@
+$datepicker-width: 8rem !default;
+$datepicker-background: $white !default;
+$datepicker-color: inherit !default;
+
+// Date Picker Mixins
+
+@mixin background-calendar($color: $black) {
+  $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
+  $path: 'M14,14H7V16H14M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M17,10H7V12H17V10Z';
+  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 date-picker-clndr {
+  background: $datepicker-background;
+  color: $datepicker-color;
+
+  .clndr-controls {
+    @include xy-grid;
+    text-align: center;
+    align-items: center;
+
+    .month {
+      @include xy-cell(auto, false);
+      padding: .5rem;
+      cursor: default;
+    }
+
+    .clndr-control-button {
+      @include xy-cell(shrink, false);
+
+      span {
+        font-size: 0;
+        white-space: nowrap;
+        width: 2rem;
+        overflow: hidden;
+        padding: .6rem;
+        display: block;
+        cursor: pointer;
+
+        &:before {
+          display: inline-block !important;
+          vertical-align: middle;
+        }
+
+        &.inactive {
+          opacity: .5;
+          cursor: default;
+        }
+      }
+
+      .clndr-previous-button:before {
+        @include css-triangle(8px, $medium-gray, left);
+      }
+
+      .clndr-next-button:before {
+        @include css-triangle(8px, $medium-gray, right);
+      }
+    }
+  }
+
+  .clndr-table {
+    max-width: 100%;
+    margin: 0;
+    border: 0;
+    background: none;
+
+    tbody {
+      border-width: 0;
+      background: none;
+    }
+
+    thead, tfoot {
+      border-width: 1px 0;
+      background: none;
+    }
+
+    tr {
+      background: none;
+    }
+
+    td {
+      padding: .5rem;
+      text-align: center;
+      background: none;
+    }
+
+    tbody td {
+
+      &:hover {
+        background: $dark-gray;
+        color: $white;
+      }
+    }
+
+    .day {
+      cursor: pointer;
+
+      &.today:not(:hover):not(.selected) {
+        background: $light-gray;
+      }
+
+      &.adjacent-month, &.inactive {
+        opacity: .5;
+        pointer-events: none;
+        cursor: default;
+      }
+
+      &.selected {
+        background: $anchor-color;
+        color: $white;
+      }
+    }
+  }
+}
+
+@mixin date-picker-dropdown {
+  border-top-width: 0;
+  min-width: $datepicker-width;
+  padding: 0;
+
+  .clndr {
+    @include date-picker-clndr;
+  }
+}
+
+@mixin date-picker-input {
+  @include background-calendar($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;
+}
+
+
+// Date Picker Component
+
+@mixin bedrock-date-picker {
+  .datepicker-dropdown {
+    @include date-picker-dropdown;
+  }
+
+  input.datepicker {
+    @include date-picker-input;
+  }
+}

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

@@ -108,6 +108,13 @@ $dropzone-upload-active-border-color: $primary-color !default;
       background: $white;
       top: 0;
       right: 0;
+
+      &.left {
+        right: auto;
+        left: 0;
+        border-right: $thumbnail-border;
+        border-left: 0;
+      }
     }
 
     .message {

data/assets/bedrock/scss/components/file-input.scss

@@ -16,6 +16,13 @@
     position: relative;
     z-index: 1;
   }
+
+  video, img {
+    max-width: 100%;
+    display: block;
+    width: auto;
+    margin: auto;
+  }
 }
 
 

data/assets/bedrock/scss/components/file-preview.scss

@@ -0,0 +1,36 @@
+$file-preview-background: #cccccc !default;
+$file-preview-color: #808080 !default;
+
+// File Preview Mixins
+
+@mixin file-preview {
+  padding: $global-padding * 2;
+  text-align: center;
+  background: $file-preview-background;
+  color: $file-preview-color;
+
+  > i {
+    font-size: 3rem;
+  }
+
+  > img {
+    height: 3rem;
+    margin-bottom: $global-margin;
+  }
+
+  > span {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+
+// File Preview Component
+
+@mixin bedrock-file-preview {
+  .file-preview {
+    @include file-preview;
+  }
+}

data/assets/bedrock/scss/components/frame-embed.scss

@@ -0,0 +1,23 @@
+// Frame Embed Mixins
+
+@mixin frame-embed {
+  display: block;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+
+  iframe {
+    display: block;
+    border: 0;
+    width: 100%;
+  }
+}
+
+
+// Frame Embed Component
+
+@mixin bedrock-frame-embed {
+  .frame-embed {
+    @include frame-embed;
+  }
+}

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

@@ -22,6 +22,10 @@
     resize: vertical;
   }
 
+  select {
+    padding-#{$global-right}: ($form-spacing * 1.7);
+  }
+
   .top-bar,
   .logo-bar {
     min-height: 4rem;
@@ -60,4 +64,27 @@
       }
     }
   }
+
+  .form-element {
+    @include form-element;
+    line-height: initial;
+  }
+
+  .table-scroll {
+
+    table {
+      width: 100%;
+    }
+  }
+
+  .progress {
+
+    &.small {
+      height: $meter-height / 2;
+    }
+
+    &.large {
+      height: $meter-height * 2;
+    }
+  }
 }