active_frontend 13.3.0 → 14.0.0

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

@@ -0,0 +1,66 @@
+// Table of Contents
+// ==================================================
+// Navbar
+
+// scss-lint:disable NestingDepth
+
+// Navbar
+// ==================================================
+.navbar {
+  background: color(white);
+  border-collapse: separate;
+  border-top: 1px solid color(dark-haze);
+  box-sizing: border-box;
+  display: table;
+  height: 50px;
+  line-height: 1;
+  table-layout: fixed;
+  width: 100%;
+
+  > a {
+    display: table-cell;
+    float: none;
+    font-size: text-size(xxs);
+    font-weight: text-weight(semibold);
+    text-align: center;
+    vertical-align: middle;
+    width: 1%;
+
+    &:hover,
+    &.active,
+    &:active,
+    &:focus { color: color(primary); }
+
+    > i {
+      font-size: text-size(l);
+      display: block;
+      margin-bottom: 3px;
+    }
+  }
+
+  &.primary {
+    > a {
+      &:hover,
+      &.active,
+      &:active,
+      &:focus {
+        background: darkish-color(primary);
+        color: color(white);
+      }
+    }
+  }
+
+  &.fixed {
+    bottom: 0;
+    position: fixed;
+    min-width: inherit;
+    width: inherit;
+    z-index: 1040;
+  }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (min-width: 768px) {
+  .navbar { display: none; }
+}

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

@@ -0,0 +1,79 @@
+// Table of Contents
+// ==================================================
+// Pagination
+
+// scss-lint:disable NestingDepth
+
+// Pagination
+// ==================================================
+.pagination {
+  color: color(black);
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: inline-block;
+    line-height: 1;
+    margin-right: 2px;
+
+    &:last-child { margin: 0; }
+
+    a,
+    &.active {
+      border-radius: border-radius(xl);
+      display: inline-block;
+      min-width: 8px;
+      padding: 8px 12px;
+      text-align: center;
+    }
+
+    a { background: color(haze); }
+    a:hover,
+    a:focus { background: darkish-color(haze); }
+    a:active { background: lightish-color(haze); }
+
+    &.active {
+      background: color(primary);
+      color: color(white);
+    }
+    &.pagination-icon {
+      a {
+        font-size: text-size(m);
+        padding: 7px;
+      }
+
+      &:first-child {
+        a {
+          padding-left: 6px;
+          padding-right: 8px;
+        }
+      }
+      &:last-child {
+        a {
+          padding-left: 8px;
+          padding-right: 6px;
+        }
+      }
+    }
+  }
+
+  &.dark,
+  &.light,
+  &.white { background: color(transparent); }
+  &.dark {
+    li {
+      a { background: color(light-black); }
+      a:hover,
+      a:focus { background: darkish-color(light-black); }
+      a:active { background: lightish-color(light-black); }
+    }
+  }
+  &.light {
+    li {
+      a { background: color(dark-haze); }
+      a:hover,
+      a:focus { background: darkish-color(dark-haze); }
+      a:active { background: lightish-color(dark-haze); }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+// Table of Contents
+// ==================================================
+// Placeholder
+
+// Placeholder
+// ==================================================
+.placeholder {
+  color: color(gray);
+  text-align: center;
+  width: 100%;
+
+  > i {
+    display: inline-block;
+    font-size: 196px;
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  > img {
+    max-width: 280px;
+    margin: 0 auto 20px;
+  }
+}

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

@@ -0,0 +1,167 @@
+// Table of Contents
+// ==================================================
+// Popover
+
+// scss-lint:disable NestingDepth
+
+// Popover
+// ==================================================
+.popover {
+  background: color(white);
+  border: 1px solid color(dark-haze);
+  border-radius: border-radius(b);
+  color: color(black);
+  display: none;
+  left: 0;
+  position: absolute;
+  top: 0;
+  white-space: normal;
+  width: 276px;
+  z-index: 1070;
+
+  .arrow,
+  .arrow::after {
+    border-style: solid;
+    border-color: color(transparent);
+    display: block;
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+  .arrow {
+    border-width: 11px;
+
+    &::after {
+      border-width: 10px;
+      content: '';
+    }
+  }
+
+  &.bottom {
+    margin-top: 10px;
+
+    .arrow {
+      border-bottom-color: inherit;
+      border-top-width: 0;
+      left: 50%;
+      margin-left: -11px;
+      top: -11px;
+
+      &::after {
+        border-bottom-color: color(light-haze);
+        border-top-width: 0;
+        margin-left: -10px;
+        top: 1px;
+      }
+    }
+  }
+  &.left {
+    margin-left: -10px;
+
+    .arrow {
+      border-left-color: inherit;
+      border-right-width: 0;
+      margin-top: -11px;
+      right: -11px;
+      top: 50%;
+
+      &::after {
+        border-left-color: color(white);
+        border-right-width: 0;
+        bottom: -10px;
+        right: 1px;
+      }
+    }
+  }
+  &.right {
+    margin-left: 10px;
+
+    .arrow {
+      border-left-width: 0;
+      border-right-color: inherit;
+      left: -11px;
+      margin-top: -11px;
+      top: 50%;
+
+      &::after {
+        border-left-width: 0;
+        border-right-color: color(white);
+        bottom: -10px;
+        left: 1px;
+      }
+    }
+  }
+  &.top {
+    margin-top: -10px;
+
+    .arrow {
+      border-bottom-width: 0;
+      border-top-color: inherit;
+      bottom: -11px;
+      left: 50%;
+      margin-left: -11px;
+
+      &::after {
+        border-bottom-width: 0;
+        border-top-color: color(white);
+        bottom: 1px;
+        margin-left: -10px;
+      }
+    }
+  }
+  &.dark {
+    &.bottom {
+      .arrow::after { border-bottom-color: color(light-black); }
+    }
+    &.left {
+      .arrow::after { border-left-color: color(black); }
+    }
+    &.right {
+      .arrow::after { border-right-color: color(black); }
+    }
+    &.top {
+      .arrow::after { border-top-color: color(black); }
+    }
+
+    .popover-title {
+      background: color(light-black);
+      border-color: color(dark-black);
+    }
+  }
+  &.light {
+    &.bottom {
+      .arrow::after { border-bottom-color: color(haze); }
+    }
+    &.left {
+      .arrow::after { border-left-color: color(light-haze); }
+    }
+    &.right {
+      .arrow::after { border-right-color: color(light-haze); }
+    }
+    &.top {
+      .arrow::after { border-top-color: color(light-haze); }
+    }
+
+    .popover-title { background: color(haze); }
+  }
+}
+.popover-content { padding: 15px; }
+.popover-title,
+.popover-nav {
+  padding: 10px 15px;
+
+  &:empty { display: none; }
+}
+.popover-title {
+  background: color(light-haze);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-left-radius: border-radius(b);
+  border-top-right-radius: border-radius(b);
+  display: block;
+  font-weight: text-weight(semibold);
+}
+.popover-nav {
+  border-top-style: solid;
+  border-top-width: 1px;
+}

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

@@ -0,0 +1,62 @@
+// Table of Contents
+// ==================================================
+// Keyframes
+// Reset
+// Progress
+// Sizes
+// Colors
+
+// Keyframes
+// ==================================================
+@-webkit-keyframes progress-bar-stripes {
+  from { background-position: 40px 0; }
+  to { background-position: 0 0; }
+}
+@keyframes progress-bar-stripes {
+  from { background-position: 40px 0; }
+  to { background-position: 0 0; }
+}
+
+// Reset
+// ==================================================
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+// Progress
+// ==================================================
+.progress {
+  background: color(haze);
+  border-radius: border-radius(b);
+  height: progress-size(b);
+  overflow: hidden;
+}
+.bar {
+  @include transition(width 0.6s ease);
+  background: color(primary);
+  box-sizing: border-box;
+  float: left;
+  height: 100%;
+  width: 0;
+
+  &.striped {
+    @include background-image(45deg, transparentize(color(white), 0.85) 25%, color(transparent) 25%, color(transparent) 50%, transparentize(color(white), 0.85) 50%, transparentize(color(white), 0.85) 75%, color(transparent) 75%, color(transparent));
+    @include background-size(40px 40px);
+    @include transition(width 0.6s ease);
+
+    &.active { @include animation(progress-bar-stripes 2s linear infinite); }
+  }
+}
+
+// Sizes
+// ==================================================
+@each $name, $size in $progress-sizes {
+  .progress-size-#{$name} { height: $size; }
+}
+
+// Colors
+// ==================================================
+@each $name, $color in $colors {
+  .bar-color-#{$name} { background: $color; }
+}

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

@@ -0,0 +1,74 @@
+// Table of Contents
+// ==================================================
+// Sidebar
+
+// scss-lint:disable NestingDepth
+
+// Sidebar
+// ==================================================
+.sidebar {
+  border-right-style: solid;
+  border-right-width: 1px;
+  box-sizing: border-box;
+  display: block;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+
+  &.dark {
+    .sidebar-nav {
+      > ul { background: color(light-black); }
+    }
+  }
+  &.light {
+    .sidebar-nav {
+      > ul { background: color(white); }
+    }
+  }
+  &.right {
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-right: 0;
+  }
+}
+.sidebar-header,
+.sidebar-footer {
+  padding: 30px 0;
+  text-align: center;
+}
+.sidebar-body { padding: 0 15px; }
+.sidebar-nav {
+  > a {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    box-sizing: border-box;
+    display: block;
+    padding: 20px;
+    width: 100%;
+
+    &:first-child {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+  }
+  > ul {
+    background: color(light-haze);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    list-style: none;
+    padding: 15px 30px;
+
+    a {
+      display: block;
+      padding: 5px;
+
+      &:hover,
+      &.active,
+      &:active,
+      &:focus { color: color(primary); }
+    }
+
+    > li.active { color: color(primary); }
+  }
+}