greatly improve role component visual feel

2025-06-17 02:29:10 +00:00 · 2019-03-21 03:19:33 -05:00 · 2019-03-21 03:19:33 -05:00 · 998b1930b3
commit 998b1930b3
parent 73f60cbd3d
2 changed files with 160 additions and 59 deletions
--- a/ui/components/role/role.styled.js
+++ b/ui/components/role/role.styled.js
@ -0,0 +1,109 @@
+import styled from 'styled-components'
+import MediaQuery from '../../kit/media'
+
+export default styled.div`
+  border: solid 1px ${(props: any) => props.colors.outline};
+  border-radius: 1.2em;
+
+  box-sizing: border-box;
+  cursor: pointer;
+
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  font-size: 1.2em;
+  line-height: 1.3;
+
+  margin: 0.3em;
+  padding: 4px 0.5em;
+
+  min-height: 32px;
+  max-width: 90vw;
+
+  transition: box-shadow 0.3s ease-in-out;
+
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+  transform: rotateZ(0);
+
+  ${(props: any) => (props.active) ? `box-shadow: inset 0 0 0 3em ${props.colors.outlineAlt};` : ''}
+
+  .wf-active & {
+    padding-top: 2px;
+  }
+
+  &[disabled]:hover {
+    overflow: visible;
+  }
+
+  &:hover::after {
+    transform: translateY(-1px) rotateZ(0);
+    box-shadow: 0 0 1px rgba(0,0,0,0.75);
+    border-color: ${(props: any) => props.colors.active}
+  }
+
+  &:active::after {
+    transform: none;
+  }
+
+  &::after {
+    content: '';
+    display: none;
+    box-sizing: border-box;
+
+    position: absolute;
+    left: 4px;
+    bottom: 2px;
+    top: 4px;
+
+    width: 22px;
+    height: 22px;
+
+    border: 1px solid ${(props: any) => props.colors.base};
+    border-radius: 100%;
+
+    transition: border 0.3s ease-in-out, transform 0.1s ease-in-out;
+
+    clip-path: border-box circle(50% at 50% 50%); /* firefox fix */
+
+    transform: rotateZ(0);
+    ${(props: any) => (props.active) ? 'border-left-width: 21px;' : ''}
+  }
+
+  ${(props: any) => MediaQuery({
+    md: `
+      font-size: 1em;
+      text-shadow: none;
+      padding-left: 32px;
+      ${(props.active) ? 'box-shadow: none;' : ''}
+      &::after {
+        display: block;
+      }
+    `
+  })}
+
+  ${(props: any) => (props.disabled) ? `
+    border-color: hsl(0,0%,40%);
+    color: hsla(0,0%,40%,0.7);
+    cursor: default;
+    box-shadow: none;
+    ${(props.active) ? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);` : ''}
+
+    &::after {
+      border-color: hsl(0,0%,40%);
+    }
+
+    &:hover::after {
+      border-color: hsl(0,0%,40%);
+      transform: none;
+      box-shadow: none;
+    }
+  ` : ''}
+`