@componyx/ui 0.0.0-stage → 1.0.3

package/Button/Button.css

@@ -0,0 +1,470 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+/* default button */
+:root
+{
+    --button-height: 28px;
+    --button-padding-x: 6px;
+    --button-expand-width: 14px;
+}
+
+.button.theme.size-s
+{
+    --button-height: 24px;
+    --button-expand-width: 12px;
+}
+
+.button.theme.size-l
+{
+    --button-height: 38px;
+    --button-padding-x: 10px;
+    --button-expand-width: 19px;
+}
+
+.button.theme.size-xl
+{
+    --button-height: 48px;
+    --button-padding-x: 14px;
+    --button-expand-width: 24px;
+}
+
+.button.theme
+{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    white-space: nowrap;
+    vertical-align: top;
+    text-align: center;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-decoration: none;
+    cursor: pointer;
+    box-sizing: content-box;
+    padding: 0;
+    outline: 0;
+}
+
+    .button.theme > a
+    {
+        display: none !important;
+    }
+
+    .button.theme::after
+    {
+        clear: both;
+    }
+
+    .button.theme:not(.split),
+    .button.theme.split > div
+    {
+        margin: 0px;
+        padding-left: var(--button-padding-x);
+        padding-right: var(--button-padding-x);
+        border-style: solid;
+        vertical-align: top;
+        height: var(--button-height);
+    }
+
+
+    .button.theme[class*='content-'],
+    .button.theme[class*='content-'] > div.command
+    {
+        padding-left: calc(var(--button-padding-x) + 10px);
+        padding-right: calc(var(--button-padding-x) + 10px);
+    }
+
+    .button.theme.content-left
+    {
+        justify-content: left;
+    }
+
+    .button.theme.content-right
+    {
+        justify-content: right;
+    }
+
+    .button.theme.content-center
+    {
+        justify-content: center;
+    }
+
+        .button.theme.content-center.split > div.command
+        {
+            justify-content: center;
+        }
+
+    .button.theme span
+    {
+        display: inline-block;
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
+    /* split button */
+    .button.theme.split
+    {
+        padding-left: 0px;
+        padding-right: 0px;
+        margin-left: 0px;
+        position: relative;
+        border-style: none;
+        border-radius: 0px;
+        min-width: 0px;
+        background: none;
+    }
+
+        .button.theme.split > div.command
+        {
+            display: inline-flex;
+            position: relative;
+            white-space: nowrap;
+            cursor: pointer;
+            border-radius: var(--cui-border-radius);
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        .button.theme.split > div.expand
+        {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            width: var(--button-expand-width);
+            height: var(--button-height);
+            cursor: pointer;
+            border-left-style: none;
+            border-radius: var(--cui-border-radius);
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            flex-shrink: 0;
+        }
+
+    /* content holder */
+    .button.theme .content-holder
+    {
+        display: none;
+        position: relative;
+        vertical-align: top;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        align-items: center;
+    }
+
+
+    .button.theme[class*='content-'] > .content-holder,
+    .button.theme[class*='content-'] > div > .content-holder
+    {
+        display: inline-flex;
+    }
+
+    .button.theme.icon-left .content-holder
+    {
+        margin-left: 6px;
+    }
+
+    .button.theme.icon-right .content-holder
+    {
+        margin-right: 6px;
+    }
+
+
+    /* icon */
+    .button.theme span.icon
+    {
+        position: relative;
+        min-width: 16px;
+        min-height: 16px;
+        background-repeat: no-repeat;
+        background-image: none;
+        font-family: 'UI';
+        font-weight: normal;
+        font-size: 16px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* expand icon */
+    .button.theme span.expand-icon
+    {
+        margin-left: 16px;
+    }
+
+    .button.theme div.expand span.expand-icon
+    {
+        margin-left: 0px;
+    }
+
+    .button.theme.up span.expand-icon::after
+    {
+        top: 1px;
+        transform: rotate(-45deg);
+    }
+
+    .button.theme.down span.expand-icon::after
+    {
+        top: -3px;
+        transform: rotate(135deg);
+    }
+
+    .button.theme.left span.expand-icon::after
+    {
+        top: -1px;
+        left: 2px;
+        transform: rotate(-135deg);
+    }
+
+    .button.theme.right span.expand-icon::after
+    {
+        top: -1px;
+        left: -1px;
+        transform: rotate(45deg);
+    }
+
+
+    /* transparent border */
+    .button.theme:not(.split):not(.border),
+    .button.theme.split:not(.border) > div
+    {
+        border-color: transparent;
+    }
+
+        /* always display split-button border to distinct the command and expand buttons */
+        .button.theme.split:not(.border) > div.command
+        {
+            border-right-style: solid;
+        }
+
+    /* use default font color for lucent button */
+    .button.theme:not(.split).lucent:not(.selected):not(.expanded):not(:hover),
+    .button.theme.split.lucent:not(.expanded) > div:not(.selected):not(.expanded):not(:hover)
+    {
+        color: inherit;
+    }
+
+    /* disabled transparent */
+    .button.theme:not(.split).disabled.lucent,
+    .button.theme.split.disabled.lucent > div,
+    .button.theme:not(.split).disabled.lucent:hover,
+    .button.theme.split.disabled.lucent > div:hover,
+    .button.theme:not(.split).disabled.lucent.pressed,
+    .button.theme.split.disabled.lucent > div.pressed
+    {
+        background: none;
+    }
+
+    /* disabled */
+    .button.theme.disabled,
+    .button.theme.split.disabled > div.command,
+    .button.theme.split.disabled > div.expand
+    {
+        cursor: default;
+    }
+
+    /* bg transition */
+    .button.theme:not(.split):hover,
+    .button.theme.split > div:hover
+    {
+        transition: background 0.5s, color 0.25s;
+    }
+
+    .button.theme.pressed,
+    .button.theme.split > div.pressed
+    {
+    }
+
+    /* ripple */
+
+    .button.theme:not(.split) > .ripple-mask,
+    .button.theme.split > div > .ripple-mask
+    {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        right: 0px;
+        overflow: hidden;
+        pointer-events: none;
+    }
+
+        .button.theme:not(.split) > .ripple-mask > span.ripple,
+        .button.theme.split > div > .ripple-mask > span.ripple
+        {
+            display: inline-block;
+            position: absolute;
+            transform: scale(0) translate(-50%, -50%);
+            background: rgba(255, 255, 255, 0.3);
+            width: 200%;
+            height: 300%;
+            border-radius: 100%;
+            animation: rippleAnimation .5s ease-out;
+        }
+
+    .button.theme:not(.split).lucent > .ripple-mask > span.ripple,
+    .button.theme:not(.split).basic > .ripple-mask > span.ripple,
+    .button.theme.split.lucent > div > .ripple-mask > span.ripple,
+    .button.theme.split.basic > div > .ripple-mask > span.ripple
+    {
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+@keyframes rippleAnimation
+{
+    0%
+    {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0);
+    }
+
+    80%
+    {
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100%
+    {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/* overline and underline pseudo class */
+.button.theme:not(.split)[class*='line-']::after,
+.button.theme.split[class*='line-'] > div::after
+{
+    content: '';
+    position: absolute;
+    display: inline-block;
+    top: -1px;
+    right: 0;
+    width: 0;
+    height: 2px;
+    transition: width .2s linear, opacity .2s linear;
+}
+
+/* frontline and backline */
+.button.theme:not(.split)[class*='line-front']::after,
+.button.theme.split[class*='line-front'] > div::after
+{
+    left: -1px;
+    right: auto;
+    top: auto;
+    bottom: 0;
+    height: 0;
+    width: 2px;
+    transition: height .2s linear, opacity .2s linear;
+}
+
+.button.theme:not(.split)[class*='line-back']::after,
+.button.theme.split[class*='line-back'] > div::after
+{
+    right: -1px;
+    left: auto;
+    top: auto;
+    bottom: 0;
+    height: 0;
+    width: 2px;
+    transition: height .2s linear, opacity .2s linear;
+}
+
+
+
+.button.theme:not(.split)[class*='line-'].disabled::after,
+.button.theme.split[class*='line-'].disabled > div::after
+{
+    transition: none !important;
+}
+
+.button.theme:not(.split)[class*='line-'].selected::after,
+.button.theme.split[class*='line-'].selected > div::after,
+.button.theme.split[class*='line-'] > div.selected::after,
+.button.theme:not(.split)[class*='line-'].expanded::after,
+.button.theme.split[class*='line-'].expanded > div::after
+{
+    opacity: 1;
+    width: 100%;
+}
+
+.button.theme:not(.split)[class*='line-front'].selected::after,
+.button.theme.split[class*='line-front'].selected > div::after,
+.button.theme.split[class*='line-front'] > div.selected::after,
+.button.theme:not(.split)[class*='line-front'].expanded::after,
+.button.theme.split[class*='line-front'].expanded > div::after,
+.button.theme:not(.split)[class*='line-back'].selected::after,
+.button.theme.split[class*='line-back'].selected > div::after,
+.button.theme.split[class*='line-back'] > div.selected::after,
+.button.theme:not(.split)[class*='line-back'].expanded::after,
+.button.theme.split[class*='line-back'].expanded > div::after
+{
+    opacity: 1;
+    height: 100%;
+    width: 2px;
+}
+
+
+.button.theme:not(.split)[class*='line-']:not(.disabled):hover::after,
+.button.theme.split[class*='line-']:not(.disabled):hover > div::after,
+.button.theme.split[class*='line-']:not(.disabled) > div:hover::after,
+.button.theme:not(.split)[class*='line-']:focus::after,
+.button.theme.split[class*='line-']:focus > div::after
+{
+    opacity: 1;
+    left: 0;
+    right: auto;
+    width: 100%;
+}
+
+.button.theme:not(.split)[class*='line-front']:not(.disabled):hover::after,
+.button.theme.split[class*='line-front']:not(.disabled):hover > div::after,
+.button.theme.split[class*='line-front']:not(.disabled) > div:hover::after,
+.button.theme:not(.split)[class*='line-front']:focus::after,
+.button.theme.split[class*='line-front']:focus > div::after
+{
+    height: 100%;
+    width: 2px;
+    top: 0;
+    bottom: auto;
+    left: -1px;
+    right: auto;
+}
+
+.button.theme:not(.split)[class*='line-back']:not(.disabled):hover::after,
+.button.theme.split[class*='line-back']:not(.disabled):hover > div::after,
+.button.theme.split[class*='line-back']:not(.disabled) > div:hover::after,
+.button.theme:not(.split)[class*='line-back']:focus::after,
+.button.theme.split[class*='line-back']:focus > div::after
+{
+    height: 100%;
+    width: 2px;
+    top: 0;
+    bottom: auto;
+    right: -1px;
+    left: auto;
+}
+
+
+
+.button.theme:not(.split)[class*='line-under']::after,
+.button.theme.split[class*='line-under'] > div::after
+{
+    top: auto;
+    bottom: -1px;
+}
+
+/* CHROME fix for border glitch on hover */
+.button.theme.split:not(.border):hover > div.command
+{
+    border-right-color: transparent !important;
+}
+
+.button.theme.theme-default:focus-visible
+{
+    outline-width: 1px;
+    outline-style: solid;
+}