ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(button): reduce to minimal css

Browse source
This commit is contained in:
Thomas Allmer 2019-07-25 15:06:41 +02:00 committed by Mikhail Bashkirov
parent f478b988f8
commit d4299dec71
1 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/button/src/LionButton.js
View file

@ -48,22 +48,20 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
display: inline-block; display: inline-block;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */ min-height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
outline: 0; outline: 0;
background-color: transparent; background-color: transparent;
box-sizing: border-box; box-sizing: border-box;
} }
.btn { .btn {
height: 24px; min-height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
border: 1px solid black; background: #eee; /* minimal styling to make it recognizable as btn */
border-radius: 8px;
background: whitesmoke;
color: black;
padding: 7px 15px; padding: 7px 15px;
outline: none; /* focus style handled below, else it follows boundaries of click-area */
} }
:host .btn ::slotted(button) { :host .btn ::slotted(button) {
@ -81,27 +79,20 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
padding: 0; padding: 0;
} }
:host(:focus) {
outline: none;
}
:host(:focus) .btn { :host(:focus) .btn {
border-color: lightblue; /* if you extend, please overwrite */
box-shadow: 0 0 8px lightblue, 0 0 0 1px lightblue; outline: 2px solid #bde4ff;
} }
:host(:hover) .btn { :host(:hover) .btn {
background: black; /* if you extend, please overwrite */
color: whitesmoke; background: #f4f6f7;
}
:host(:hover) .btn ::slotted(lion-icon) {
fill: whitesmoke;
} }
:host(:active) .btn, :host(:active) .btn,
.btn[active] { .btn[active] {
background: grey; /* if you extend, please overwrite */
background: gray;
} }
:host([disabled]) { :host([disabled]) {
@ -109,10 +100,10 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
} }
:host([disabled]) .btn { :host([disabled]) .btn {
/* if you extend, please overwrite */
background: lightgray; background: lightgray;
color: gray; color: #adadad;
fill: gray; fill: #adadad;
border-color: gray;
} }
`, `,
]; ];