activeadmin_blaze_theme 0.5.9 → 0.6.0

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.links.scss

@@ -0,0 +1,72 @@
+@import 'mixins/utilities.states';
+@import 'mixins/utilities.visibility';
+
+@mixin link--color {
+  @include disabled;
+  color: var(--color-link);
+  background-color: transparent;
+
+  &:not(:disabled) {
+    &:visited {
+      opacity: 0.9;
+    }
+
+    &:hover {
+      background-color: transparent;
+      opacity: 0.9;
+    }
+
+    &:active {
+      background-color: transparent;
+      opacity: 0.8;
+    }
+  }
+}
+
+a.c-link,
+.c-link[role='link'] {
+  @include link--color;
+
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  .c-link--skip {
+    @include visually-hidden;
+
+    top: 0;
+    left: 0;
+    z-index: var(--z-over-everything);
+
+    &:active,
+    &:focus {
+      width: auto;
+      height: auto;
+      overflow: auto;
+      clip-path: none;
+    }
+  }
+
+  &.c-link--brand {
+    --color-link: var(--color-brand);
+  }
+
+  &.c-link--info {
+    --color-link: var(--color-info);
+  }
+
+  &.c-link--warning {
+    --color-link: var(--color-warning);
+  }
+
+  &.c-link--success {
+    --color-link: var(--color-success);
+  }
+
+  &.c-link--error {
+    --color-link: var(--color-error);
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.lists.scss

@@ -0,0 +1,64 @@
+ul.c-list,
+ol.c-list,
+.c-list[role='list'] {
+  display: block;
+  margin: 0;
+  padding: 0 0 0 var(--spacing-medium);
+  list-style-position: outside;
+
+  ul.c-list,
+  ol.c-list,
+  .c-list[role='list'] {
+    padding: 0 0 0 var(--spacing-medium);
+  }
+
+  .c-list__item {
+    padding: 0;
+  }
+
+  .c-list__item--unstyled {
+    list-style: none;
+  }
+
+  &.c-list--unstyled {
+    padding: 0;
+    list-style: none;
+  }
+
+  &.c-list--ordered {
+    padding: 0;
+    list-style: none;
+    counter-reset: ordered;
+
+    .c-list__item {
+      &::before {
+        padding: 0 var(--spacing-small) 0 0;
+        content: counters(ordered, '.') ' ';
+        counter-increment: ordered;
+      }
+    }
+  }
+
+  &.c-list--inline {
+    padding: 0;
+
+    .c-list--inline {
+      padding: 0;
+    }
+
+    .c-list__item {
+      display: inline-block;
+      width: auto;
+      padding-right: var(--spacing-medium);
+    }
+
+    &:not(.c-list--unstyled) {
+      .c-list__item {
+        &::before {
+          padding: 0 var(--spacing-small) 0 0;
+          content: '\2022';
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.navs.scss

@@ -0,0 +1,83 @@
+nav.c-nav,
+.c-nav[role='navigation'] {
+  z-index: var(--z-over-page);
+  width: 280px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  color: #fff;
+  background-color: #000;
+
+  &.c-nav--left {
+    position: fixed;
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: 0;
+  }
+
+  &.c-nav--right {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+  }
+
+  .c-nav__item,
+  .c-nav__content {
+    display: block;
+    height: 3.5em;
+    padding: 0 var(--spacing-medium);
+    color: inherit;
+    line-height: 3.5em;
+
+    .o-image {
+      height: 100%;
+    }
+  }
+
+  .c-nav__item {
+    --nav-background-color: var(--color-default);
+
+    text-decoration: none;
+
+    &:hover,
+    &--active {
+      color: var(--nav-color);
+      background-color: var(--nav-background-color);
+    }
+
+    &:focus {
+      box-shadow: var(--box-shadow-focus);
+    }
+
+    &:active {
+      filter: brightness(0.95);
+    }
+  }
+
+  .c-nav__item--brand {
+    --nav-background-color: var(--color-brand);
+  }
+
+  .c-nav__item--info {
+    --nav-background-color: var(--color-info);
+  }
+
+  .c-nav__item--warning {
+    --nav-color: #000;
+    --nav-background-color: var(--color-warning);
+  }
+
+  .c-nav__item--success {
+    --nav-background-color: var(--color-success);
+  }
+
+  .c-nav__item--error {
+    --nav-background-color: var(--color-error);
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.overlays.scss

@@ -0,0 +1,23 @@
+.c-overlay[aria-hidden] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--overlay-z-index);
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparentize(#000, 0.6);
+  visibility: hidden;
+  opacity: 0;
+
+  &.c-overlay--visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &.c-overlay--transparent {
+    background-color: transparent;
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.pagination.scss

@@ -0,0 +1,31 @@
+@import 'mixins/components.buttons';
+
+nav.c-pagination,
+.c-pagination[role='navigation'] {
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-medium);
+  font-size: var(--text-font-size-medium);
+  text-align: center;
+}
+
+.c-pagination__pages {
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+
+  .c-pagination__control {
+    margin: 0 0.2em;
+  }
+}
+
+.c-pagination__control {
+  --button-color: var(--color-brand);
+
+  @include button;
+  @include button-ghost;
+
+  flex: 0 0 auto;
+  min-width: 2.4em;
+  border-radius: var(--border-radius-rounded);
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.progress.scss

@@ -0,0 +1,83 @@
+.c-progress {
+  --progress-bar-color: #fff;
+  --progress-bar-background-color: var(--color-default);
+
+  display: block;
+  overflow: hidden;
+  color: var(--progress-bar-color);
+  text-align: center;
+  background-color: var(--color-background);
+  border: 0;
+  border-radius: var(--border-radius);
+
+  &.c-progress--rounded {
+    border-radius: var(--border-radius-rounded);
+  }
+
+  &.c-progress--timer {
+    --border-radius: 0;
+    height: 3px;
+
+    .c-progress__bar[role='progressbar'] {
+      width: 0;
+      animation-name: slide;
+      animation-duration: 10s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes slide {
+      from {
+        width: 0;
+      }
+
+      95% {
+        width: 100%;
+        opacity: 1;
+      }
+
+      100% {
+        width: 100%;
+        opacity: 0;
+      }
+    }
+  }
+
+  .c-progress__bar[role='progressbar'] {
+    display: block;
+    float: left;
+    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: var(--progress-bar-background-color);
+    border-radius: 0;
+
+    &::after {
+      color: transparent !important;
+      content: '-';
+    }
+
+    &.c-progress__bar--brand {
+      --progress-bar-background-color: var(--color-brand);
+    }
+
+    &.c-progress__bar--info {
+      --progress-bar-background-color: var(--color-info);
+    }
+
+    &.c-progress__bar--warning {
+      --progress-bar-color: #000;
+      --progress-bar-background-color: var(--color-warning);
+    }
+
+    &.c-progress__bar--success {
+      --progress-bar-background-color: var(--color-success);
+    }
+
+    &.c-progress__bar--error {
+      --progress-bar-background-color: var(--color-error);
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.ranges.scss

@@ -0,0 +1,176 @@
+@mixin range-track {
+  width: 100%;
+  height: 10px;
+  border: 0;
+  border-radius: var(--border-radius-rounded);
+  box-shadow: none;
+}
+
+@mixin range-track-ms {
+  color: transparent;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+@mixin range-fill-ms {
+  background-color: var(--color-default);
+  border: 0;
+  border-radius: var(--border-radius-rounded);
+  box-shadow: none;
+}
+
+@mixin range-thumb {
+  width: 20px;
+  height: 20px;
+  margin: -5px 0 0 0;
+  background-color: #fff;
+  border: 0;
+  border-radius: var(--border-radius-rounded);
+  box-shadow: 0 1px 4px -1px #000;
+}
+
+@mixin range-thumb-focus {
+  border-color: var(--border-color-focus);
+  box-shadow: var(--box-shadow-focus);
+}
+
+@mixin range-thumb-webkit {
+  -webkit-appearance: none;
+}
+
+@mixin range-thumb-active {
+  transform: scale(1.4);
+}
+
+@mixin range-disabled {
+  background-color: var(--color-disabled-background);
+  cursor: not-allowed;
+}
+
+.c-range[type='range'] {
+  --range-track-color: var(--color-default);
+
+  width: 100%;
+  padding: var(--spacing-small) 0;
+  outline: 0;
+  -webkit-appearance: none;
+
+  &.c-range--brand {
+    --range-track-color: var(--color-brand);
+  }
+
+  &.c-range--info {
+    --range-track-color: var(--color-info);
+  }
+
+  &.c-range--warning {
+    --range-track-color: var(--color-warning);
+  }
+
+  &.c-range--success {
+    --range-track-color: var(--color-success);
+  }
+
+  &.c-range--error {
+    --range-track-color: var(--color-error);
+  }
+
+  &:not(:disabled) {
+    &::-webkit-slider-runnable-track {
+      background-color: var(--range-track-color);
+    }
+
+    &::-moz-range-track {
+      background-color: var(--range-track-color);
+    }
+
+    &::-ms-track {
+      background-color: var(--range-track-color);
+    }
+  }
+
+  &:not(:disabled):active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.4);
+    }
+
+    &::-moz-range-thumb {
+      transform: scale(1.4);
+    }
+
+    &::-ms-thumb {
+      transform: scale(1.4);
+    }
+  }
+
+  &:focus {
+    &::-webkit-slider-thumb {
+      @include range-thumb-focus;
+    }
+
+    &::-moz-range-thumb {
+      @include range-thumb-focus;
+    }
+
+    &::-ms-thumb {
+      @include range-thumb-focus;
+    }
+  }
+
+  &:disabled {
+    &::-webkit-slider-thumb {
+      @include range-disabled;
+    }
+
+    &::-webkit-slider-runnable-track {
+      @include range-disabled;
+    }
+
+    &::-moz-range-thumb {
+      @include range-disabled;
+    }
+
+    &::-moz-range-track {
+      @include range-disabled;
+    }
+
+    &::-ms-thumb {
+      @include range-disabled;
+    }
+
+    &::-ms-track {
+      @include range-disabled;
+    }
+  }
+}
+
+.c-range::-webkit-slider-runnable-track {
+  @include range-track;
+}
+
+.c-range::-webkit-slider-thumb {
+  @include range-thumb;
+  @include range-thumb-webkit;
+}
+
+.c-range::-moz-range-track {
+  @include range-track;
+}
+
+.c-range::-moz-range-thumb {
+  @include range-thumb;
+}
+
+.c-range::-ms-track {
+  @include range-track;
+  @include range-track-ms;
+}
+
+.c-range::-ms-fill-lower,
+.c-range::-ms-fill-upper {
+  @include range-fill-ms;
+}
+
+.c-range::-ms-thumb {
+  @include range-thumb;
+}