activeadmin_blaze_theme 0.5.16 → 0.6.0

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

@@ -0,0 +1,86 @@
+@import 'mixins/objects.grid';
+
+.c-table {
+  @include grid;
+  @include grid--wrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.c-table__caption {
+  @include grid;
+  @include grid__cell--full;
+  max-width: 100%;
+  padding: var(--spacing-small) 0;
+  color: var(--color-default);
+  font-size: var(--text-font-size-small);
+  text-align: left;
+}
+
+.c-table__row,
+.c-table__head,
+.c-table__body {
+  display: flex;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
+.c-table--striped :not(.c-table__row--heading).c-table__row:nth-of-type(odd) {
+  color: initial;
+  background-color: var(--color-background);
+}
+
+.c-table__cell {
+  display: flex;
+  flex: 1;
+  padding: var(--spacing-small);
+  overflow: auto;
+  text-align: left;
+}
+
+.c-table__row--heading .c-table__cell {
+  display: flex;
+  flex: 1;
+  color: inherit;
+  font-weight: var(--text-font-weight-heavy);
+  font-size: var(--text-font-size-medium);
+  background-color: var(--color-background);
+}
+
+.c-table--striped .c-table__row--heading .c-table__cell {
+  color: initial;
+  background-color: #fff;
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.c-table--clickable :not(.c-table__row--heading).c-table__row:hover .c-table__cell,
+.c-table__row--clickable:hover .c-table__cell {
+  color: var(--link-color);
+  background-color: initial;
+}
+
+.c-table__row--disabled {
+  color: var(--color-disabled);
+  background-color: initial;
+  cursor: default;
+}
+
+.c-table--clickable :not(.c-table__row--heading).c-table__row--disabled:hover .c-table__cell,
+.c-table__row--disabled:hover .c-table__cell {
+  color: var(--color-disabled);
+  background-color: initial;
+  cursor: not-allowed;
+}
+
+.c-table--condensed {
+  font-size: var(--text-font-size-small);
+
+  .c-table__cell {
+    padding: var(--spacing-xsmall);
+  }
+}

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

@@ -0,0 +1,68 @@
+@import 'mixins/components.buttons';
+
+.c-tabs[role='tablist'] {
+  display: block;
+}
+
+.c-tabs__headings {
+  display: flex;
+  text-align: center;
+}
+
+.c-tabs__nav {
+  overflow: hidden;
+
+  .c-tabs__headings {
+    margin-bottom: -1em;
+    padding-bottom: 1em;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+
+.c-tab-heading[role='tab'] {
+  --tab-heading-border-color: var(--color-default);
+
+  @include button-nude;
+
+  display: block;
+  flex: 1;
+  margin: 0;
+  padding: var(--spacing-medium);
+  white-space: nowrap;
+  border-bottom: var(--spacing-xsmall) solid var(--color-background);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+
+  &:not(:disabled):not(.c-tab-heading--active):hover {
+    border-bottom-color: var(--tab-heading-border-color);
+  }
+
+  &.c-tab-heading--active {
+    background-color: var(--color-background);
+    border-bottom-color: var(--tab-heading-border-color);
+  }
+
+  &.c-tab-heading--brand {
+    --tab-heading-border-color: var(--color-brand);
+  }
+
+  &.c-tab-heading--info {
+    --tab-heading-border-color: var(--color-info);
+  }
+
+  &.c-tab-heading--warning {
+    --tab-heading-border-color: var(--color-warning);
+  }
+
+  &.c-tab-heading--success {
+    --tab-heading-border-color: var(--color-success);
+  }
+
+  &.c-tab-heading--error {
+    --tab-heading-border-color: var(--color-error);
+  }
+}
+
+.c-tabs__tab[role='tabpanel'] {
+  padding: var(--spacing-medium);
+}

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

@@ -0,0 +1,39 @@
+.c-tags {
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+
+.c-tags .c-card--menu {
+  position: absolute;
+  width: 100%;
+}
+
+.c-tags__container {
+  display: inline-block;
+  max-width: 70%;
+  padding-right: var(--spacing-xsmall);
+}
+
+.c-tag {
+  position: relative;
+  display: inline-block;
+  max-width: 70%;
+  margin: var(--spacing-tiny);
+  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-small);
+}
+
+.c-tag__close {
+  position: absolute;
+  top: 7px;
+  right: 5px;
+  color: #fff;
+  font-weight: var(--text-font-weight-heavy);
+}
+
+.c-tags__field-container {
+  position: absolute;
+  display: inline-block;
+  width: 30%;
+  margin: var(--spacing-tiny);
+}

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

@@ -0,0 +1,113 @@
+.o-timeline {
+  margin: 0.55em 0 0;
+  padding: 0;
+
+  .c-timeline-item {
+    --timeline-item-color: var(--color-default);
+
+    position: relative;
+    padding: 0 0 1.5em;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0.25em;
+      height: 100%;
+      margin-left: -1px;
+      border-left: 1px solid var(--color-default);
+      content: '';
+    }
+
+    &--last::before,
+    &--loading::before {
+      border-left-style: none;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      width: 0.5em;
+      height: 0.5em;
+      background-color: var(--timeline-item-color);
+      border-radius: 100%;
+      box-shadow: 0 0 0 4px #fff;
+      content: '';
+    }
+
+    &__body {
+      position: relative;
+      top: -0.55em;
+      margin: 0 0 0 1em;
+    }
+
+    &.c-timeline-item--brand::after {
+      --timeline-item-color: var(--color-brand);
+      content: '';
+    }
+
+    &.c-timeline-item--info::after {
+      --timeline-item-color: var(--color-info);
+      content: '';
+    }
+
+    &.c-timeline-item--warning::after {
+      --timeline-item-color: var(--color-warning);
+      content: '';
+    }
+
+    &.c-timeline-item--success::after {
+      --timeline-item-color: var(--color-success);
+      content: '';
+    }
+
+    &.c-timeline-item--error::after {
+      --timeline-item-color: var(--color-error);
+      content: '';
+    }
+  }
+
+  &.o-timeline--alternate {
+    .c-timeline-item {
+      &::before,
+      &::after {
+        left: 50%;
+        content: '';
+      }
+
+      &::after {
+        margin: 0 0 0 -0.25em;
+      }
+
+      &__body {
+        left: 50%;
+        width: 50%;
+      }
+
+      &--left .c-timeline-item__body {
+        left: 0;
+        margin: 0 0 0 -1em;
+        text-align: right;
+      }
+    }
+  }
+
+  &.o-timeline--loading {
+    .c-timeline-item--last::before {
+      border-left-style: dashed;
+      content: '';
+    }
+
+    .c-timeline-item--loading::after {
+      background-color: transparent;
+      border: 2px solid var(--color-default);
+    }
+
+    .c-timeline-item--loading {
+      .c-timeline-item__body {
+        color: var(--color-text);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+@import 'mixins/objects.grid';
+
+.c-toggle {
+  @include grid;
+  @include grid--center;
+
+  width: auto;
+  user-select: none;
+
+  input:not(:checked) + .c-toggle__track {
+    background-color: var(--color-dark);
+
+    .c-toggle__handle {
+      transform: translateZ(0);
+    }
+  }
+
+  input:disabled + .c-toggle__track {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+
+    .c-toggle__handle {
+      cursor: not-allowed;
+      opacity: var(--disabled-opacity);
+    }
+  }
+
+  input:active + .c-toggle__track,
+  input:focus + .c-toggle__track {
+    border-color: var(--border-color-focus);
+    box-shadow: var(--box-shadow-focus);
+
+    .c-toggle__handle {
+      border-color: var(--border-color-focus);
+      box-shadow: var(--box-shadow-focus), 0 1px 3px 1px var(--color-default);
+    }
+  }
+}
+
+.c-toggle--brand .c-toggle__track {
+  --toggle-track-color: var(--color-brand);
+}
+
+.c-toggle--info .c-toggle__track {
+  --toggle-track-color: var(--color-info);
+}
+
+.c-toggle--warning .c-toggle__track {
+  --toggle-track-color: var(--color-warning);
+}
+
+.c-toggle--success .c-toggle__track {
+  --toggle-track-color: var(--color-success);
+}
+
+.c-toggle--error .c-toggle__track {
+  --toggle-track-color: var(--color-error);
+}
+
+.c-toggle input {
+  position: absolute;
+  opacity: 0;
+}
+
+.c-toggle__track {
+  --toggle-track-color: var(--color-default);
+
+  @include grid__cell;
+  @include grid__cell--width-fixed;
+
+  position: relative;
+  width: 1em;
+  height: 0.5em;
+  margin: 0 0.5em;
+  background-color: var(--toggle-track-color);
+  border-radius: var(--border-radius-rounded);
+}
+
+.c-toggle__handle {
+  position: absolute;
+  top: -0.25em;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  background-color: #fff;
+  border-radius: var(--border-radius-rounded);
+  box-shadow: 0 1px 3px 1px var(--color-default);
+  transform: translateX(100%);
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{components.tooltips.scss → _components.tooltips.scss}

@@ -1,49 +1,47 @@
-@import "mixins/settings.global";
-
 .c-tooltip {
   position: relative;
   overflow: visible;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
+    z-index: var(--z-over-page);
     visibility: hidden;
-    z-index: $z-over-page;
   }
 
-  &:before {
+  &::before {
     position: absolute;
-    border: $tooltip-arrow-width solid transparent;
-    content: "";
+    border: 0.6em solid transparent;
+    content: '';
   }
 
-  &:after {
+  &::after {
     position: absolute;
-    padding: .25em .5em;
-    border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
-    border-radius: $border-radius;
-    background-color: $tooltip-body-background-color;
-    color: $tooltip-body-color;
-    line-height: $tooltip-line-height;
+    padding: 0.25em 0.5em;
+    color: #fff;
+    line-height: 1.45;
     white-space: nowrap;
-    content: attr(aria-label);
+    background-color: #000;
+    border: 1px solid #000;
+    border-radius: var(--border-radius);
     visibility: hidden;
+    content: attr(aria-label);
   }
 
-  &:hover:before,
-  &:hover:after {
+  &:hover::before,
+  &:hover::after {
     visibility: visible;
   }
 }
 
 .c-tooltip--top {
-  &:before {
+  &::before {
     top: 0%;
     left: 50%;
+    border-top-color: #000;
     transform: translate(-50%, -1em);
-    border-top-color: $tooltip-body-border-color;
   }
 
-  &:after {
+  &::after {
     top: 0%;
     left: 50%;
     transform: translate(-50%, -3em);
@@ -51,14 +49,14 @@
 }
 
 .c-tooltip--right {
-  &:before {
+  &::before {
     top: 50%;
     left: 100%;
+    border-right-color: #000;
     transform: translate(0, -50%);
-    border-right-color: $tooltip-body-border-color;
   }
 
-  &:after {
+  &::after {
     top: 50%;
     left: 100%;
     transform: translate(1em, -50%);
@@ -66,14 +64,14 @@
 }
 
 .c-tooltip--bottom {
-  &:before {
+  &::before {
     bottom: 0;
     left: 50%;
+    border-bottom-color: #000;
     transform: translate(-50%, 1em);
-    border-bottom-color: $tooltip-body-border-color;
   }
 
-  &:after {
+  &::after {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 3em);
@@ -81,14 +79,14 @@
 }
 
 .c-tooltip--left {
-  &:before {
+  &::before {
     top: 50%;
     right: 100%;
+    border-left-color: #000;
     transform: translate(0, -50%);
-    border-left-color: $tooltip-body-border-color;
   }
 
-  &:after {
+  &::after {
     top: 50%;
     right: 100%;
     transform: translate(-1em, -50%);