bedrock_sass 0.1.1 → 0.1.2

data/assets/bedrock/scss/bedrock.scss

@@ -0,0 +1,7 @@
+@charset 'utf-8';
+
+@import 'foundation-settings';
+@import 'foundation-components';
+
+@import 'bedrock-settings';
+@import 'bedrock-components';

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

@@ -0,0 +1,55 @@
+@mixin bedrock-global-styles {
+  main.content {
+    padding: $global-padding * 2;
+
+    @each $name, $size in $grid-column-gutter {
+      @include breakpoint($name) {
+        padding: $size;
+      }
+    }
+  }
+
+  .top-bar,
+  .logo-bar {
+    min-height: 4rem;
+    border-bottom: 1px solid darken($topbar-background, 10);
+
+    i {
+      font-size: 1.5rem;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
+  }
+
+  table {
+
+    input {
+
+      &[type="radio"],
+      &[type="checkbox"] {
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+
+  .pagination {
+
+    .current, .disabled, .ellipsis {
+
+      a {
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        background: none;
+      }
+    }
+  }
+}

data/assets/bedrock/scss/components/header.scss

@@ -0,0 +1,60 @@
+$header-border: 1px solid darken($body-background, 10) !default;
+$header-wide-background: $white !default;
+
+// Page Header Mixins
+
+@mixin header {
+  @include xy-grid;
+  align-items: flex-end;
+  border-bottom: $header-border;
+
+  @each $name, $size in $grid-column-gutter {
+    @include breakpoint($name) {
+      padding: 0 0 ($size * 0.75);
+      margin: 0 0 $size;
+    }
+  }
+
+  &.wide {
+    background: $header-wide-background;
+
+    @each $name, $size in $grid-column-gutter {
+      @include breakpoint($name) {
+        padding: ($size * 0.75) $size;
+        margin: (-$size) (-$size) $size;
+      }
+    }
+  }
+}
+
+@mixin header-title {
+  @include xy-cell(auto, false);
+  margin: 0;
+  line-height: 1;
+}
+
+@mixin header-actions {
+  @include xy-cell(shrink, false);
+  margin: 0;
+}
+
+
+// Page Header Component
+
+@mixin bedrock-header {
+  .header {
+    @include header;
+
+    .title {
+      @include header-title;
+    }
+
+    .actions {
+      @include header-actions;
+
+      a {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+// Table helpers
+
+@mixin table-helpers {
+
+  th, td {
+
+    &.shrink, &.compact, &.check {
+      width: 1px;
+      white-space: nowrap;
+    }
+
+    &.compact:not(:last-child) {
+      padding-right: $global-padding * 2;
+    }
+
+    &.center {
+      text-align: center;
+
+      &.compact {
+        padding-left: $global-padding * 2;
+        padding-right: $global-padding * 2;
+      }
+    }
+
+    &.expand {
+      width: 100%;
+    }
+
+    &.check {
+
+      input {
+        margin: 0;
+      }
+    }
+
+    &.actions {
+      white-space: nowrap;
+
+      a {
+        margin: 0;
+        padding: ($global-padding / 4) ($global-padding / 3.5);
+
+        &:not(:last-child) {
+          margin-right: $global-padding / 4;
+        }
+      }
+    }
+  }
+}
+
+@mixin bedrock-prototype-classes {
+  @include table-helpers;
+}

data/assets/bedrock/scss/components/logo-bar.scss

@@ -0,0 +1,45 @@
+$logo-bar-color: $white !default;
+$logo-bar-background: $primary-color !default;
+$logo-bar-padding: $topbar-padding !default;
+
+// Logo Bar Mixins
+
+@mixin logo-bar {
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  @else {
+    @include clearfix;
+  }
+
+  padding: $logo-bar-padding;
+  background: $logo-bar-background;
+  border-color: $logo-bar-background;
+  color: $logo-bar-color;
+
+  img {
+    height: 1.6rem;
+  }
+
+  span {
+    margin: 0;
+    margin-left: .7rem;
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size: 1.2rem;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+
+// Logo Bar Components
+
+@mixin bedrock-logo-bar {
+  .logo-bar {
+    @include logo-bar;
+  }
+}

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

@@ -0,0 +1,359 @@
+$offcanvas-menu-background: $secondary-color !default;
+$offcanvas-menu-collapsed-size: 4.1rem !default;
+$offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !default;
+
+// Offcanvas Menu Mixins
+
+@mixin off-canvas-menu-wrapper {
+  @include xy-grid;
+  @include off-canvas-wrapper;
+  min-height: 100vh;
+}
+
+@mixin off-canvas-menu-content {
+  @include xy-cell(auto, false);
+  @extend .#{$maincontent-class};
+
+  @include breakpoint(large) {
+    margin: 0;
+    transform: none;
+    transition: none;
+  }
+}
+
+@mixin off-canvas-menu-header {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  border-color: $offcanvas-menu-background;
+  justify-content: flex-start;
+
+  .logo-small {
+    display: none;
+    width: 100%;
+    text-align: center;
+  }
+
+  @include breakpoint(large) {
+    @at-root .is-collapsed#{&} {
+      white-space: nowrap;
+      width: $offcanvas-menu-collapsed-size;
+      padding-left: 0;
+      padding-right: 0;
+      justify-content: center;
+
+      span {
+        display: none;
+      }
+
+      .logo-big {
+        display: none;
+      }
+
+      .logo-small {
+        display: block;
+      }
+    }
+  }
+}
+
+@mixin offcanvas-menu-dot {
+  border: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba($white, 0.1);
+}
+
+@mixin offcanvas-menu-basics {
+  &.secondary {
+
+    li {
+      &:hover, &.is-active {
+
+        > a {
+          color: $menu-item-color-active;
+          background: transparent;
+        }
+      }
+
+      &.is-current {
+
+        > a {
+          color: $menu-item-color-active;
+          background: $menu-item-background-active;
+        }
+      }
+    }
+
+    a {
+      color: rgba($white, .6);
+      text-transform: uppercase;
+    }
+  }
+
+  a {
+    color: $white;
+    font-size: .9rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    outline: 0;
+  }
+
+  .submenu {
+    background: $offcanvas-menu-submenu-background;
+    margin: 0;
+  }
+
+  @include breakpoint(large) {
+    @at-root .off-canvas-menu.is-collapsed > .menu:not(.icons) {
+      display: none;
+    }
+  }
+}
+
+@mixin offcanvas-menu-icons {
+  &.icons {
+
+    i {
+      font-size: 1.2rem;
+      position: relative;
+      width: 1.2rem;
+
+      &:before {
+        @include vertical-center;
+      }
+    }
+  }
+
+  &.icon-left {
+
+    i {
+      margin-right: .7rem;
+    }
+  }
+
+  &.icon-right {
+
+    a {
+      padding-right: 40px;
+      position: relative;
+
+      i {
+        @include vertical-center;
+        left: calc(100% - 45px);
+      }
+    }
+  }
+
+  @include breakpoint(large) {
+    @at-root .off-canvas-menu.is-collapsed > .menu {
+      > li {
+
+        > a {
+          overflow: hidden;
+          white-space: nowrap;
+          width: $offcanvas-menu-collapsed-size;
+          padding-left: 0;
+          padding-right: 0;
+
+          > i {
+            position: relative;
+            transform: none;
+            margin: 0 auto;
+            left: 0;
+            width: 0;
+
+            &:before {
+              @include absolute-center;
+            }
+          }
+
+          > span {
+            width: 0;
+            opacity: 0;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin off-canvas-menu-style {
+  > li {
+    border-bottom: 1px solid rgba(white, .04);
+
+    &:hover, &.is-active {
+
+      > a {
+        box-shadow: inset 3px 0 0 $white;
+        color: $menu-item-color-active;
+        background: transparent;
+      }
+    }
+
+    &.is-current {
+
+      > a {
+        box-shadow: inset 3px 0 0 $menu-item-background-active;
+        color: $menu-item-color-active;
+        background: transparent;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    > a {
+      padding-top: 1.1rem;
+      padding-bottom: 1.1rem;
+    }
+  }
+
+  a {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+@mixin off-canvas-menu-accordion {
+  @include off-canvas-menu-style;
+
+  > li {
+
+    &:last-child {
+
+      > .submenu {
+        box-shadow: 0 1px 0 rgba(white, .04), 0 -1px 0 rgba(white, .04);
+      }
+    }
+
+    > .submenu {
+      padding: .5rem 0;
+      box-shadow: 0 -1px 0 rgba(white, .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);
+      }
+    }
+
+    > .submenu-toggle {
+      height: 50px;
+    }
+  }
+
+  .submenu-toggle {
+    height: 45px;
+    padding-right: .8rem;
+    outline: none;
+
+    &:after {
+      @include offcanvas-menu-dot;
+    }
+  }
+
+  @include breakpoint(large) {
+    @at-root .is-collapsed#{&} {
+      display: none;
+    }
+  }
+}
+
+@mixin off-canvas-menu-dropdown {
+  @include off-canvas-menu-style;
+
+  > li {
+
+    > a:after {
+      display: none !important;
+    }
+  }
+
+  .is-active > a {
+    color: $white;
+  }
+
+  .is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
+    @include offcanvas-menu-dot;
+    margin-top: -3px;
+    right: 18px;
+  }
+
+  .submenu {
+    padding: .17rem 0;
+    border: 0;
+    margin-top: -1px;
+  }
+}
+
+@mixin off-canvas-menu {
+  @include xy-cell(shrink, false);
+  @include off-canvas-base;
+  background: $offcanvas-menu-background;
+
+  @each $name, $size in $offcanvas-sizes {
+    @include breakpoint($name) {
+      width: $size;
+    }
+  }
+
+  @include breakpoint(large) {
+    @include in-canvas;
+    background: $offcanvas-menu-background;
+    visibility: visible;
+    transition: none;
+    overflow: visible;
+
+    @each $name, $size in $offcanvas-sizes {
+      width: $size;
+    }
+
+    &.is-collapsed {
+      width: $offcanvas-menu-collapsed-size;
+
+      .collapse-show {
+        display: block;
+      }
+    }
+  }
+
+  .collapse-show {
+    display: none;
+  }
+}
+
+
+// Offcanvas Menu Component
+
+@mixin bedrock-off-canvas-menu {
+  .off-canvas-menu-wrapper {
+    @include off-canvas-menu-wrapper;
+  }
+
+  .off-canvas-menu-content {
+    @include off-canvas-menu-content;
+  }
+
+  .off-canvas-menu {
+    @include off-canvas-menu;
+
+    > .logo-bar {
+      @include off-canvas-menu-header;
+    }
+
+    > .accordion-menu {
+      @include off-canvas-menu-accordion;
+    }
+
+    > .dropdown.menu {
+      @include off-canvas-menu-dropdown;
+    }
+
+    .menu {
+      @include offcanvas-menu-basics;
+      @include offcanvas-menu-icons;
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+$panel-background: $white !default;
+$panel-background-fade: 85% !default;
+$panel-color-scale: 10% !default;
+$panel-border-width: 2px !default;
+$panel-padding: $global-padding !default;
+$panel-font-color: $body-font-color !default;
+$panel-font-color-alt: $body-background !default;
+$panel-radius: $global-radius !default;
+
+// Panel Mixins
+
+@mixin panel-children-border {
+  @each $name, $color in $foundation-palette {
+    &.#{$name} {
+
+      > [class^="panel"] {
+        border-color: smart-scale($color, $panel-color-scale);
+      }
+    }
+  }
+}
+
+@mixin panel-border($color) {
+  border-color: smart-scale($color, $panel-color-scale);
+  border-style: solid;
+  border-width: 0 1px;
+
+  @each $name, $color in $foundation-palette {
+    &.#{$name} {
+      border-color: smart-scale($color, $panel-color-scale);
+    }
+  }
+
+  &:first-child {
+    border-top-width: 1px;
+  }
+
+  &:last-child {
+    border-bottom-width: 1px;
+  }
+
+  &.border {
+    border-bottom-width: 1px;
+  }
+}
+
+@mixin panel-radius {
+  &:first-child {
+    border-top-left-radius: $panel-radius;
+    border-top-right-radius: $panel-radius;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $panel-radius;
+    border-bottom-right-radius: $panel-radius;
+  }
+}
+
+@mixin panel-fill {
+  @each $name, $color in $foundation-palette {
+    &.#{$name} {
+      background-color: $color;
+      color: color-pick-contrast($color, ($panel-font-color, $panel-font-color-alt));
+    }
+  }
+}
+
+@mixin panel($color) {
+  background: $panel-background;
+  @include panel-children-border;
+  @include panel-fill;
+
+  @each $name, $size in $grid-column-gutter {
+    @include breakpoint($name) {
+      margin-bottom: $size;
+    }
+  }
+}
+
+@mixin panel-header($color) {
+  padding: $panel-padding;
+  font-weight: $global-weight-bold;
+  @include panel-border($color);
+  @include panel-radius;
+  @include panel-fill;
+}
+
+@mixin panel-footer($color) {
+  padding: $panel-padding;
+  @include panel-border($color);
+  @include panel-radius;
+  @include panel-fill;
+}
+
+@mixin panel-content($color) {
+  padding: $panel-padding;
+  @include panel-border($color);
+  @include panel-radius;
+  @include panel-fill;
+}
+
+
+// Panel Component
+
+@mixin bedrock-panel {
+  .panel {
+    @include panel($panel-background);
+  }
+
+  .panel-content {
+    @include panel-content($panel-background);
+  }
+
+  .panel-header {
+    @include panel-header($panel-background);
+  }
+
+  .panel-footer {
+    @include panel-footer($panel-background);
+  }
+}