app/components/yattho/beta/button.css in yattho_view_components-0.0.1 vs app/components/yattho/beta/button.css in yattho_view_components-0.1.1
- old
+ new
@@ -1,365 +2 @@
-/* CSS for Button */
-
-/* temporary, pre primitives release */
-
-:root {
- --yattho-duration-fast: 80ms;
- --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
-}
-
-/* base button */
-
-.Button {
- position: relative;
- font-size: var(--yattho-text-body-size-medium, 14px);
- font-weight: var(--base-text-weight-medium, 500);
- cursor: pointer;
- -webkit-user-select: none;
- user-select: none;
- background-color: transparent;
- border: var(--yattho-borderWidth-thin, 1px) solid;
- border-color: transparent;
- border-radius: var(--yattho-borderRadius-medium, 6px);
- color: var(--color-btn-text);
- transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);
- transition-property: color, fill, background-color, border-color;
- text-align: center;
- height: var(--yattho-control-medium-size, 32px);
- padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: var(--yattho-control-medium-gap, 8px);
- min-width: max-content;
-
- /* mobile friendly sizing */
-}
-
-@media (pointer: coarse) {
- .Button::before {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 100%;
- height: 100%;
- min-height: 48px;
- content: "";
- transform: translateX(-50%) translateY(-50%);
- min-width: 48px;
- }
- }
-
-/* base states */
-
-.Button:hover {
- transition-duration: var(--yattho-duration-fast);
- }
-
-.Button:active {
- transition: none;
- }
-
-.Button:disabled,
- .Button[aria-disabled='true'] {
- cursor: not-allowed;
- box-shadow: none;
- }
-
-.Button-withTooltip {
- position: relative;
- display: inline-block;
-}
-
-a.Button,
-summary.Button {
- display: inline-flex;
-}
-
-a.Button:hover, summary.Button:hover {
- text-decoration: none;
- }
-
-/* wrap grid content to allow trailingAction to lock-right */
-
-.Button-content {
- flex: 1 0 auto;
- display: grid;
- grid-template-areas: 'leadingVisual text trailingVisual';
- grid-template-columns: min-content minmax(0, auto) min-content;
- align-items: center;
- place-content: center;
-
- /* padding-bottom: 1px; optical alignment for firefox */
-}
-
-.Button-content > :not(:last-child) {
- margin-right: var(--yattho-control-medium-gap, 8px);
- }
-
-/* center child elements for fullWidth */
-
-.Button-content--alignStart {
- justify-content: start;
-}
-
-/* button child elements */
-
-/* align svg */
-
-.Button-visual {
- display: flex;
- pointer-events: none; /* allow click handler to work, avoiding visuals */
-}
-
-.Button-visual .Counter {
- color: inherit;
- background-color: var(--color-btn-counter-bg);
- }
-
-.Button-label {
- grid-area: text;
- white-space: nowrap;
- line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
-}
-
-.Button-leadingVisual {
- grid-area: leadingVisual;
-}
-
-.Button-trailingVisual {
- grid-area: trailingVisual;
-}
-
-.Button-trailingAction {
- margin-right: calc(var(--base-size-4, 4px) * -1);
-}
-
-/* sizes */
-
-.Button--small {
- font-size: var(--yattho-text-body-size-small, 12px);
- height: var(--yattho-control-small-size, 28px);
- padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);
- gap: var(--yattho-control-small-gap, 4px);
-}
-
-.Button--small .Button-label {
- line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
- }
-
-.Button--small .Button-content > :not(:last-child) {
- margin-right: var(--yattho-control-small-gap, 4px);
- }
-
-.Button--large {
- height: var(--yattho-control-large-size, 40px);
- padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);
- gap: var(--yattho-control-large-gap, 8px);
-}
-
-.Button--large .Button-label {
- line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));
- }
-
-.Button--large .Button-content > :not(:last-child) {
- margin-right: var(--yattho-control-large-gap, 8px);
- }
-
-.Button--fullWidth {
- width: 100%;
-}
-
-/* variants */
-
-/* primary */
-
-.Button--primary {
- color: var(--color-btn-primary-text);
- fill: var(--color-btn-primary-icon);
- background-color: var(--color-btn-primary-bg);
- border-color: var(--color-btn-primary-border);
- box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
-}
-
-.Button--primary:hover:not(:disabled) {
- background-color: var(--color-btn-primary-hover-bg);
- border-color: var(--color-btn-primary-hover-border);
- }
-
-/* fallback :focus state */
-
-.Button--primary:focus {
- outline: 2px solid var(--color-accent-fg);
- outline-offset: -2px;
- box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
-
- /* remove fallback :focus if :focus-visible is supported */
- }
-
-.Button--primary:focus:not(:focus-visible) {
- outline: solid 1px transparent;
- box-shadow: none;
- }
-
-/* default focus state */
-
-.Button--primary:focus-visible {
- outline: 2px solid var(--color-accent-fg);
- outline-offset: -2px;
- box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
- }
-
-.Button--primary:active:not(:disabled),
- .Button--primary[aria-pressed='true'] {
- background-color: var(--color-btn-primary-selected-bg);
- box-shadow: var(--color-btn-primary-selected-shadow);
- }
-
-.Button--primary:disabled,
- .Button--primary[aria-disabled='true'] {
- color: var(--color-btn-primary-disabled-text);
- background-color: var(--color-btn-primary-disabled-bg);
- border-color: var(--color-btn-primary-disabled-border);
- fill: var(--color-btn-primary-disabled-text);
- }
-
-/* default (secondary) */
-
-.Button--secondary {
- color: var(--color-btn-text);
- fill: var(--color-fg-muted); /* help this */
- background-color: var(--color-btn-bg);
- border-color: var(--color-btn-border);
- box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-}
-
-.Button--secondary:hover:not(:disabled) {
- background-color: var(--color-btn-hover-bg);
- border-color: var(--color-btn-hover-border);
- }
-
-.Button--secondary:active:not(:disabled) {
- background-color: var(--color-btn-active-bg);
- border-color: var(--color-btn-active-border);
- }
-
-.Button--secondary[aria-pressed='true'] {
- background-color: var(--color-btn-selected-bg);
- box-shadow: var(--color-yattho-shadow-inset);
- }
-
-.Button--secondary:disabled,
- .Button--secondary[aria-disabled='true'] {
- color: var(--color-yattho-fg-disabled);
- background-color: var(--color-btn-bg);
- border-color: var(--color-btn-border);
- fill: var(--color-yattho-fg-disabled);
- }
-
-.Button--invisible {
- color: var(--color-btn-text);
-}
-
-.Button--invisible:hover:not(:disabled) {
- background-color: var(--color-action-list-item-default-hover-bg);
- }
-
-.Button--invisible[aria-pressed='true'],
- .Button--invisible:active:not(:disabled) {
- background-color: var(--color-action-list-item-default-active-bg);
- }
-
-.Button--invisible:disabled,
- .Button--invisible[aria-disabled='true'] {
- color: var(--color-yattho-fg-disabled);
- background-color: var(--color-btn-bg);
- border-color: var(--color-btn-border);
- fill: var(--color-yattho-fg-disabled);
- }
-
-/* if button has no visuals, use link blue for text */
-
-.Button--invisible.Button--invisible-noVisuals .Button-label {
- color: var(--color-accent-fg);
- }
-
-.Button--invisible .Button-visual {
- color: var(--color-fg-muted);
- }
-
-.Button--link {
- color: var(--color-accent-fg);
- fill: var(--color-accent-fg);
- display: inline-block;
- font-size: inherit;
- border: none;
- height: unset;
- padding: 0;
-}
-
-.Button--link:hover:not(:disabled) {
- text-decoration: underline;
- }
-
-.Button--link:focus-visible, .Button--link:focus {
- outline-offset: 2px;
- }
-
-.Button--link:disabled,
- .Button--link[aria-disabled='true'] {
- color: var(--color-yattho-fg-disabled);
- background-color: transparent;
- border-color: transparent;
- fill: var(--color-yattho-fg-disabled);
- }
-
-/* danger */
-
-.Button--danger {
- color: var(--color-btn-danger-text);
- fill: var(--color-btn-danger-icon);
- background-color: var(--color-btn-bg);
- border-color: var(--color-btn-border);
- box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-}
-
-.Button--danger:hover:not(:disabled) {
- color: var(--color-btn-danger-hover-text);
- fill: var(--color-btn-danger-hover-text);
- background-color: var(--color-btn-danger-hover-bg);
- border-color: var(--color-btn-danger-hover-border);
- box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
- }
-
-.Button--danger:active:not(:disabled),
- .Button--danger[aria-pressed='true'] {
- color: var(--color-btn-danger-selected-text);
- fill: var(--color-btn-danger-selected-text);
- background-color: var(--color-btn-danger-selected-bg);
- border-color: var(--color-btn-danger-selected-border);
- box-shadow: var(--color-btn-danger-selected-shadow);
- }
-
-.Button--danger:disabled,
- .Button--danger[aria-disabled='true'] {
- color: var(--color-btn-danger-disabled-text);
- fill: var(--color-btn-danger-disabled-text);
- background-color: var(--color-btn-danger-disabled-bg);
- border-color: var(--color-btn-border);
- }
-
-.Button--iconOnly {
- display: grid;
- place-content: center;
- padding: unset;
- width: var(--yattho-control-medium-size, 32px);
-}
-
-.Button--iconOnly.Button--small {
- width: var(--yattho-control-small-size, 28px);
- }
-
-.Button--iconOnly.Button--large {
- width: var(--yattho-control-large-size, 40px);
- }
+:root{--yattho-duration-fast:80ms;--yattho-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--yattho-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--yattho-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--yattho-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--yattho-control-medium-gap,8px);height:var(--yattho-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--yattho-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--yattho-duration-fast) var(--yattho-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--yattho-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--yattho-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--yattho-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--yattho-text-body-size-small,12px);gap:var(--yattho-control-small-gap,4px);height:var(--yattho-control-small-size,28px);padding:0 var(--yattho-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--yattho-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--yattho-control-small-gap,4px)}.Button--large{gap:var(--yattho-control-large-gap,8px);height:var(--yattho-control-large-size,40px);padding:0 var(--yattho-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--yattho-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--yattho-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-yattho-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-yattho-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-yattho-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-yattho-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-yattho-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-yattho-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-yattho-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--yattho-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--yattho-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--yattho-control-large-size,40px)}
\ No newline at end of file