- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary' disabled='true' icon='add' }} -
-- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' }} -
-- {{> elements-button variant='brand-primary' value='Brand Primary without icon' }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' }} -
-- {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -
diff --git a/source/_patterns/01-elements/buttons/03-button-primary.hbs b/source/_patterns/01-elements/buttons/01-button-primary.hbs similarity index 53% rename from source/_patterns/01-elements/buttons/03-button-primary.hbs rename to source/_patterns/01-elements/buttons/01-button-primary.hbs index d15fd12326b..688461f8d92 100644 --- a/source/_patterns/01-elements/buttons/03-button-primary.hbs +++ b/source/_patterns/01-elements/buttons/01-button-primary.hbs @@ -1,16 +1,16 @@ +{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}- {{> elements-button variant='primary' value='Primary' icon='add' }} - {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' }} + {{> elements-button variant='primary' value='Primary' }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' }}
- {{> elements-button variant='primary' value='Primary with icon' icon-after='add'}} - {{> elements-button variant='primary' value='Primary with icon (disabled)' disabled='true' icon-after='add' }} -
-- {{> elements-button variant='primary' value='Primary without icon' }} - {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} + {{> elements-button variant='primary' value='Primary' icon='add'}} + {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }}
{{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}
++ {{> elements-button variant='primary' title='Check' value='loading' state='loading' }} +
diff --git a/source/_patterns/01-elements/buttons/02-button-secondary.hbs b/source/_patterns/01-elements/buttons/02-button-secondary.hbs new file mode 100644 index 00000000000..940e0913c7d --- /dev/null +++ b/source/_patterns/01-elements/buttons/02-button-secondary.hbs @@ -0,0 +1,15 @@ ++ {{> elements-button variant='secondary' value='Secondary' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }} +
++ {{> elements-button variant='secondary' value='Secondary' icon='add' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }} +
++ {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +
++ {{> elements-button variant='secondary' title='Check' value='loading' state='loading' }} +
diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs new file mode 100644 index 00000000000..fa3ea587ab3 --- /dev/null +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs @@ -0,0 +1,15 @@ ++ {{> elements-button variant='secondary-inverted' value='Secondary inverted' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' }} +
++ {{> elements-button variant='secondary-inverted' value='Secondary inverted' icon='add' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' icon='add' }} +
++ {{> elements-button variant='secondary-inverted' title='Check' value='Secondary inverted displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='secondary-inverted' title='Check' value='Secondary inverted displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +
++ {{> elements-button variant='secondary-inverted' title='Check' value='loading' state='loading' }} +
diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md new file mode 100644 index 00000000000..9f0eb5da20d --- /dev/null +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md @@ -0,0 +1,4 @@ +--- +title: Button secondary inverted +wrap_in: dark-background +--- diff --git a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs b/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs deleted file mode 100644 index 9cdd61403f7..00000000000 --- a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs +++ /dev/null @@ -1,16 +0,0 @@ -- {{> elements-button variant='secondary-outline' value='Secondary Outline' icon='add' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline (disabled)' disabled='true' icon='add' }} -
-- {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon' icon-after='add'}} - {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon (disabled)' disabled='true' icon-after='add' }} -
-- {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon (disabled)' disabled='true' }} -
-- {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -
diff --git a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs b/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs deleted file mode 100644 index 1b46d5832e1..00000000000 --- a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs +++ /dev/null @@ -1,16 +0,0 @@ -- {{> elements-button variant='secondary-solid' value='Secondary' icon='add' }} - {{> elements-button variant='secondary-solid' value='Secondary (disabled)' disabled='true' icon='add' }} -
-- {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon' icon-after='add'}} - {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon (disabled)' disabled='true' icon-after='add' }} -
-- {{> elements-button variant='secondary-solid' value='Secondary Solid without icon' }} - {{> elements-button variant='secondary-solid' value='Secondary Solid without icon (disabled)' disabled='true' }} -
-- {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -
diff --git a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs new file mode 100644 index 00000000000..3dbeeb4e721 --- /dev/null +++ b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs @@ -0,0 +1,15 @@ ++ {{> elements-button variant='tertiary' value='Tertiary' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }} +
++ {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }} +
++ {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +
++ {{> elements-button variant='tertiary' title='Check' value='loading' state='loading' }} +
diff --git a/source/_patterns/01-elements/buttons/06-button-ghost.hbs b/source/_patterns/01-elements/buttons/06-button-ghost.hbs new file mode 100644 index 00000000000..5d244786dcb --- /dev/null +++ b/source/_patterns/01-elements/buttons/06-button-ghost.hbs @@ -0,0 +1,15 @@ ++ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }} +
++ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost' disabled='true' }} +
++ {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +
++ {{> elements-button variant='ghost' title='Check' value='loading' state='loading' }} +
diff --git a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs b/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs deleted file mode 100644 index 2a23210d1a3..00000000000 --- a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs +++ /dev/null @@ -1,16 +0,0 @@ -- {{> elements-button variant='tertiary-plain' value='Tertiary Plain' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain' disabled='true' }} -
-- {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon' icon-after='add'}} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon(disabled)' disabled='true' icon-after='add' }} -
-- {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon (disabled)' disabled='true' }} -
-- {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -
diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index c5f91e9b7e0..5bbeae93d76 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -1,19 +1,15 @@ {{#each sizes }}- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary (disabled)' disabled='true' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' size=size }}
- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' size=size }} + {{> elements-button variant='primary' value='Primary' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}
- {{> elements-button variant='brand-primary' value='Brand Primary without icon' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' size=size }} -
-- {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} - {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }}
{{/each }} diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.json b/source/_patterns/01-elements/buttons/09-button-sizes.json index c6cf94a0701..a3fcaa9c50a 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.json +++ b/source/_patterns/01-elements/buttons/09-button-sizes.json @@ -1,16 +1,28 @@ { "sizes": [ + { + "size": "xxsmall", + "label": "XXSmall" + }, + { + "size": "xsmall", + "label": "XSmall" + }, { "size": "small", "label": "Small" }, { - "size": "regular", - "label": "Regular (default, data-size attribute is optional)" + "size": "medium", + "label": "Medium (default, data-size attribute is optional)" }, { "size": "large", "label": "Large" + }, + { + "size": "xlarge", + "label": "XLarge" } ] } diff --git a/source/_patterns/01-elements/buttons/10-button-width.hbs b/source/_patterns/01-elements/buttons/10-button-width.hbs new file mode 100644 index 00000000000..23fc85a7746 --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.hbs @@ -0,0 +1,12 @@ +{{#each width }} ++ {{> elements-button variant='primary' value='Primary' width=width }} +
++ {{> elements-button variant='primary' value='Primary' icon='add' width=width }} +
++ {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' width=width }} +
+{{/each }} diff --git a/source/_patterns/01-elements/buttons/10-button-width.json b/source/_patterns/01-elements/buttons/10-button-width.json new file mode 100644 index 00000000000..0fed2f689fa --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.json @@ -0,0 +1,8 @@ +{ + "width": [ + { + "width": "full", + "label": "FullWidth" + } + ] +} diff --git a/source/_patterns/01-elements/buttons/10-button-width.md b/source/_patterns/01-elements/buttons/10-button-width.md new file mode 100644 index 00000000000..d55dc03303f --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.md @@ -0,0 +1,4 @@ +--- +title: Button width +wrap_in: full-width-Button +--- diff --git a/source/_patterns/01-elements/buttons/_button.demonstration.scss b/source/_patterns/01-elements/buttons/_button.demonstration.scss new file mode 100644 index 00000000000..54149da406f --- /dev/null +++ b/source/_patterns/01-elements/buttons/_button.demonstration.scss @@ -0,0 +1,5 @@ +.sg-wrapper-full-width-Button { + p { + width: 300px; + } +} diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index d73b322a573..f87d4eb893c 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -5,26 +5,35 @@ $button---color: #fff !default; $button---minHeight: to-rem( - $pxValue: 44 + $pxValue: 40 ) !default; // Background colors -$button-brand-primary--backgroundColor: $db-color-red-500 !default; -$button-brand-primary-hover-backgroundColor: #db0016; +$button-primary--backgroundColor: $db-color-red-500 !default; +$button-primary-hover-backgroundColor: #cf0013 !default; +$button-primary-active-backgroundColor: #b30010 !default; -$button-primary--backgroundColor: $db-color-cool-gray-700 !default; -$button-primary-hover-backgroundColor: #2f3541; +$button-secondaryInverted--backgroundColor: transparent !default; +$button-secondaryInverted-hover-backgroundColor: rgba( + 255, + 255, + 255, + 0.08 +) !default; +$button-secondaryInverted-active-backgroundColor: rgba( + 255, + 255, + 255, + 0.16 +) !default; -$button-secondarySolid--backgroundColor: $db-color-cool-gray-200 !default; -$button-secondarySolid-hover-backgroundColor: #cdd4da !default; -$button-secondarySolid-active-backgroundColor: #c5ccd3 !default; +$button-tertiary--backgroundColor: rgba(0, 0, 0, 0.04) !default; +$button-tertiary-hover-backgroundColor: rgba(0, 0, 0, 0.12) !default; +$button-tertiary-active-backgroundColor: rgba(0, 0, 0, 0.24) !default; -$button-secondaryOutline-hover-backgroundColor: rgba( - $db-color-cool-gray-700, - 0.03 -) !default; +$button-secondary--backgroundColor: transparent !default; +$button-secondary-hover-backgroundColor: rgba(0, 0, 0, 0.12) !default; +$button-secondary-active-backgroundColor: rgba(0, 0, 0, 0.24) !default; -$button-secondaryOutline-active-backgroundColor: rgba( - $db-color-cool-gray-700, - 0.06 -) !default; +$button-ghost-hover-backgroundColor: rgba(0, 0, 0, 0.08) !default; +$button-ghost-active-backgroundColor: rgba(0, 0, 0, 0.16) !default; diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 8bda6c2d8e1..bde22ed9b56 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -9,7 +9,7 @@ state: complete #### SCSS (recommended) -Extend one of the variant placeholders: `%variant-primary`, `%variant-secondary` or `%variant-tertiary` +Extend one of the variant placeholders: `%variant-primary`, `%variant-secondary`, `%variant-secondary-inverted`, `%variant-tertiary` or `%variant-ghost` #### HTML attribute @@ -19,11 +19,21 @@ You could set the different button variants via the `data-variant` attribute. #### SCSS (recommended) -Extend one of the size SCSS placeholders in case that you don't want the default (regular): `%size-Small` or `%size-Large` +Extend one of the size SCSS placeholders in case that you don't want the default (medium): `%size-XSmall`, `%size-Small` or `%size-Large` #### HTML attribute -You could set the different button sizes via the `data-size` attribute, the default is "regular" and in that case is optional. +You could set the different button sizes via the `data-size` attribute, the default is "medium" and in that case is optional. + +### Width + +#### SCSS (recommended) + +Extend the width placeholders in case that you don't want the default (content-length sized): `%width-Full` + +#### HTML attribute + +You could differentiate the button width via the `data-width` attribute, choose value "full" for a button taking the whole containers width; the default is "auto" and in that case is optional. ## Usability diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs index 5bcaebd7be6..79dce364f31 100644 --- a/source/_patterns/01-elements/buttons/button.hbs +++ b/source/_patterns/01-elements/buttons/button.hbs @@ -1,11 +1,14 @@ diff --git a/source/_patterns/01-elements/buttons/button.json b/source/_patterns/01-elements/buttons/button.json index 06a4771b8e7..235f64956d8 100644 --- a/source/_patterns/01-elements/buttons/button.json +++ b/source/_patterns/01-elements/buttons/button.json @@ -1,5 +1,5 @@ { - "variant": "brand-primary", + "variant": "primary", "title": "Done", - "value": "Red 500" + "value": "Button" } diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 5cb869bf840..7f3b4242445 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -5,7 +5,11 @@ .elm-button { border: 1px solid transparent; border-radius: 4px; - padding: to-rem($pxValue: 8) to-rem($pxValue: 16); + padding: to-rem($pxValue: 7) to-rem($pxValue: 16); + + font-weight: 700; + + text-align: center; &[data-icon], &[data-icon-before] { @@ -21,6 +25,10 @@ width: $button---minHeight; } + // Changing background-color on hover should be animated by a transition + transition: background-color + var(--db-transition-color, #{$db-transition-color}); + // Centering the content vertically and horizontally align-items: center; display: inline-flex; @@ -33,155 +41,262 @@ filter: brightness(75%); }*/ - &%variant-brand-primary, - &%variant-primary { + &%variant-primary, + &%variant-secondary-inverted { color: $button---color; } - &%variant-brand-primary, &%variant-primary { - font-weight: 700; - } - - &%variant-brand-primary { - background-color: $button-brand-primary--backgroundColor; + background-color: $button-primary--backgroundColor; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-brand-primary-hover-backgroundColor; + background-color: $button-primary-hover-backgroundColor; } } &:active { - background-color: #cc0013; // TODO: replace by correct color variable + background-color: $button-primary-active-backgroundColor; // TODO: replace by correct color variable } } - &%variant-primary { - background-color: $button-primary--backgroundColor; + &%variant-secondary-inverted { + background-color: $button-secondaryInverted--backgroundColor; + border-color: #fff; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-primary-hover-backgroundColor; + background-color: $button-secondaryInverted-hover-backgroundColor; } } &:active { - background-color: #363c4a; + background-color: $button-secondaryInverted-active-backgroundColor; } } - &%variant-secondaryOutline { - background-color: transparent; + &%variant-secondary { + background-color: $button-secondary--backgroundColor; border-color: $db-color-cool-gray-700; color: $db-color-cool-gray-700; - // TODO: This might get replaced by another effect - backdrop-filter: blur(4px); - &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $button-secondary-hover-backgroundColor; } } - &:disabled { - background-color: transparent; - color: $db-color-cool-gray-700; - } &:active { - background-color: $button-secondaryOutline-active-backgroundColor; + background-color: $button-secondary-active-backgroundColor; } } - &%variant-secondarySolid { - color: $db-color-cool-gray-700; - background-color: $button-secondarySolid--backgroundColor; + &%variant-tertiary { + // TODO: replace by the correct variable afterwards + color: #0e1013; + background-color: $button-tertiary--backgroundColor; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondarySolid-hover-backgroundColor; + background-color: $button-tertiary-hover-backgroundColor; } } &:active { - background-color: $button-secondarySolid-active-backgroundColor; + background-color: $button-tertiary-active-backgroundColor; } } - &%variant-tertiaryPlain { + &%variant-ghost { color: $db-color-cool-gray-700; border: 2px solid transparent; background-color: transparent; // shame.css &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $button-ghost-hover-backgroundColor; } } - &:disabled { - background-color: transparent; // shame.css - } &:active { - background-color: $button-secondaryOutline-active-backgroundColor; + background-color: $button-ghost-active-backgroundColor; } } // Sizes + &%size-XXSmall { + $height: 20; + // $icon-size: 16; + // TODO: remove this dirty hack after we've got the correct 16px icons + $icon-size: 20; + + min-height: to-rem($pxValue: $height); + padding: to-rem($pxValue: 1) to-rem($pxValue: 4); + + &:not(.is-icon-text-replace) { + font-size: to-rem($pxValue: 12); + } + &[data-icon], + &[data-icon-before] { + @include iconMeta($icon-size); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:before { + font-size: to-rem($pxValue: 16); + } + } + &[data-icon-after] { + @include iconMeta($size: $icon-size, $position: "after"); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:after { + font-size: to-rem($pxValue: 16); + } + } + // Square icon only buttons + &.is-icon-text-replace { + width: to-rem($pxValue: $height); + } + } + &%size-XSmall { + $height: 24; + // $icon-size: 16; + // TODO: replace this dirty hack after we've got the correct 16px icons / replace 20 by 16 + $icon-size: 20; + + min-height: to-rem($pxValue: $height); + padding: to-rem($pxValue: 3) to-rem($pxValue: 8); + + &:not(.is-icon-text-replace) { + font-size: to-rem($pxValue: 12); + } + &[data-icon], + &[data-icon-before] { + @include iconMeta($icon-size); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:before { + font-size: to-rem($pxValue: 16); + } + } + &[data-icon-after] { + @include iconMeta($size: $icon-size, $position: "after"); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:after { + font-size: to-rem($pxValue: 16); + } + } + // Square icon only buttons + &.is-icon-text-replace { + width: to-rem($pxValue: $height); + } + } &%size-Small { - min-height: to-rem($pxValue: 36); + $height: 32; + // $icon-size: 16; + // TODO: replace this dirty hack after we've got the correct 16px icons / replace 20 by 16 + $icon-size: 20; + + min-height: to-rem($pxValue: $height); + padding: to-rem($pxValue: 6) to-rem($pxValue: 12); + &:not(.is-icon-text-replace) { font-size: to-rem($pxValue: 14); } &[data-icon], &[data-icon-before] { - @include iconMeta(20); + @include iconMeta($icon-size); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:before { + font-size: to-rem($pxValue: 16); + } } &[data-icon-after] { - @include iconMeta($size: 20, $position: "after"); + @include iconMeta($size: $icon-size, $position: "after"); + // TODO: remove this dirty hack after we've got the correct 16px icons + &:after { + font-size: to-rem($pxValue: 16); + } } // Square icon only buttons &.is-icon-text-replace { - width: to-rem($pxValue: 36); + width: to-rem($pxValue: $height); } } &%size-Large { - min-height: to-rem($pxValue: 52); - &:not(.is-icon-text-replace) { - font-size: to-rem($pxValue: 20); + $height: 48; + + min-height: to-rem($pxValue: $height); + padding: to-rem($pxValue: 12) to-rem($pxValue: 24); + // Square icon only buttons + &.is-icon-text-replace { + width: to-rem($pxValue: $height); } + } + &%size-XLarge { + $height: 64; + + min-height: to-rem($pxValue: $height); + padding: to-rem($pxValue: 20) to-rem($pxValue: 24); // Square icon only buttons &.is-icon-text-replace { - width: to-rem($pxValue: 52); + width: to-rem($pxValue: $height); } } + &[data-size="xsmall"] { + @extend %size-XSmall; + } + &[data-size="xxsmall"] { + @extend %size-XXSmall; + } &[data-size="small"] { @extend %size-Small; } &[data-size="large"] { @extend %size-Large; } + &[data-size="xlarge"] { + @extend %size-XLarge; + } - // Providing the variants as HTML attributes as well - &[data-variant="brand-primary"] { - @extend %variant-brand-primary; + // Width + &%width-Full { + width: 100%; + } + + &[data-width="full"] { + @extend %width-Full; } + + // Providing the variants as HTML attributes as well &[data-variant="primary"] { @extend %variant-primary; } - &[data-variant="secondary-outline"] { - @extend %variant-secondaryOutline; + &[data-variant="secondary-inverted"] { + @extend %variant-secondary-inverted; + } + &[data-variant="secondary"] { + @extend %variant-secondary; } - &[data-variant="secondary-solid"] { - @extend %variant-secondarySolid; + &[data-variant="tertiary"] { + @extend %variant-tertiary; } - &[data-variant="tertiary-plain"] { - @extend %variant-tertiaryPlain; + &[data-variant="ghost"] { + @extend %variant-ghost; } &:disabled { - background-color: $db-color-cool-gray-200; - color: $db-color-cool-gray-700; - opacity: 0.5; + opacity: 0.25; + } + + // States (currently only "loading") + &[data-state="loading"] { + @include is-icon-text-replace(); + + &::before { + content: " "; + } + } + + // Including a loading indicator + --loadingIndicator---color: currentColor; + &[data-state="loading"] { + font-size: 0; } } diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss index e28d3ba696c..ca32d005048 100644 --- a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss +++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss @@ -28,7 +28,7 @@ } .elm-loadingindicator { - color: $db-color-red-500; + color: var(--loadingIndicator---color, #{$db-color-red-500}); animation: loadingindicator-rotate 3s linear infinite; @include loadingindicator--sizes("elm-"); diff --git a/source/_patterns/02-components/dialog/dialog.hbs b/source/_patterns/02-components/dialog/dialog.hbs index 150a5c7dd54..9425f1bfcfe 100644 --- a/source/_patterns/02-components/dialog/dialog.hbs +++ b/source/_patterns/02-components/dialog/dialog.hbs @@ -11,6 +11,6 @@