epages-essence 0.1.0 → 0.2.0

data/app/assets/stylesheets/essence/beyond.scss

@@ -1,4 +0,0 @@
-@import 'beyond/base';
-@import 'beyond/components';
-@import 'beyond/layout';
-@import 'beyond/simple_form';

data/app/components/essence/action_bar_component/action_bar_component.scss

@@ -1,29 +0,0 @@
-:root {
-  --workspace-toolbar-background: white;
-  --workspace-toolbar-border:     1px solid rgba(0, 0, 0, 0.2);
-  --header-bar-height:            73px;
-}
-
-.action-bar {
-  background-color: var(--workspace-toolbar-background);
-  border-bottom: var(--workspace-toolbar-border);
-  height: var(--header-bar-height);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-
-  &-wrapper {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: space-between;
-    padding: 0 25px;
-  }
-
-  &-left-content,
-  &-right-content {
-    align-items: center;
-    display: flex;
-    gap: 30px;
-  }
-}

data/app/components/essence/app_info_component/app_info_component.scss

@@ -1,45 +0,0 @@
-.app-info {
-  display: grid;
-  grid-template-columns: 10fr 2fr;
-  column-gap: 30px;
-  grid-auto-rows: minmax(auto, max-content);
-
-  &-headline {
-    color: var(--card-headline);
-    font-size: 190%;
-    font-weight: normal;
-    line-height: 1;
-  }
-
-  &-sub-headline {
-    margin-top: 15px;
-    font-size: 110%;
-    color: var(--workspace-headline);
-    font-weight: bold;
-    line-height: 1;
-  }
-
-  &-text {
-    ul {
-      padding-left: 24px;
-
-      li {
-        list-style: none;
-
-        &::before {
-          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"/></svg>');
-          content: '';
-          background-size: contain;
-          display: inline-block;
-          width: 10px;
-          height: 10px;
-          margin-right: 6px;
-        }
-      }
-    }
-  }
-
-  &-logo {
-    width: 100%;
-  }
-}

data/app/components/essence/breadcrumb_component/breadcrumb_component.scss

@@ -1,39 +0,0 @@
-:root {
-  --breadcrumb-text:       #787878;
-  --breadcrumb-link:       #787878;
-  --breadcrumb-link-hover: #525252;
-  --breadcrumb-icon:       #787878;
-}
-
-.breadcrumb {
-  font-size: 90%;
-
-  &-icon {
-    fill: var(--breadcrumb-icon);
-
-    &:first-child {
-      width: 12px;
-      height: 12px;
-      margin-right: 4px;
-    }
-
-    &:not(:first-child) {
-      width: 8px;
-      height: 8px;
-      margin: 0 10px;
-    }
-  }
-
-  &-item {
-    color: var(--breadcrumb-link);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--breadcrumb-link-hover);
-    }
-  }
-
-  &-current {
-    color: var(--breadcrumb-text);
-  }
-}

data/app/components/essence/button_component/button_component.scss

@@ -1,105 +0,0 @@
-:root {
-  --button-text:                         white;
-  --button-borderRadius:                 4px;
-  --button-borderBottom-width:           2px;
-  --button-horizontal-padding:           calc(8px - 2px / 2);
-  --button-primary-background:           orange;
-  --button-primary-background-hover:     #cc8400;
-  --button-primary-borderBottom-color:   #cc8400;
-  --button-secondary-background:         #999999;
-  --button-secondary-background-hover:   #7f7f7f;
-  --button-secondary-borderBottom-color: #7f7f7f;
-  --button-danger-background:            #da3c3c;
-  --button-danger-background-hover:      #ae3535;
-  --button-danger-borderBottom-color:    #ae3535;
-  --button-disabled-background:          #d0d0d0;
-  --button-disabled-borderBottom-color:  #aaaaaa;
-  --button-disabled-text:                #909090;
-  --button-disabled-textShadow:          1px 1px 0 #ffffff;
-  --button-outline-border-color:         orange;
-  --button-outline-border-width:         1px;
-  --button-outline-borderBottom-width:   2px;
-  --button-outline-background:           transparent;
-  --button-outline-background-hover:     #ffedcc;
-  --button-outline-text:                 #eb9800;
-}
-
-.button {
-  border: 0;
-  border-bottom-style: solid;
-  border-bottom-width: var(--button-borderBottom-width);
-  border-radius: var(--button-borderRadius);
-  color: var(--button-text);
-  cursor: pointer;
-  display: inline-flex;
-  font-weight: bold;
-  height: fit-content;
-  line-height: 1;
-  padding: var(--button-horizontal-padding) 12px;
-  text-decoration: none;
-  transition: all 0.4s cubic-bezier(0, 0, 0.1, 1);
-  width: fit-content;
-  white-space: nowrap;
-
-  &-primary {
-    background: var(--button-primary-background);
-    border-bottom-color: var(--button-primary-borderBottom-color);
-
-    &:hover {
-      background: var(--button-primary-background-hover);
-    }
-  }
-
-  &-secondary {
-    background: var(--button-secondary-background);
-    border-bottom-color: var(--button-secondary-borderBottom-color);
-
-    &:hover {
-      background: var(--button-secondary-background-hover);
-    }
-  }
-
-  &-danger {
-    background: var(--button-danger-background);
-    border-bottom-color: var(--button-danger-borderBottom-color);
-
-    &:hover {
-      background: var(--button-danger-background-hover);
-    }
-  }
-
-  &-outline {
-    background-color: var(--button-outline-background);
-    border: var(--button-outline-border-width) solid var(--button-outline-border-color);
-    border-bottom-width: var(--button-outline-borderBottom-width);
-    color: var(--button-outline-text);
-    padding-top: calc(var(--button-horizontal-padding) - 1px);
-
-    &:hover {
-      background-color: var(--button-outline-background-hover);
-    }
-  }
-
-  &-icon {
-    fill: currentColor;
-    height: 14px;
-    width: 14px;
-
-    &:first-child {
-      margin-right: 5px;
-    }
-
-    &:last-child {
-      margin-left: 6px;
-    }
-  }
-
-  &:disabled {
-    background: var(--button-disabled-background);
-    border-color: var(--button-disabled-background);
-    border-bottom-color: var(--button-disabled-borderBottom-color);
-    color: var(--button-disabled-text);
-    cursor: default;
-    text-shadow: var(--button-disabled-textShadow);
-  }
-}

data/app/components/essence/card_component/card_component.scss

@@ -1,21 +0,0 @@
-:root {
-  --card-headline:       #a3a3a3;
-  --card-background:     white;
-  --card-shadow:         0 2px 7px rgba(0, 0, 0, 0.2);
-  --card-divider-border: 1px solid #e6e6e6;
-  --card-borderRadius:   3px;
-  --card-padding:        40px;
-}
-
-.card {
-  background-color: var(--card-background);
-  border-radius: var(--card-borderRadius);
-  box-shadow: var(--card-shadow);
-  padding: var(--card-padding);
-
-  &-headline {
-    color: var(--card-headline);
-    font-size: 140%;
-    margin: -10px 0 .83em;
-  }
-}

data/app/components/essence/empty_state_component/empty_state_component.scss

@@ -1,50 +0,0 @@
-:root {
-  --emptyState-surface:   #e3e3e3;
-  --emptyState-bubbles:   #dedede;
-  --emptyState-outline:   #575757;
-  --emptyState-headline:  #676767;
-  --emptyState-help-text: gray;
-}
-
-.empty-state {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &-image {
-    flex-shrink: 0;
-    margin: 0 60px 0 0;
-    max-width: 200px;
-
-    .bubbles {
-      fill: var(--emptyState-bubbles);
-    }
-
-    .outline {
-      fill: var(--emptyState-outline);
-    }
-
-    .surface {
-      fill: var(--emptyState-surface);
-    }
-  }
-
-  &-text {
-    display: grid;
-    gap: 20px;
-  }
-
-  &-headline {
-    color: var(--emptyState-headline);
-    font-size: 300%;
-    font-weight: lighter;
-    line-height: 1;
-    margin-bottom: 0;
-  }
-
-  &-body {
-    color: var(--emptyState-help-text);
-    font-size: 125%;
-    margin: 0;
-  }
-}

data/app/components/essence/link_component/link_component.scss

@@ -1,58 +0,0 @@
-:root {
-  --primaryLink-color:         deepskyblue;
-  --primaryLink-hover-color:   #0099cc;
-  --secondaryLink-color:       #787878;
-  --secondaryLink-hover-color: #5e5e5e;
-  --dangerLink-color:          #da3c3c;
-  --dangerLink-hover-color:    #bf2424;
-}
-
-.link {
-  align-items: center;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
-  height: fit-content;
-  padding: 0;
-  text-decoration: none;
-  white-space: nowrap;
-
-  &-primary {
-    color: var(--primaryLink-color);
-
-    &:hover {
-      color: var(--primaryLink-hover-color);
-    }
-  }
-
-  &-secondary {
-    color: var(--secondaryLink-color);
-
-    &:hover {
-      color: var(--secondaryLink-hover-color);
-    }
-  }
-
-  &-danger {
-    color: var(--dangerLink-color);
-
-    &:hover {
-      color: var(--dangerLink-hover-color);
-    }
-  }
-
-  &-icon {
-    fill: currentColor;
-    height: 15px;
-    width: 15px;
-
-    &:first-child {
-      margin-right: 5px;
-    }
-
-    &:last-child {
-      margin-left: 6px;
-    }
-  }
-}

data/app/components/essence/notification_component/notification_component.scss

@@ -1,63 +0,0 @@
-:root {
-  --notification-background:   white;
-  --notification-text:         gray;
-  --notification-borderRadius: 4px;
-  --notification-success:      #97c344;
-  --notification-info:         #999999;
-  --notification-warning:      #f3b547;
-  --notification-danger:       #da3c3c;
-}
-
-.notification {
-  background-color: var(--notification-background);
-  border-radius: var(--notification-borderRadius);
-  display: flex;
-
-  &-body {
-    color: var(--notification-text);
-    padding: 8px 14px;
-  }
-
-  &-danger {
-    border: 1px solid var(--notification-danger);
-
-    .notification-indicator {
-      background-color: var(--notification-danger);
-    }
-  }
-
-  &-icon {
-    display: block;
-    fill: var(--notification-background);
-    height: 18px;
-    width: 18px;
-  }
-
-  &-indicator {
-    padding: 10px 8px;
-  }
-
-  &-info {
-    border: 1px solid var(--notification-info);
-
-    .notification-indicator {
-      background-color: var(--notification-info);
-    }
-  }
-
-  &-success {
-    border: 1px solid var(--notification-success);
-
-    .notification-indicator {
-      background-color: var(--notification-success);
-    }
-  }
-
-  &-warning {
-    border: 1px solid var(--notification-warning);
-
-    .notification-indicator {
-      background-color: var(--notification-warning);
-    }
-  }
-}

data/app/components/essence/status_component/status_component.scss

@@ -1,80 +0,0 @@
-:root {
-  --todo-status-background:    #f9dca7;
-  --todo-status-text:          #af740b;
-  --todo-status-icon:          #f0a217;
-  --active-status-background:  #cde2a5;
-  --active-status-text:        #4e6721;
-  --active-status-icon:        #8ab43a;
-  --danger-status-background:  #eeb3a7;
-  --danger-status-text:        #c72626;
-  --danger-status-icon:        #e46f6f;
-  --outline-status-background: transparent;
-  --outline-status-border:     #b3b3b3;
-  --outline-status-text:       #808080;
-  --outline-status-icon:       #cdcdcd;
-}
-
-.status {
-  align-items: center;
-  border-radius: 3px;
-  display: inline-flex;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.2;
-  padding: 4px 6px;
-
-  &-bubble {
-    border-radius: 3px;
-    display: inline-flex;
-    flex-shrink: 0;
-    height: 10px;
-    margin-right: 6px;
-    width: 10px;
-
-    &-dotted {
-      border: 1px dotted currentColor;
-    }
-
-    &-outline,
-    &-solid {
-      border: 1px solid currentColor;
-    }
-  }
-
-  &-todo {
-    background-color: var(--todo-status-background);
-    color: var(--todo-status-text);
-
-    .status-bubble-solid {
-      background-color: var(--todo-status-icon);
-    }
-  }
-
-  &-active {
-    background-color: var(--active-status-background);
-    color: var(--active-status-text);
-
-    .status-bubble-solid {
-      background-color: var(--active-status-icon);
-    }
-  }
-
-  &-danger {
-    background-color: var(--danger-status-background);
-    color: var(--danger-status-text);
-
-    .status-bubble-solid {
-      background-color: var(--danger-status-icon);
-    }
-  }
-
-  &-outline {
-    background-color: var(--outline-status-background);
-    border: 1px solid var(--outline-status-border);
-    color: var(--outline-status-text);
-
-    .status-bubble-solid {
-      background-color: var(--outline-status-icon);
-    }
-  }
-}

data/app/components/essence/step_list_component/step_list_component.scss

@@ -1,79 +0,0 @@
-:root {
-  --stepList-background:        #f0f0f0;
-  --stepList-headline:          #747474;
-  --stepList-bubble-line:       #808080;
-  --stepList-bubble-background: #808080;
-  --stepList-bubble-text:       white;
-}
-
-.step-list {
-  background-color: var(--stepList-background);
-  padding: 25px;
-  counter-reset: item-count;
-
-  &-title {
-    color: var(--stepList-headline);
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    margin-top: 0;
-  }
-
-  &-items {
-    margin-left: -2px;
-  }
-
-  &-item {
-    display: flex;
-
-    &:not(:nth-last-child(1 of .step-list-item)) {
-      padding-bottom: 20px;
-
-      > div:first-child {
-        &::before {
-          content: ' ';
-          position: absolute;
-          left: 10px;
-          width: 2px;
-          height: 100%;
-          background-color: var(--stepList-bubble-line);
-          top: 20px;
-        }
-      }
-    }
-
-    > div:first-child {
-      position: relative;
-      width: 35px;
-    }
-  }
-
-  &-bubble {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background-color: var(--stepList-bubble-background);
-    color: var(--stepList-bubble-text);
-    line-height: 19px;
-    font-size: 11px;
-    font-weight: bold;
-    text-align: center;
-
-    &::before {
-      counter-increment: item-count;
-      content: counter(item-count);
-    }
-  }
-
-  &-headline {
-    font-weight: bold;
-    line-height: 1.2;
-    margin-bottom: 5px;
-    color: var(--stepList-headline);
-  }
-
-  &-description {
-    font-size: 14px;
-    margin: 0;
-  }
-}

data/app/components/essence/tooltip_component/tooltip_component.scss

@@ -1,63 +0,0 @@
-:root {
-  --tooltip-icon:         orange;
-  --tooltip-background:   white;
-  --tooltip-text:         #3e3e3e;
-  --tooltip-borderRadius: 3px;
-  --tooltip-boxShadow:    0 0 14px 0 rgba(0, 0, 0, 0.4);
-}
-
-.tooltip {
-  display: flex;
-
-  &-arrow {
-    background: var(--tooltip-background);
-    height: 10px;
-    position: absolute;
-    width: 10px;
-    z-index: -1;
-  }
-
-  &-bubble {
-    background-color: var(--tooltip-background);
-    border-radius: var(--tooltip-borderRadius);
-    box-shadow: var(--tooltip-boxShadow);
-    color: var(--tooltip-text);
-    cursor: default;
-    display: none;
-    font-size: 13px;
-    font-weight: normal;
-    line-height: 1.4;
-    max-width: 350px;
-    padding: 1em;
-    position: absolute;
-    transition: opacity cubic-bezier(0, 0, 0.57, 0.74) 0.2s, 0.2s visibility;
-    z-index: 1;
-
-    &:before {
-      content: '';
-      display: block;
-      height: 14px;
-      left: -10px;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 10px;
-    }
-
-    &:hover {
-      display: block;
-    }
-  }
-
-  &-icon {
-    fill: var(--tooltip-icon);
-    height: 14px;
-    width: 14px;
-
-    &:hover {
-      ~ .tooltip-bubble {
-        display: block;
-      }
-    }
-  }
-}