ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs)

ui-v2/app/components/tabular-collection.js

@@ -82,7 +82,7 @@ const change = function(e) {
         const dom = get(this, 'dom');
 
         const $tr = dom.closest('tr', e.currentTarget);
-        const $group = dom.sibling(e.currentTarget, 'ul');
+        const $group = dom.sibling(e.currentTarget, 'div');
         const groupRect = $group.getBoundingClientRect();
         const groupBottom = groupRect.top + $group.clientHeight;
 

ui-v2/app/styles/base/components/action-group/index.scss

@@ -1,7 +1,18 @@
 @import '../toggle-button/index';
+@import '../menu-panel/index';
+@import '../confirmation-alert/index';
 @import './skin';
 @import './layout';
 
-%action-group label:first-of-type {
+%action-group > div {
+  @extend %menu-panel;
+}
+%action-group > label:first-of-type {
   @extend %toggle-button;
 }
+%action-group .confirmation-alert {
+  @extend %confirmation-alert;
+}
+%action-group .type-delete {
+  @extend %internal-button-dangerous;
+}

ui-v2/app/styles/base/components/action-group/layout.scss

@@ -4,79 +4,54 @@
   width: 30px;
   height: 30px;
 }
-%action-group label span {
+%action-group > div {
+  transition: min-height 150ms;
+  min-height: 0;
+  width: 192px;
+}
+%action-group .confirmation-alert {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+}
+%action-group > label span {
   display: none;
 }
-%action-group label {
+%action-group > label {
   display: block;
   height: 100%;
 }
-%action-group label:last-of-type {
+%action-group > label:last-of-type {
   position: absolute;
   width: 100%;
   z-index: -1;
   top: 0;
 }
-%action-group-action {
-  width: 170px;
-  padding: 10px 10px;
-  text-align: left;
-}
-/* this is actually the group */
-%action-group ul {
-  position: absolute;
-  padding: 1px;
-}
-%action-group li > * {
-  @extend %action-group-action;
-}
-%action-group ul::before {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-}
-%action-group ul:not(.left) {
-  right: 0px;
-}
-%action-group ul:not(.left)::before {
-  right: 9px;
-}
-%action-group ul.left {
-  left: 0px;
-}
-%action-group ul.left::before {
-  left: 9px;
-}
-%action-group ul:not(.above) {
-  top: 23px;
-}
-%action-group ul:not(.above)::before {
-  top: -6px;
-  transform: rotate(45deg);
-}
-%action-group ul.above {
-  bottom: 23px;
-}
-%action-group ul.above::before {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-%action-group li {
-  position: relative;
-  z-index: 1;
-}
 %action-group input[type='radio'],
-%action-group input[type='radio'] ~ ul,
+%action-group input[type='radio'] ~ div,
 %action-group input[type='radio'] ~ .with-confirmation > ul {
   display: none;
 }
-%action-group input[type='radio']:checked ~ ul,
+%action-group input[type='radio']:checked ~ div,
 %action-group input[type='radio']:checked ~ .with-confirmation > ul {
   display: block;
 }
 /*TODO: If anything this is %toggle-button*/
 %action-group input[type='radio']:checked ~ label[for='actions_close'] {
   z-index: 1;
 }
+%action-group input[type='checkbox'] {
+  @extend %action-group-confirm-toggle;
+}
+%action-group-confirm-toggle {
+  display: none;
+}
+%action-group-confirm-toggle + div > ul,
+%action-group-confirm-toggle + div > ul + div {
+  transition: transform 150ms;
+}
+%action-group-confirm-toggle:checked + div > ul,
+%action-group-confirm-toggle:checked + div > ul + div {
+  transform: translateX(-100%);
+}

ui-v2/app/styles/base/components/action-group/skin.scss

@@ -2,38 +2,11 @@
   /* frame-gray */
   background-color: $gray-050;
 }
-%action-group label,
-%action-group-action {
+%action-group > label {
   cursor: pointer;
 }
-%action-group label:first-of-type::after {
+%action-group > label:first-of-type::after {
   @extend %with-more-horizontal-icon;
   @extend %as-pseudo;
   opacity: 0.7;
 }
-%action-group ul {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
-}
-%action-group ul::before {
-  border-top: $decor-border-100;
-  border-left: $decor-border-100;
-}
-%action-group ul,
-%action-group ul::before {
-  border-color: $color-action;
-}
-%action-group-action {
-  background-color: $white;
-}
-%action-group-action:hover {
-  @extend %frame-blue-800;
-}
-%action-group ul,
-%action-group ul::before {
-  background-color: $white;
-}
-%action-group li {
-  list-style-type: none;
-}

ui-v2/app/styles/base/components/breadcrumbs/index.scss

@@ -6,3 +6,18 @@
 %breadcrumbs strong {
   @extend %breadcrumb-selected;
 }
+%breadcrumbs-milestone {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-milestone li:first-child > * {
+  @extend %breadcrumb-milestone;
+}
+%breadcrumbs-filesystem {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-filesystem li:not(:first-child) > * {
+  @extend %breadcrumb-path;
+}
+%breadcrumbs-filesystem li:first-child > * {
+  @extend %breadcrumb-folder;
+}

ui-v2/app/styles/base/components/breadcrumbs/skin.scss

@@ -2,10 +2,25 @@
   list-style-type: none;
 }
 %breadcrumb::before {
-  content: '❮';
   line-height: 1;
   font-size: 0.7em;
-  margin-top: 0.1em;
+  margin-top: 0.2em;
+}
+%breadcrumb::before {
+  content: '❮';
+}
+%breadcrumb-milestone::before {
+  content: '❮❮';
+}
+%breadcrumb-path::before {
+  content: '/';
+}
+%breadcrumb-folder::before {
+  position: relative;
+  top: 2px;
+  margin-top: -4px;
+  @extend %with-folder-outline-color-icon;
+  @extend %as-pseudo;
 }
 %breadcrumb {
   color: $color-action;

ui-v2/app/styles/base/components/buttons/layout.scss

@@ -38,3 +38,9 @@
   padding-top: calc(0.35em - 1px) !important;
   height: 2.3em !important;
 }
+%internal-button {
+  padding: 0.75rem 1rem;
+  text-align: center;
+  display: inline-block;
+  box-sizing: border-box;
+}

ui-v2/app/styles/base/components/buttons/skin.scss

@@ -1,10 +1,12 @@
 /* decor */
-%button {
+%button,
+%internal-button {
   @extend %user-select-none;
   cursor: pointer;
   white-space: nowrap;
 }
-%button:disabled {
+%button:disabled,
+%internal-button:disabled {
   cursor: default;
   box-shadow: none;
 }
@@ -92,3 +94,21 @@
 %dangerous-button:hover:active {
   @extend %frame-red-900;
 }
+
+%internal-button-dangerous {
+  @extend %frame-red-300;
+}
+%internal-button-dangerous-intent {
+  @extend %frame-red-700;
+}
+%internal-button-intent {
+  background-color: $gray-100;
+}
+%internal-button:focus,
+%internal-button:hover {
+  @extend %internal-button-intent;
+}
+%internal-button-dangerous:focus,
+%internal-button-dangerous:hover {
+  @extend %internal-button-dangerous-intent;
+}

ui-v2/app/styles/base/components/checkbox-group/index.scss

@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';

ui-v2/app/styles/base/components/checkbox-group/layout.scss

@@ -0,0 +1,14 @@
+/* TODO: This is positioning the group */
+/* probably should be in a special %form class*/
+%checkbox-group {
+  @extend %form-row;
+}
+%checkbox-group span {
+  display: inline-block;
+  margin-left: 10px;
+  min-width: 50px;
+}
+%checkbox-group label {
+  margin-right: 10px;
+  white-space: nowrap;
+}

ui-v2/app/styles/base/components/checkbox-group/skin.scss

@@ -0,0 +1,3 @@
+%checkbox-group label {
+  cursor: pointer;
+}

ui-v2/app/styles/base/components/confirmation-alert/index.scss

@@ -0,0 +1,6 @@
+@import './skin';
+@import './layout';
+
+%confirmation-alert > ul > li > * {
+  @extend %internal-button;
+}

ui-v2/app/styles/base/components/confirmation-alert/layout.scss

@@ -0,0 +1,14 @@
+%confirmation-alert > div {
+  padding: 1rem;
+}
+%confirmation-alert > ul {
+  display: flex;
+  margin: 0;
+  padding: 4px;
+}
+%confirmation-alert > ul > li {
+  width: 50%;
+}
+%confirmation-alert > ul > li > * {
+  width: 100%;
+}

ui-v2/app/styles/base/components/confirmation-alert/skin.scss

@@ -0,0 +1,26 @@
+%confirmation-alert {
+  background-color: $white;
+}
+
+%confirmation-alert > div {
+  background-color: $yellow-050;
+  border-top-left-radius: $decor-radius-200;
+  border-top-right-radius: $decor-radius-200;
+}
+%confirmation-alert > ul {
+  list-style: none;
+}
+%confirmation-alert > ul > li > * {
+  cursor: pointer;
+}
+%confirmation-alert > ul > li > *:hover,
+%confirmation-alert > ul > li > *:focus {
+  background-color: $gray-100;
+}
+%confirmation-alert > ul > .dangerous > * {
+  @extend %frame-red-300;
+}
+%confirmation-alert > ul > .dangerous > *:hover,
+%confirmation-alert > ul > .dangerous > *:focus {
+  @extend %frame-red-700;
+}

ui-v2/app/styles/base/components/form-elements/index.scss

@@ -0,0 +1,27 @@
+@import './skin';
+@import './layout';
+/* TODO: This is positioning the element */
+/* probably should be in a special %form class*/
+%form-element {
+  @extend %form-row;
+}
+%form-element > span {
+  @extend %form-element-label;
+}
+%form-element > em {
+  @extend %form-element-note;
+}
+%form-element-error > strong {
+  @extend %inline-alert-error;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  @extend %form-element-text-input;
+}
+%form-element-text-input:hover {
+  @extend %form-element-text-input-hover;
+}
+%form-element-text-input:focus {
+  @extend %form-element-text-input-focus;
+}