mirror of
https://github.com/penpot/penpot.git
synced 2025-04-09 21:41:23 -05:00
🐛 Fix problem with focus styles
This commit is contained in:
alonso.torres
parent
f855f9c46d
commit
89a09091db
4 changed files with 63 additions and 77 deletions
|
|
@ -37,6 +37,7 @@
|
|||
.button-primary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusPrimary;
|
||||
background-color: var(--button-primary-background-color-rest);
|
||||
border: $s-1 solid var(--button-primary-border-color-rest);
|
||||
color: var(--button-primary-foreground-color-rest);
|
||||
|
|
@ -54,17 +55,6 @@
|
|||
stroke: var(--button-primary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
background-color: var(--button-primary-background-color-focus);
|
||||
border: $s-1 solid var(--button-primary-border-color-focus);
|
||||
color: var(--button-primary-foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-primary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--button-primary-background-color-active);
|
||||
border: $s-1 solid var(--button-primary-border-color-active);
|
||||
|
|
@ -86,6 +76,7 @@
|
|||
.button-secondary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusSecondary;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
border: $s-1 solid var(--button-secondary-border-color-rest);
|
||||
|
|
@ -104,17 +95,6 @@
|
|||
stroke: var(--button-secondary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
background-color: var(--button-secondary-background-color-focus);
|
||||
border: $s-1 solid var(--button-secondary-border-color-focus);
|
||||
color: var(--button-secondary-foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-secondary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
background-color: var(--button-secondary-background-color-active);
|
||||
|
|
@ -136,6 +116,7 @@
|
|||
.button-tertiary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusTertiary;
|
||||
border-radius: $br-8;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
background-color: transparent;
|
||||
|
|
@ -153,17 +134,6 @@
|
|||
stroke: var(--button-tertiary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--button-tertiary-border-color-focus);
|
||||
background-color: var(--button-tertiary-background-color-focus);
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-tertiary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
border: $s-1 solid transparent;
|
||||
|
|
@ -185,6 +155,7 @@
|
|||
.button-radio {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusRadio;
|
||||
border-radius: $br-8;
|
||||
color: var(--button-radio-foreground-color-rest);
|
||||
border: $s-1 solid var(--button-radio-background-color-rest);
|
||||
|
|
@ -201,17 +172,6 @@
|
|||
stroke: var(--button-radio-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--button-radio-border-color-focus);
|
||||
background-color: var(--button-radio-background-color-focus);
|
||||
color: var(--button-radio-foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-radio-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
border: $s-1 solid transparent;
|
||||
|
|
@ -244,27 +204,16 @@
|
|||
.button-tag {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focus;
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--button-border-focus);
|
||||
background-color: var(--button-background-focus);
|
||||
svg {
|
||||
stroke: var(--button-foreground-focus);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
|
|
@ -291,8 +240,7 @@
|
|||
background-color: var(--button-constraint-background-color-rest);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:hover {
|
||||
outline: $s-4 solid var(--button-constraint-border-color-hover);
|
||||
background-color: var(--button-constraint-background-color-hover);
|
||||
}
|
||||
|
|
@ -304,6 +252,7 @@
|
|||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
// @include focusInput;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
|
@ -311,11 +260,6 @@
|
|||
padding: 0 0 0 $s-6;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
&:focus-within,
|
||||
&:active {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -342,6 +286,7 @@
|
|||
|
||||
.input-element {
|
||||
@include titleTipography;
|
||||
@include focusInput;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
|
|
@ -373,15 +318,6 @@
|
|||
}
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:active {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
|
|
@ -459,8 +395,7 @@
|
|||
padding: $s-8 $s-12;
|
||||
background-color: var(--assets-item-background-color);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,5 @@
|
|||
@import "common/refactor/shadows.scss";
|
||||
@import "common/refactor/z-index.scss";
|
||||
@import "common/refactor/mixins.scss";
|
||||
@import "common/refactor/focus.scss";
|
||||
@import "common/refactor/basic-rules.scss";
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
// BUTTONS
|
||||
|
||||
--button-foreground-hover: var(--color-accent-primary);
|
||||
--button-background-focus: var(--color-background-secondary);
|
||||
--button-foreground-focus: var(--color-foreground-primary);
|
||||
--button-border-focus: var(--color-accent-primary);
|
||||
--button-background-color-focus: var(--color-background-secondary);
|
||||
--button-foreground-color-focus: var(--color-foreground-primary);
|
||||
--button-border-color-focus: var(--color-accent-primary);
|
||||
--button-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--button-background-color-disabled: var(--color-background-primary);
|
||||
--button-border-color-disabled: var(--color-background-quaternary);
|
||||
|
|
|
|||
50
frontend/resources/styles/common/refactor/focus.scss
Normal file
50
frontend/resources/styles/common/refactor/focus.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@mixin focusType($type) {
|
||||
$realType: "";
|
||||
@if $type {
|
||||
$realType: $type + "-";
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
background-color: var(--button-#{$realType}background-color-focus);
|
||||
border: $s-1 solid var(--button-#{$realType}border-color-focus);
|
||||
color: var(--button-#{$realType}foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-#{$realType}foreground-color-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focusPrimary {
|
||||
@include focusType(primary);
|
||||
}
|
||||
|
||||
@mixin focusSecondary {
|
||||
@include focusType(secondary);
|
||||
}
|
||||
|
||||
@mixin focusTertiary {
|
||||
@include focusType(tertiary);
|
||||
}
|
||||
|
||||
@mixin focusRadio {
|
||||
@include focusType(radio);
|
||||
}
|
||||
|
||||
@mixin focus {
|
||||
@include focusType(null);
|
||||
}
|
||||
|
||||
@mixin focusInput {
|
||||
&:focus-within {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue