Skip to content

Commit

Permalink
feat(button): add fluent styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juveniel
Juveniel committed Jul 22, 2022
1 parent c9e0679 commit 08f217f
Show file tree
Hide file tree
Showing 4 changed files with 1,076 additions and 28 deletions.
206 changes: 202 additions & 4 deletions packages/fluent/scss/button/_layout.scss
View file
@@ -1,14 +1,64 @@
@use "../core" as *;
@use "_variables.scss" as *;

@mixin kendo-button--layout() {

// Button
.k-button {
display: inline-flex;
padding-inline: var( --INTERNAL--kendo-button-padding-x, 0);
padding-block: var( --INTERNAL--kendo-button-padding-y, 0);
border-width: var( --INTERNAL--kendo-button-border-width, 1px );
@include border-radius( var( --kendo-button-border-radius, #{$kendo-button-border-radius} ) );
padding-inline: var( --INTERNAL--kendo-button-padding-x, 0 );
padding-block: var( --INTERNAL--kendo-button-padding-y, 0 );
border-width: var( --kendo-button-border-width, #{$kendo-button-border-width} );
border-style: solid;
box-sizing: border-box;
font-family: var( --kendo-button-font-family, #{$kendo-button-font-family} );
font-size: var( --INTERNAL--kendo-button-font-size, 1rem );
font-weight: var( --kendo-button-font-weight, #{$kendo-button-font-weight} );
line-height: var( --INTERNAL--kendo-button-line-height, normal );
text-align: center;
white-space: nowrap;
text-decoration: none;
vertical-align: middle;
display: inline-flex;
justify-content: center;
align-items: center;
gap: var( --kendo-button-spacing, #{$kendo-button-spacing} );
position: relative;
cursor: pointer;
color: inherit;
background: none;
outline: none;
user-select: none;
-webkit-appearance: none;

*,
*::before,
*::after {
box-sizing: border-box;
}

&::-moz-focus-inner {
padding: 0;
outline: 0;
border: 0;
}

&:hover,
&:focus {
outline: 0;
text-decoration: none;
}

&:focus-visible::after,
&.k-focus::after {
content: "";
position: absolute;
border: medium none;
inset: var( --kendo-button-focus-offset, #{$kendo-button-focus-offset} );
outline-width: var( --kendo-button-focus-outline-width, #{$kendo-button-focus-outline-width} );
outline-style: var( --kendo-button-focus-outline-style, #{$kendo-button-focus-outline-style} );
z-index: 1;
}
}


Expand All @@ -19,12 +69,160 @@
$_font-size: map-get( $size-props, font-size );
$_line-height: map-get( $size-props, line-height );

$_icon-button-padding: calc( $_padding-x / 2 );

.k-button-#{$size} {
--INTERNAL--kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );
--INTERNAL--kendo-button-padding-y: var( --kendo-button-#{$size}-padding-y, #{$_padding-y} );
--INTERNAL--kendo-button-font-size: var( --kendo-button-#{$size}-font-size, #{$_font-size} );
--INTERNAL--kendo-button-line-height: var( --kendo-button-#{$size}-line-height, #{$_line-height} );
}

.k-icon-button.k-button-#{$size} {
--INTERNAL--kendo-button-padding-x: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
--INTERNAL--kendo-button-padding-y: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );

> .k-button-icon {
min-width: calc( #{$_font-size} * #{$_line-height} );
min-height: calc( #{$_font-size} * #{$_line-height} );
}
}
}

// Icon Button
.k-icon-button {
gap: 0;

.k-icon {
display: inline-flex;
}
}


// Content
.k-button-icon {
align-self: center;
position: relative;
color: inherit;
}


// Flat button
.k-button-flat {
color: inherit;
border-color: transparent !important; // sass-lint:disable-line no-important
box-shadow: none;

&:focus-visible::after,
&.k-focus::after {
@include border-radius( inherit );
inset: var( --kendo-button-flat-focus-offset, #{$kendo-button-flat-focus-offset} );
outline-width: var( --kendo-button-flat-focus-outline-width, #{$kendo-button-flat-focus-outline-width} );
}
}


// Outline button
.k-button-outline {
color: inherit;
border-color: currentColor;
background: none;
}

// Link button
.k-button-link {
border-color: transparent !important; // sass-lint:disable-line no-important
text-decoration: none;
background: none;

&:focus-visible::after,
&.k-focus::after {
@include border-radius( inherit );
inset: var( --kendo-button-link-focus-offset, #{$kendo-button-link-focus-offset} );
outline-width: var( --kendo-button-link-focus-outline-width, #{$kendo-button-link-focus-outline-width} );
}

&:hover,
&.k-hover,
&:focus,
&.k-focus {
text-decoration: underline;
}
}


// Clear button
.k-button-clear {
border-color: transparent !important; // sass-lint:disable-line no-important
color: inherit;
background: none;

&:focus-visible::after,
&.k-focus::after {
inset: auto;
outline-width: 0;
}
}


// Button group
.k-button-group {
margin: 0;
padding: 0;
border-width: 0;
box-sizing: border-box;
list-style: none;
outline: 0;
display: inline-flex;
flex-flow: row nowrap;
vertical-align: middle;
position: relative;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;

> .k-button + .k-button {
margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
}

> .k-button:hover,
> .k-button.k-hover,
> .k-button:focus,
> .k-button.k-focus,
> .k-button:active,
> .k-button.k-active,
> .k-button.k-selected {
z-index: 2;
}

.k-button:not(:first-child):not(:last-child) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
> .k-button:first-child:not(:only-child) {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
> .k-button:last-child:not(:only-child) {
border-start-start-radius: 0;
border-end-start-radius: 0;
}

&:disabled,
&[disabled],
&.k-disabled {
opacity: 1;
filter: none;
}
}

.k-button-group-stretched {
width: 100%;

> * {
flex: 1 0 0%;
overflow: hidden;
}
}
}
104 changes: 96 additions & 8 deletions packages/fluent/scss/button/_theme.scss
View file
@@ -1,22 +1,110 @@
@use "../core/mixins" as *;
@use "_variables.scss" as *;

@mixin kendo-button--theme() {

.k-button {
outline: var( --INTERNAL--kendo-button-outline, none );
--INTERNAL--kendo-button-text: var( --kendo-button-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-border );
--INTERNAL--kendo-button-gradient: var( --kendo-button-gradient );
--INTERNAL--kendo-button-shadow: var( --kendo-button-shadow );

border-color: var( --INTERNAL--kendo-button-border, initial );
color: var( --INTERNAL--kendo-button-text, initial );
background-color: var( --INTERNAL--kendo-button-bg, initial );
background-image: linear-gradient( var( --INTERNAL--kendo-button-gradient, transparent, transparent ) );
background-image: linear-gradient(
var( --INTERNAL--kendo-button-gradient, transparent, transparent )
);
box-shadow: var( --INTERNAL--kendo-button-shadow, none );
}

.k-button-solid-primary {
--INTERNAL--kendo-button-bg: var(--kendo-button-solid-primary-bg, #{$kendo-button-solid-primary-bg});

&:hover,
&.k-hover {
--INTERNAL--kendo-button-bg: var(--kendo-button-solid-primary-hover-bg, #{$kendo-button-solid-primary-hover-bg});
--INTERNAL--kendo-button-text: var( --kendo-button-hover-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-hover-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-hover-border );
}

&:focus-visible,
&.k-focus {
--INTERNAL--kendo-button-text: var( --kendo-button-focus-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-focus-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-focus-border );
}
&:focus-visible::after,
&.k-focus::after {
outline-color: var( --kendo-button-focus-outline, initial );
}

&:active,
&.k-active {
--INTERNAL--kendo-button-text: var( --kendo-button-active-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-active-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-active-border );
}

&.k-selected {
--INTERNAL--kendo-button-text: var( --kendo-button-selected-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-selected-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-selected-border );
}

&:disabled,
&.k-disabled {
--INTERNAL--kendo-button-text: var( --kendo-button-disabled-text );
--INTERNAL--kendo-button-bg: var( --kendo-button-disabled-bg );
--INTERNAL--kendo-button-border: var( --kendo-button-disabled-border );
}
}

@each $fill-mode, $theme-colors in $kendo-button-theme-colors {
@each $theme-color, $color-props in $theme-colors {
$_text-color: map-get( $color-props, text );
$_bg: map-get( $color-props, bg );
$_border-color: map-get( $color-props, border );

$_focus-text: map-get( $color-props, focus-text );
$_focus-bg: map-get( $color-props, focus-bg );
$_focus-border: map-get( $color-props, focus-border );
$_focus-outline: map-get( $color-props, focus-outline );

$_hover-text: map-get( $color-props, hover-text );
$_hover-bg: map-get( $color-props, hover-bg );
$_hover-border: map-get( $color-props, hover-border );

$_active-text: map-get( $color-props, active-text );
$_active-bg: map-get( $color-props, active-bg );
$_active-border: map-get( $color-props, active-border );

$_disabled-text: map-get( $color-props, disabled-text );
$_disabled-bg: map-get( $color-props, disabled-bg );
$_disabled-border: map-get( $color-props, disabled-border );

.k-button-#{$fill-mode}-#{$theme-color} {
--kendo-button-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
--kendo-button-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
--kendo-button-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );

--kendo-button-hover-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-text, #{$_hover-text} );
--kendo-button-hover-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-bg, #{$_hover-bg} );
--kendo-button-hover-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-border, #{$_hover-border} );

--kendo-button-focus-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
--kendo-button-focus-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
--kendo-button-focus-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
--kendo-button-focus-outline: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );

--kendo-button-active-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-text, #{$_active-text} );
--kendo-button-active-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-bg, #{$_active-bg} );
--kendo-button-active-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-border, #{$_active-border} );

--kendo-button-selected-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
--kendo-button-selected-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
--kendo-button-selected-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );

--kendo-button-disabled-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
--kendo-button-disabled-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
--kendo-button-disabled-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
}
}
}

Expand Down

0 comments on commit 08f217f

Please sign in to comment.