DONE
Buttons allow users to do something on the page.
COTUI - Component Reference
https://cityoftoronto.github.io/COT_UI/?path=/story/2-components-button--all-buttons
Types of buttons:
- Default
- Primary
- Cancel/Destructive
Button CSS
CSS Variables
Note: the values may change overtime, for latest values refer to Design Tokens (CSS Variables)
--font-size-default : 14px;
--color-focus: #E77600;
--border-radius : 4px;
--color-text-white : #ffffff
--color-primary-light: #337ab7;
--color-primary: #165788;
--color-primary-dark: #{$base};
--color-default: #6e787c;
--color-default-dark: #596063;
--color-cancel: #88161f;
--color-cancel-dark: #6e1219;
All Buttons
.button
display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background: transparent; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: var(--font-size-default); line-height: 1.42857143; border-radius: var(--border-radius); user-select:none; @extend %focus;
Default Button
.button--default
border: 1px solid var(--color-default);
background-color: var(--color-white);
color: var(--color-default);
&:hover:hover{
border-color: var(--color-default);
background-color: var(--color-default);
color: var(--color-text-white);
}
&:active, &[aria-pressed="true"]{
@extend %pressed;
background-color: var(--color-default-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:focus{
border: 3px solid var(--color-focus);
background: var(--color-focus);
color: var(--color-text-white);
&:hover{
background: initial;
}
}
Primary Button
.button--primary
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-white);
&[aria-pressed="true"]{
background-color: var(--color-primary-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:hover:hover, &:active{
background-color: var(--color-primary-light);
border-color: var(--color-primary-light);
}
Cancel Button
.button--cancel
background-color: var(--color-white);
border-color: var(--color-cancel);
color: var(--color-cancel);
&[aria-pressed="true"]{
background-color: var(--color-cancel-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:hover:hover, &:active{
border-color: var(--color-cancel);
background-color: var(--color-cancel);
color: var(--color-text-white);
}