activeadmin_blaze_theme 0.5.16 → 0.6.0

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

@@ -0,0 +1,38 @@
+.c-avatar {
+  --avatar-color: white;
+  --avatar-background-color: var(--color-brand);
+  --avatar-border-radius: var(--border-radius-rounded);
+
+  position: relative;
+  display: inline-block;
+  width: 3em;
+  height: 3em;
+  margin: 0;
+  color: var(--avatar-color);
+  background-color: var(--avatar-background-color);
+  border-radius: var(--avatar-border-radius);
+}
+
+.c-avatar[data-text]::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  content: attr(data-text);
+}
+
+.c-avatar__img[alt] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--avatar-border-radius);
+}
+
+.c-avatar__img[alt] + .c-avatar__img[alt] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 50%;
+  height: 50%;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.back-to-top.scss

@@ -0,0 +1,17 @@
+.c-back-to-top {
+  position: fixed;
+  right: 2em;
+  bottom: 2em;
+  z-index: var(--z-over-page);
+
+  &.c-back-to-top--left {
+    right: auto;
+    left: 2em;
+  }
+
+  &.c-back-to-top--center {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

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

@@ -0,0 +1,71 @@
+.c-badge {
+  --badge-color: white;
+  --badge-background-color: var(--color-default);
+
+  display: inline-block;
+  margin: 0;
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  color: var(--badge-color);
+  font-weight: var(--text-font-weight-heavy);
+  font-size: 0.8em;
+  line-height: 1.2;
+  background-color: var(--badge-background-color);
+  border: var(--border-width) var(--border-style) transparent;
+  border-radius: var(--border-radius);
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-default);
+    border-color: var(--badge-color);
+  }
+}
+
+.c-badge--rounded {
+  border-radius: var(--border-radius-rounded);
+}
+
+.c-badge--brand {
+  --badge-background-color: var(--color-brand);
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-brand);
+  }
+}
+
+.c-badge--info {
+  --badge-background-color: var(--color-info);
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-info);
+  }
+}
+
+.c-badge--warning {
+  --badge-background-color: var(--color-warning);
+  --badge-color: black;
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-warning);
+  }
+}
+
+.c-badge--success {
+  --badge-background-color: var(--color-success);
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-success);
+  }
+}
+
+.c-badge--error {
+  --badge-background-color: var(--color-error);
+
+  &.c-badge--ghost {
+    --badge-background-color: var(--color-transparent);
+    --badge-color: var(--color-error);
+  }
+}

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

@@ -0,0 +1,24 @@
+.c-breadcrumbs {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.c-breadcrumbs__crumb {
+  display: inline-block;
+  width: auto;
+  padding: 0;
+
+  &:not([aria-current]) {
+    ::after {
+      padding: 0 var(--spacing-small);
+      color: var(--color-default);
+      content: '/';
+    }
+  }
+
+  &[aria-current] {
+    font-weight: var(--text-font-weight-heavy);
+  }
+}

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

@@ -0,0 +1,91 @@
+@import 'mixins/components.buttons';
+
+.c-button {
+  --button-color: #fff;
+  --button-background-color: var(--color-default);
+
+  @include button;
+
+  &.c-button--close {
+    --button-color: inherit;
+    --button-background-color: transparent;
+
+    @include button-color;
+
+    position: absolute;
+    right: var(--spacing-small);
+    padding: 0;
+    font-weight: var(--text-font-weight-heavy);
+    font-size: 1.4em;
+    line-height: 1;
+    outline: 0;
+  }
+
+  &.c-button--block {
+    display: inline-block;
+    width: 100%;
+  }
+
+  &.c-button--rounded {
+    border-radius: var(--border-radius-rounded);
+  }
+
+  &.c-button--brand {
+    --button-background-color: var(--color-brand);
+  }
+
+  &.c-button--info {
+    --button-background-color: var(--color-info);
+  }
+
+  &.c-button--warning {
+    --button-color: #000;
+    --button-background-color: var(--color-warning);
+  }
+
+  &.c-button--success {
+    --button-background-color: var(--color-success);
+  }
+
+  &.c-button--error {
+    --button-background-color: var(--color-error);
+  }
+
+  &.c-button--ghost {
+    --button-color: var(--color-default);
+
+    @include button-ghost;
+
+    &.c-button--brand {
+      --button-color: var(--color-brand);
+    }
+
+    &.c-button--info {
+      --button-color: var(--color-info);
+    }
+
+    &.c-button--warning {
+      --button-color: var(--color-warning);
+    }
+
+    &.c-button--success {
+      --button-color: var(--color-success);
+    }
+
+    &.c-button--error {
+      --button-color: var(--color-error);
+    }
+  }
+
+  &.c-button--nude {
+    @include button-nude;
+  }
+}
+
+.c-button__icon-left {
+  padding-right: var(--spacing-small);
+}
+
+.c-button__icon-right {
+  padding-left: var(--spacing-small);
+}

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

@@ -0,0 +1,80 @@
+@import 'mixins/objects.grid';
+@import 'mixins/components.buttons';
+
+.c-calendar {
+  @include grid;
+  @include grid--wrap;
+  @include grid--center;
+  @include grid__cell--no-gutter;
+  z-index: var(--z-over-control);
+  max-width: 400px;
+  padding: var(--spacing-medium);
+  text-align: center;
+  background-color: var(--color-background);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+}
+
+.c-calendar__control,
+.c-calendar__date {
+  --button-color: var(--color-quiet);
+  --button-background-color: transparent;
+
+  @include button-color;
+  display: inline;
+  flex: 0 0 12%;
+  max-width: 12%;
+  margin: 1.1%;
+  padding: 2.5% 0;
+  font-size: var(--text-font-size-medium);
+  border-radius: var(--border-radius);
+  outline: 0;
+  user-select: none;
+
+  &:hover {
+    border-color: var(--border-color);
+  }
+}
+
+.c-calendar__control {
+  --button-color: var(--color-default);
+}
+
+.c-calendar__header {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+  @include grid__cell--width(71.5%);
+  padding: var(--spacing-small) 0;
+}
+
+.c-calendar__day {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+  flex: 0 0 12%;
+  max-width: 12%;
+  margin: 1.1%;
+  padding: var(--spacing-small) 0;
+  font-weight: var(--text-font-weight-heavy);
+}
+
+.c-calendar__date--in-month {
+  --button-color: #000;
+}
+
+.c-calendar__date[aria-current='date'] {
+  border-color: var(--border-color);
+}
+
+.c-calendar__date--selected[aria-selected='true'],
+.c-calendar__date--selected[aria-selected='true']:hover {
+  --button-color: #fff;
+
+  @include button-color;
+
+  border-color: transparent;
+}
+
+.c-calendar__footer {
+  width: 100%;
+  padding-top: var(--spacing-large);
+}

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

@@ -0,0 +1,195 @@
+@import 'mixins/components.buttons';
+@import 'mixins/utilities.states';
+@import 'mixins/utilities.visibility';
+
+@mixin card-item {
+  margin: 0;
+  padding: var(--spacing-small);
+  color: var(--card-item-color);
+  background-color: var(--card-item-background-color);
+
+  @include disabled;
+}
+
+@mixin card-control {
+  @include button;
+  @include button-color;
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-small);
+  text-align: inherit;
+  text-decoration: inherit;
+  border: 0;
+  border-radius: 0;
+
+  &[aria-expanded='true'] {
+    font-weight: var(--text-font-weight-heavy);
+    filter: brightness(0.95);
+  }
+
+  &.c-card__control--active {
+    filter: brightness(0.95);
+  }
+}
+
+.c-card {
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+
+  > .o-image:not(:first-child) {
+    padding: var(--spacing-medium) 0 0;
+  }
+}
+
+.c-card + .c-card {
+  margin: var(--spacing-small) 0 0 0;
+}
+
+.c-card__header {
+  padding: var(--spacing-medium) var(--spacing-medium) 0;
+
+  .c-heading {
+    padding: 0;
+  }
+}
+
+.c-card__body {
+  padding: var(--spacing-medium);
+}
+
+.c-card__footer {
+  padding: var(--spacing-medium);
+}
+
+.c-card__footer--block {
+  padding: var(--spacing-small) 0 0;
+
+  .c-input-group .c-button {
+    border-bottom: 0;
+  }
+
+  .c-input-group .c-button:first-child {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .c-input-group .c-button:last-child {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.c-card__item {
+  --card-item-color: var(--color-text);
+  --card-item-background-color: transparent;
+
+  @include card-item;
+
+  &--divider[role='separator'] {
+    --card-item-color: #000;
+    --card-item-background-color: var(--color-dark);
+    font-weight: var(--text-font-weight-heavy);
+  }
+
+  &--brand {
+    --card-item-color: #fff;
+    --card-item-background-color: var(--color-brand);
+  }
+
+  &--info {
+    --card-item-color: #fff;
+    --card-item-background-color: var(--color-info);
+  }
+
+  &--warning {
+    --card-item-color: #000;
+    --card-item-background-color: var(--color-warning);
+  }
+
+  &--success {
+    --card-item-color: #fff;
+    --card-item-background-color: var(--color-success);
+  }
+
+  &--error {
+    --card-item-color: #fff;
+    --card-item-background-color: var(--color-error);
+  }
+}
+
+.c-card__item + .c-card__footer--block {
+  padding: 0;
+}
+
+.c-card--grouped {
+  .c-card__item {
+    &:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
+}
+
+.c-card__divider[role='separator'] {
+  height: var(--border-width);
+  overflow: hidden;
+  background-color: var(--border-color);
+}
+
+.c-card__control {
+  --button-color: var(--color-text);
+  --button-background-color: var(--color-dark);
+  @include card-control;
+}
+
+.c-card--menu[role='menu'] {
+  position: absolute;
+  width: 100%;
+  max-height: 300px;
+  margin-top: 0.5em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-overflow: ellipsis;
+  border: 1px solid var(--color-dark);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+  .c-card__control[role='menuitem'] {
+    --button-background-color: var(--color-light);
+  }
+}
+
+.c-card--accordion {
+  .c-card__control[aria-expanded] {
+    &::after {
+      position: absolute;
+      top: 0.5em;
+      right: 0.5em;
+      width: 1em;
+      height: 1em;
+      background-image: url('data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==');
+      background-repeat: no-repeat;
+      background-position: center;
+      content: '';
+    }
+
+    &[aria-expanded='true']::after {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.c-card__item--pane {
+  margin: 0;
+  padding: var(--spacing-small);
+}
+
+.c-card__control[aria-expanded='false'] + .c-card__item--pane {
+  @include visually-hidden;
+}