active_frontend 13.3.0 → 14.0.0

data/vendor/assets/stylesheets/components/_datepicker.scss

@@ -0,0 +1,80 @@
+// Table of Contents
+// ==================================================
+// Datepicker
+
+// scss-lint:disable NestingDepth
+// scss-lint:disable SelectorDepth
+
+// Datepicker
+// ==================================================
+.datepicker {
+  padding: 4px;
+
+  table {
+    width: 100%;
+
+    td,
+    th {
+      border-radius: border-radius(b);
+      padding: 8px 6px;
+      text-align: center;
+    }
+    th:not(.dow) {
+      &:hover,
+      &:focus {
+        background: color(haze);
+        cursor: pointer;
+      }
+    }
+    td {
+      &.today { color: color(primary); }
+      &.day,
+      &.today {
+        &:hover,
+        &:focus {
+          background: color(haze);
+          cursor: pointer;
+        }
+        &:active,
+        &.active {
+          background: color(primary);
+          color: color(white);
+        }
+      }
+      &.old,
+      &.new { color: color(gray); }
+      &.disabled {
+        background: color(transparent);
+        color: color(gray);
+        cursor: not-allowed;
+      }
+
+      span {
+        border-radius: border-radius(b);
+        display: block;
+        float: left;
+        margin: 1%;
+        padding: 13px 0;
+        width: 23%;
+
+        &:hover,
+        &.focus,
+        &.focused {
+          background: color(haze);
+          cursor: pointer;
+        }
+        &:active,
+        &.active,
+        &.focused {
+          background: color(primary);
+          color: color(white);
+        }
+        &.disabled {
+          background: color(transparent);
+          color: color(gray);
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_dropmenu.scss

@@ -0,0 +1,151 @@
+// Table of Contents
+// ==================================================
+// Dropmenu
+// Dropup
+
+// scss-lint:disable NestingDepth
+// scss-lint:disable SelectorDepth
+
+// Dropmenu
+// ==================================================
+.dropmenu {
+  @include transition(all 0.09s ease-in-out);
+  background: color(white);
+  border: 1px solid color(dark-haze);
+  border-radius: border-radius(b);
+  color: color(black);
+  display: none;
+  float: left;
+  font-size: text-size(b);
+  line-height: 1;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 200px;
+  padding: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 1040;
+
+  &.pull-right {
+    left: auto;
+    right: 0;
+  }
+  &.caret {
+    top: calc(100% + 5px);
+
+    &::before,
+    &::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+    }
+    &::before {
+      border-bottom: 7px solid;
+      border-bottom-color: inherit;
+      border-left: 7px solid color(transparent);
+      border-right: 7px solid color(transparent);
+      left: 9px;
+      top: -7px;
+    }
+    &::after {
+      border-bottom: 6px solid;
+      border-bottom-color: color(white);
+      border-left: 6px solid color(transparent);
+      border-right: 6px solid color(transparent);
+      left: 10px;
+      top: -6px;
+    }
+
+    &.pull-right {
+      &::before,
+      &::after { left: auto; }
+      &::before { right: 9px; }
+      &::after { right: 10px; }
+    }
+    &.dark {
+      &::after { border-bottom-color: color(black); }
+    }
+    &.light {
+      &::after { border-bottom-color: color(light-haze); }
+    }
+  }
+
+  li {
+    > a {
+      clear: both;
+      display: block;
+      padding: 10px 20px;
+
+      i:first-child {
+        display: inline-block;
+        min-width: 14px;
+        text-align: center;
+      }
+    }
+
+    &:first-child {
+      > a { padding-top: 20px; }
+    }
+    &:last-child {
+      > a { padding-bottom: 20px; }
+    }
+
+    &.divider {
+      border-top: 1px solid;
+      border-top-color: inherit;
+      margin: 10px 0 8px;
+      overflow: hidden;
+    }
+  }
+}
+.open > .dropmenu {
+  @include animation-duration(0.5s);
+  @include animation-fill-mode(both);
+  @include animation-name(animation-bounce-in);
+  display: block;
+}
+
+// Dropup
+// ==================================================
+.dropup {
+  .dropmenu {
+    bottom: 100%;
+    margin: 0 0 2px;
+    top: auto;
+
+    &.caret {
+      bottom: calc(100% + 5px);
+      top: auto;
+
+      &::before,
+      &::after {
+        border-bottom: 0;
+        top: auto;
+      }
+      &::before {
+        border-top: 7px solid;
+        border-top-color: inherit;
+        bottom: -7px;
+        left: 9px;
+      }
+      &::after {
+        border-top: 6px solid color(white);
+        bottom: -6px;
+        left: 10px;
+      }
+
+      &.pull-right {
+        &::before,
+        &::after { left: auto; }
+        &::before { right: 9px; }
+        &::after { right: 10px; }
+      }
+      &.dark {
+        &::after { border-top-color: color(black); }
+      }
+      &.light {
+        &::after { border-top-color: color(light-haze); }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_footer.scss

@@ -0,0 +1,11 @@
+// Table of Contents
+// ==================================================
+// Footer
+
+// Footer
+// ==================================================
+.footer {
+  border-top: 1px solid color(dark-haze);
+  margin-top: 40px;
+  padding: 40px 0 20px;
+}

data/vendor/assets/stylesheets/components/_grid.scss

@@ -0,0 +1,144 @@
+// Table of Contents
+// ==================================================
+// Visibilities
+// Rows
+// Containers
+// Columns
+// Media Queries
+
+// Visibilities
+// ==================================================
+.visible { display: inherit; }
+.hidden,
+.hidden-desktop { display: none; }
+
+// Rows
+// ==================================================
+@each $type in $grid-row-types {
+  @each $name, $margin in $grid-row-margins {
+    .#{dasherize($type, $name)} {
+      &::before,
+      &::after {
+        clear: both;
+        content: '\0020';
+        display: block;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+        width: 0;
+      }
+    }
+  }
+}
+@each $name, $margin in $grid-row-margins {
+  .#{dasherize(row, $name)} { margin-bottom: $margin; }
+}
+
+// Containers
+// ==================================================
+@each $type in $grid-container-types {
+  $i: index($grid-container-types, $type);
+
+  @each $name, $widths in $grid-container-widths {
+    $width: nth($widths, $i);
+
+    @if $width {
+      .#{dasherize($type, $name)} {
+        margin: 0 auto;
+        padding: 0;
+        position: relative;
+        width: $width;
+      }
+
+      @if $i == 2 {
+        .container-max-#{$name} { max-width: $width; }
+      }
+    }
+  }
+}
+
+// Columns
+// ==================================================
+.cols {
+  display: inline;
+  float: left;
+  margin-left: 10px;
+  margin-right: 10px;
+
+  &.alpha { margin-left: 0; }
+  &.omega { margin-right: 0; }
+}
+
+@each $name, $width in $grid-column-widths {
+  .#{$name}.cols {
+    width: calc(#{$width} - 20px);
+
+    &.alpha,
+    &.omega { width: calc(#{$width} - 10px); }
+    &.alpha.omega { width: $width; }
+  }
+  .offset-by-#{$name} { padding-left: $width; }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (min-width: 960px) and (max-width: 1365px) {
+  @each $name, $widths in $grid-container-widths {
+    $width: nth($widths, 2);
+
+    @if $width {
+      @if $width > 960 {
+        .conatinerFixed-#{$name} { width: 960px; }
+      }
+    }
+  }
+
+  .hidden-desktop { display: inherit; }
+  .hidden-laptop { display: none; }
+}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  @each $name, $widths in $grid-container-widths {
+    $width: nth($widths, 2);
+
+    @if $width {
+      @if $width > 760 {
+        .conatinerFixed-#{$name} { width: 760px; }
+      }
+    }
+  }
+
+  .hidden-desktop { display: inherit; }
+  .hidden-tablet { display: none; }
+}
+@media only screen and (max-width: 767px) {
+  @each $name, $margin in $grid-row-margins {
+    .#{dasherize(rowResponsive, $name)} { margin-bottom: $margin; }
+  }
+  @each $type in $grid-container-types {
+    $i: index($grid-container-types, $type);
+
+    @each $name, $widths in $grid-container-widths {
+      $width: nth($widths, $i);
+
+      @if $width {
+        .#{dasherize($type, $name)} { width: calc(100% - 20px); }
+      }
+    }
+  }
+  @each $name, $width in $grid-column-widths {
+    .#{$name}.cols {
+      margin: 0;
+      width: 100%;
+
+      &.alpha,
+      &.omega,
+      &.alpha.omega {
+        margin: 0;
+        width: 100%;
+      }
+    }
+    .offset-by-#{$name} { padding-left: 0; }
+  }
+  .hidden-desktop { display: inherit; }
+  .hidden-phone { display: none; }
+}

data/vendor/assets/stylesheets/components/_header.scss

@@ -0,0 +1,99 @@
+// Table of Contents
+// ==================================================
+// Header
+// Media Queries
+
+// Header
+// ==================================================
+.header {
+  // background: color(white);
+  background: color(light-haze);
+
+  border-bottom: 1px solid color(dark-haze);
+  box-sizing: border-box;
+  height: 76px;
+  line-height: 1;
+  padding: 18px;
+}
+.header-brand,
+.header-search,
+.header-nav,
+.header-user,
+.header-toggle {
+  box-sizing: border-box;
+  float: left;
+  height: 40px;
+}
+.header-brand {
+  font-size: 35px;
+
+  + .header-search,
+  + .header-nav {
+    margin-left: 20px;
+
+    &.pull-right {
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+}
+.header-search {
+  min-width: 260px;
+
+  input { margin-bottom: 0; }
+
+  + .header-nav {
+    margin-left: 20px;
+
+    &.pull-right {
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+}
+.header-nav {
+  list-style: none;
+  margin-top: 11px;
+  padding: 0;
+
+  > li {
+    float: left;
+    margin-right: 20px;
+
+    &:last-child { margin-right: 0; }
+    &.btn-group { font-size: inherit; }
+
+    .btn { margin-top: -11px; }
+  }
+}
+.header-user {
+  float: right;
+
+  img {
+    height: 40px;
+    display: inline-block;
+
+    + i { margin-left: -2px; }
+  }
+
+  &.btn-group { font-size: inherit; }
+}
+.header-toggle {
+  float: right;
+  font-size: 26px;
+  padding-top: 5px;
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: 767px) {
+  .header {
+    height: 50px;
+    padding: 10px;
+  }
+  .header-brand,
+  .header-toggle {
+    font-size: 26px;
+    padding-top: 1px;
+  }
+}