active_frontend 13.3.0 → 14.0.0

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

@@ -0,0 +1,57 @@
+// Table of Contents
+// ==================================================
+// Label & Badge
+// Colors
+// Styles
+
+// Label & Badge
+// ==================================================
+.badge,
+.label {
+  background: color(haze);
+  border: 1px solid color(haze);
+  border-radius: border-radius(b);
+  color: color(black);
+  display: inline-block;
+  font-size: text-size(s);
+  font-weight: text-weight(semibold);
+  line-height: 1;
+  overflow: hidden;
+  padding: 6px 10px;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  &:empty { display: none; }
+}
+.badge {
+  border-radius: border-radius(xl);
+  min-width: 14px;
+  padding: 6px;
+}
+
+// Colors
+// ==================================================
+@each $name, $color in map-keys($colors) {
+  .badge-color-#{$name},
+  .label-color-#{$name} {
+    background: color($name);
+    border-color: color($name);
+    color: text-color-on($name);
+
+    &.badge-outline,
+    &.label-outline { color: color($name); }
+  }
+}
+
+// Styles
+// ==================================================
+.badge-block,
+.label-block {
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+.badge-outline,
+.label-outline { background: color(transparent); }

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

@@ -0,0 +1,63 @@
+// Table of Contents
+// ==================================================
+// Layout
+// Styles
+// Media Queries
+
+// Layout
+// ==================================================
+.layout {
+  height: 100%;
+  width: 100%;
+}
+.layout-body,
+.layout-sidebar {
+  @include overflow-scrolling(touch);
+  float: left;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.layout-body { width: 100%; }
+.layout-sidebar {
+  width: 360px;
+
+  &:not(.hidden) + .layout-body { width: calc(100% - 360px); }
+
+  &.fixed {
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1060;
+
+    + .layout-body { width: 100%; }
+  }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (min-width: 960px) and (max-width: 1365px) {
+  .layout-sidebar {
+    width: 260px;
+
+    &:not(.hidden) + .layout-body { width: calc(100% - 260px); }
+    &.fixed + .layout-body { width: 100%; }
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .layout-sidebar {
+    width: 210px;
+
+    &:not(.hidden) + .layout-body { width: calc(100% - 210px); }
+    &.fixed + .layout-body { width: 100%; }
+  }
+}
+@media only screen and (max-width: 767px) {
+  .layout-sidebar {
+    width: 260px;
+
+    &:not(.hidden) + .layout-body { width: calc(100% - 260px); }
+    &.fixed + .layout-body { width: 100%; }
+  }
+}

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

@@ -0,0 +1,14 @@
+// Table of Contents
+// ==================================================
+// Map
+
+// Map
+// ==================================================
+.map {
+  background: color(light-haze);
+  border: 1px solid color(dark-haze);
+  box-sizing: border-box;
+  display: block;
+  min-height: 220px;
+  min-width: 220px;
+}

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

@@ -0,0 +1,49 @@
+// Table of Contents
+// ==================================================
+// Milestone
+// Colors
+
+// Milestone
+// ==================================================
+.milestones {
+  list-style: none;
+  padding-left: 20px;
+
+  > li {
+    border-left: 1px dashed;
+    border-bottom: 1px dashed;
+    border-color: inherit;
+    padding: 25px 30px;
+
+    &:last-child { border-bottom: 0; }
+
+    > [class^='icon-'],
+    > [class*=' icon-'],
+    > [class^='icon-weather-'],
+    > [class*=' icon-weather-'] {
+      border-radius: border-radius(xl);
+      box-sizing: border-box;
+      float: left;
+      height: 40px;
+      margin: -9px 0 0 -50px;
+      padding-top: 8px;
+      position: relative;
+      text-align: center;
+      width: 40px;
+    }
+  }
+}
+.milestone {
+  background: color(light-haze);
+  border: 1px solid color(dark-haze);
+}
+
+// Colors
+// ==================================================
+@each $name, $color in map-keys($colors) {
+  .milestone-#{$name} {
+    background: color($name);
+    border-color: darker-color($name);
+    color: text-color-on($name);
+  }
+}

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

@@ -0,0 +1,40 @@
+// Table of Contents
+// ==================================================
+// Missive
+
+// Missive
+// ==================================================
+.missive {
+  border: 1px solid color(dark-haze);
+  border-radius: border-radius(b);
+
+  &::before,
+  &::after {
+    clear: both;
+    content: '\0020';
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    width: 0;
+  }
+}
+.missive-icon,
+.missive-content {
+  box-sizing: border-box;
+  float: left;
+  padding: 20px;
+  white-space: normal;
+}
+.missive-icon {
+  font-size: text-size(xxl);
+  padding-top: 30px;
+  text-align: center;
+  width: 80px;
+}
+.missive-content {
+  padding-left: 0;
+  width: calc(100% - 80px);
+
+  p:last-child { margin-bottom: 0; }
+}

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

@@ -0,0 +1,126 @@
+// Table of Contents
+// ==================================================
+// Modal
+// Styles
+// Directions
+// Colors
+// Backdrop
+// Media Queries
+
+// scss-lint:disable NestingDepth
+
+// Modal
+// ==================================================
+.modal {
+  background: color(white);
+  border-radius: border-radius(b);
+  box-shadow: 0 0 6px darkish-color(dark-haze);
+  display: none;
+  left: 0;
+  margin: 0 auto;
+  overflow: hidden;
+  right: 0;
+  position: fixed;
+  top: 0;
+  width: 560px;
+  z-index: 1060;
+
+  &.fade {
+    @include transition((opacity 0.2s linear, top 0.4s ease-in-out));
+    top: -100%;
+
+    &.in { top: 15%; }
+  }
+}
+.modal-header {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  box-sizing: border-box;
+  text-align: center;
+  padding: 22px 20px;
+}
+.modal-body {
+  box-sizing: border-box;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 25px 20px;
+}
+.modal-footer {
+  border-top-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 15px;
+  padding: 15px 20px;
+}
+
+// Styles
+// ==================================================
+.modal-aside {
+  border-radius: 0;
+  height: 100%;
+  left: initial;
+  margin: 0;
+  right: 0;
+  top: 0;
+
+  form { height: 100%; }
+
+  &.fade {
+    @include transition((opacity 0.2s linear, right 0.4s ease-in-out));
+    right: -100%;
+    top: 0;
+
+    &.in {
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .modal-header,
+  .modal-footer { height: 68px; }
+  .modal-body {
+    height: calc(100% - 136px);
+    max-height: none;
+  }
+
+  &.left {
+    left: 0;
+    right: initial;
+
+    &.fade {
+      @include transition((opacity 0.2s linear, left 0.4s ease-in-out));
+      left: -100%;
+      right: 0;
+
+      &.in {
+        left: 0;
+        right: initial;
+      }
+    }
+  }
+}
+
+// Backdrop
+// ==================================================
+.modal-backdrop {
+  background: transparentize(color(white), 0.15);
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1050;
+
+  &.fade {
+    opacity: 0;
+
+    &.in { opacity: 1; }
+  }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: 767px) {
+  .modal { width: calc(100% - 20px); }
+  .modal-body { max-height: 180px; }
+}

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

@@ -0,0 +1,202 @@
+// Table of Contents
+// ==================================================
+// Nav & Tab
+
+// scss-lint:disable NestingDepth
+// scss-lint:disable SelectorDepth
+
+// Nav & Tab
+// ==================================================
+.nav {
+  border-color: color(dark-haze);
+  font-weight: text-weight(semibold);
+  list-style: none;
+  padding: 0;
+
+  > li {
+    line-height: 1;
+
+    > a { display: block; }
+  }
+}
+.nav-list {
+  border-radius: border-radius(b);
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+
+  > li {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+
+    &:last-child { border-bottom: 0; }
+
+    > a {
+      padding: 13px 15px;
+
+      &:active { color: color(primary); }
+    }
+
+    &.active > a { color: color(primary); }
+
+    > ul {
+      border-color: inherit;
+      list-style: none;
+      padding: 0;
+
+      > li {
+        > a {
+          display: block;
+          padding: 7px 15px;
+        }
+
+        &:first-child {
+          > a { padding-top: 15px; }
+        }
+        &:last-child {
+          > a { padding-bottom: 13px; }
+        }
+      }
+    }
+
+    &.nav-header {
+      background: color(light-haze);
+      padding: 13px 15px;
+    }
+  }
+
+  &.dark {
+    > li {
+      &.nav-header { background: color(light-black); }
+    }
+  }
+  &.light {
+    > li {
+      &.nav-header { background: color(haze); }
+    }
+  }
+
+  .divider {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    margin: 5px 15px;
+    overflow: hidden;
+  }
+}
+.nav-pills,
+.nav-tabs,
+.tabbable {
+  &::before,
+  &::after {
+    content: '';
+    display: table;
+    line-height: 0;
+  }
+  &::after { clear: both; }
+
+  &.dark,
+  &.light,
+  &.white { background: color(transparent); }
+}
+.nav-pills,
+.nav-tabs {
+  > li { float: left; }
+}
+.nav-pills {
+  > li {
+    margin-right: 5px;
+
+    &:last-child { margin: 0; }
+
+    > a {
+      background: color(light-haze);
+      border: 1px solid darker-color(light-haze);
+      border-radius: border-radius(b);
+      padding: 8px 10px;
+
+      &:hover,
+      &:focus { background: color(haze); }
+      &:active {
+        background: color(primary);
+        border-color: darker-color(primary);
+        color: color(white);
+      }
+    }
+
+    &.active > a {
+      background: color(primary);
+      border-color: darker-color(primary);
+      color: color(white);
+    }
+  }
+
+  &.dark {
+    > li {
+      > a {
+        background: color(black);
+        border-color: dark-color(black);
+
+        &:hover,
+        &:focus { background: color(light-black); }
+      }
+    }
+  }
+  &.white {
+    > li {
+      > a {
+        background: color(white);
+
+        &:hover,
+        &:focus { background: color(light-haze); }
+      }
+    }
+  }
+  &.dark,
+  &.light,
+  &.white {
+    > li {
+      > a:active,
+      &.active > a {
+        background: color(primary);
+        border-color: dark-color(primary);
+        color: color(white);
+      }
+    }
+  }
+}
+.nav-tabs {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
+  > li {
+    margin-right: 20px;
+
+    &:last-child { margin: 0; }
+
+    > a {
+      border-bottom: 2px solid color(transparent);
+      padding-bottom: 8px;
+
+      &:hover,
+      &:focus { border-color: inherit; }
+      &:active { border-color: color(primary); }
+    }
+
+    &.active > a {
+      border-color: color(primary);
+      color: color(primary);
+    }
+  }
+}
+.nav-stacked > li {
+  float: none;
+  margin: 0 0 5px;
+
+  &:last-child { margin: 0; }
+}
+.pill-content,
+.tab-content {
+  > .pill-pane,
+  > .tab-pane { display: none; }
+  > .active { display: block; }
+}