418 lines
12 KiB
SCSS
418 lines
12 KiB
SCSS
/*
|
|
* Copyright (C) 2014 - present Instructure, Inc.
|
|
*
|
|
* This file is part of Canvas.
|
|
*
|
|
* Canvas is free software: you can redistribute it and/or modify it under
|
|
* the terms of the GNU Affero General Public License as published by the Free
|
|
* Software Foundation, version 3 of the License.
|
|
*
|
|
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
|
|
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
|
|
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
|
* details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License along
|
|
* with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Base styles
|
|
// --------------------------------------------------
|
|
|
|
// Core
|
|
|
|
/*
|
|
@styleguide Buttons
|
|
|
|
## The Basic Button
|
|
|
|
```html
|
|
<button class="Button" type="button">My Awesome Button</button>
|
|
```
|
|
## Button Styles
|
|
|
|
By adding on a modifier class, you can get the style of the button you need.
|
|
|
|
<table class="ic-Table">
|
|
<thead>
|
|
<th>Class</th>
|
|
<th>Normal State</th>
|
|
<th>Active State</th>
|
|
<th>Disabled State</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>default</td>
|
|
<td><button class="Button" type="button">.Button</button></td>
|
|
<td><button class="Button Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--primary</td>
|
|
<td><button class="Button Button--primary" type="button">.Button--primary</button></td>
|
|
<td><button class="Button Button--primary Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--primary" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--secondary</td>
|
|
<td><button class="Button Button--secondary" type="button">.Button--secondary</button></td>
|
|
<td><button class="Button Button--secondary Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--secondary" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--success</td>
|
|
<td><button class="Button Button--success" type="button">.Button--success</button></td>
|
|
<td><button class="Button Button--success Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--success" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--warning</td>
|
|
<td><button class="Button Button--warning" type="button">.Button--warning</button></td>
|
|
<td><button class="Button Button--warning Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--warning" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--danger</td>
|
|
<td><button class="Button Button--danger" type="button">.Button--danger</button></td>
|
|
<td><button class="Button Button--danger Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--danger" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--link</td>
|
|
<td><button class="Button Button--link" type="button">.Button--link</button></td>
|
|
<td><button class="Button Button--link Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
|
<td><button class="Button Button--link" type="button" disabled>&[disabled]</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button--icon-action</td>
|
|
<td><button class="Button Button--icon-action" type="button"><i class="icon-edit"></i></button></td>
|
|
<td><button class="Button Button--icon-action Button--active" type="button" style="pointer-events: none"><i class="icon-trash"></i></button></td>
|
|
<td><button class="Button Button--icon-action" type="button" disabled><i class="icon-x"></i></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
```html
|
|
<button class="Button Button--primary" type="button">Hey, I have a blue button!</button>
|
|
```
|
|
|
|
## Button Sizes
|
|
|
|
If you need to change a button's size, you can do so by adding the appropriate class
|
|
|
|
<table class="ic-Table">
|
|
<thead>
|
|
<th>Class</th>
|
|
<th>Size</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>default</td>
|
|
<td><button class="Button" type="button">Default</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button.Button--large</td>
|
|
<td><button class="Button Button--large" type="button">Large</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button.Button--small</td>
|
|
<td><button class="Button Button--small" type="button">Small</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>.Button.Button--mini</td>
|
|
<td><button class="Button Button--mini" type="button">Mini</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
*/
|
|
|
|
.btn, // <-- deprecated- do not use
|
|
.Button {
|
|
@include canvas-button($ic-color-medium-light, $ic-color-dark, true);
|
|
border-radius: $baseBorderRadius;
|
|
transition: background-color 0.2s ease-in-out;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 8px 14px;
|
|
margin-bottom: 0; // For input.btn
|
|
@include fontSize($ic-font-size--small);
|
|
line-height: $baseLineHeight;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
text-shadow: none;
|
|
user-select: none;
|
|
|
|
&:focus {
|
|
text-decoration: none;
|
|
outline: none;
|
|
@if not $use_high_contrast { outline: none; }
|
|
}
|
|
|
|
&:hover { text-decoration: none; }
|
|
|
|
&.disabled, &[disabled] {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
// Large
|
|
.btn-large, // <-- deprecated- do not use
|
|
.Button--large {
|
|
padding: $paddingLarge;
|
|
@include fontSize($ic-font-size--medium);
|
|
border-radius: $borderRadiusLarge;
|
|
|
|
[class^="icon-"], [class*=" icon-"] { margin-top: 2px; }
|
|
|
|
}
|
|
|
|
|
|
// Small
|
|
.btn-small, // <-- deprecated- do not use
|
|
.Button--small {
|
|
padding: $paddingSmall;
|
|
@include fontSize($ic-font-size--xsmall);
|
|
[class^="icon-"], [class*=" icon-"] { margin-top: 0; }
|
|
}
|
|
|
|
|
|
// Mini
|
|
.btn-mini, // <-- deprecated- do not use
|
|
.Button--mini {
|
|
padding: $paddingMini;
|
|
@include fontSize(10px);
|
|
border-radius: $borderRadiusSmall;
|
|
}
|
|
|
|
|
|
// Block button
|
|
// -------------------------
|
|
|
|
.btn-block, // <-- deprecated- do not use
|
|
.Button--block {
|
|
display: block;
|
|
width: 100%;
|
|
padding-#{direction(left)}: 0;
|
|
padding-#{direction(right)}: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Vertically space out stacked block buttons
|
|
.btn-block + .btn-block, .Button--block + .Button--block { margin-top: 6px; }
|
|
|
|
// Specificity overrides
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
input[type="button"] {
|
|
&.btn-block, &.Button--block { width: 100%; }
|
|
}
|
|
|
|
// The colors for these come from app/stylesheets/brandable_variables.json
|
|
// Or the values the account sets in the Theme Editor
|
|
|
|
// Primary appears as blue
|
|
.btn-primary, // <-- deprecated- do not use
|
|
.Button--primary {
|
|
@if $use_high_contrast {
|
|
@include canvas-button(#0770A3, $ic-color-light);
|
|
} @else {
|
|
@include canvas-button(
|
|
var(--ic-brand-button--primary-bgd),
|
|
var(--ic-brand-button--primary-text),
|
|
false,
|
|
var(--ic-brand-button--primary-bgd-darkened-5),
|
|
var(--ic-brand-button--primary-bgd-darkened-15)
|
|
);
|
|
}
|
|
}
|
|
// Warning appears as orange
|
|
.btn-warning, // <-- deprecated- do not use
|
|
.Button--warning {
|
|
@include canvas-button($ic-color-alert, $ic-color-light);
|
|
}
|
|
// Danger and error appear as red
|
|
.btn-danger, // <-- deprecated- do not use
|
|
.Button--danger {
|
|
@include canvas-button($ic-color-danger, $ic-color-light);
|
|
}
|
|
// Success appears as green
|
|
.btn-success, // <-- deprecated- do not use
|
|
.Button--success {
|
|
@include canvas-button($ic-color-success, $ic-color-light);
|
|
}
|
|
// Info appears as a neutral blue
|
|
.btn-info, // <-- deprecated- do not use
|
|
.Button--secondary {
|
|
@if $use_high_contrast {
|
|
@include canvas-button($ic-color-dark, $ic-color-light);
|
|
} @else {
|
|
@include canvas-button(
|
|
var(--ic-brand-button--secondary-bgd),
|
|
var(--ic-brand-button--secondary-text),
|
|
false,
|
|
var(--ic-brand-button--secondary-bgd-darkened-5),
|
|
var(--ic-brand-button--secondary-bgd-darkened-15)
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
// Link buttons
|
|
// --------------------------------------------------
|
|
|
|
// Make a button look and behave like a link
|
|
|
|
.btn-link, .btn-link:active, .btn-link[disabled], // <-- deprecated - do not use
|
|
.Button--link, .Button--link:active, .Button--link[disabled] {
|
|
background: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-link, // <-- deprecated- do not use
|
|
.Button--link {
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
color: var(--ic-link-color);
|
|
|
|
@if $use_high_contrast {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
body.Underline-All-Links__enabled & {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--ic-link-color-darkened-10);
|
|
text-decoration: underline;
|
|
background: transparent;
|
|
|
|
@if $use_high_contrast {
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.Underline-All-Links__enabled & {
|
|
text-decoration: none;
|
|
}
|
|
&:focus { color: var(--ic-link-color); }
|
|
}
|
|
|
|
&:focus { color: var(--ic-link-color); }
|
|
|
|
&.active, &.Button--active, &:active {
|
|
background: rgba($ic-color-dark, 0.05);
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
color: var(--ic-link-color);
|
|
}
|
|
|
|
&.disabled, &[disabled] {
|
|
color: $textColor;
|
|
background: transparent;
|
|
}
|
|
|
|
i[class*=icon-], i[class^=icon-] {
|
|
margin-#{direction(right)}: 3px;
|
|
}
|
|
}
|
|
|
|
.Button--link--has-divider {
|
|
display: block;
|
|
text-align: direction(left);
|
|
border-bottom: 1px solid $ic-border-color;
|
|
color: $ic-color-dark;
|
|
padding: $ic-sp;
|
|
}
|
|
|
|
// Icon "action" buttons
|
|
// --------------------------------------------------
|
|
|
|
// Like link buttons, but containing only an icon, which appears in dark gray
|
|
// Usually used to perform user actions like closing, editing, etc.
|
|
|
|
.Button--icon-action {
|
|
transition: color 0.2s;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
color: $ic-icon-link-color;
|
|
outline: none;
|
|
&:hover, &:focus {
|
|
background: transparent;
|
|
color: $ic-icon-link-color-hover;
|
|
}
|
|
&:focus {
|
|
@include button-focus-light;
|
|
}
|
|
&.active, &.Button--active, &:active {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
color: var(--ic-link-color);
|
|
}
|
|
}
|
|
|
|
// Same as .Button--icon-action, but white for dark backgrounds
|
|
.Button--icon-action-rev {
|
|
@extend .Button--icon-action;
|
|
color: $ic-color-light;
|
|
&:hover, &:focus { color: $ic-color-light; }
|
|
&:focus { @include button-focus-dark; }
|
|
}
|
|
|
|
|
|
.ui-button {
|
|
position: relative;
|
|
@extend .Button;
|
|
&.ui-state-hover { @extend .Button:hover }
|
|
&.ui-state-focus { @extend .Button:focus }
|
|
&.ui-state-active {
|
|
@extend .Button--active;
|
|
&:hover { @extend .Button--active; }
|
|
}
|
|
&.ui-state-disabled { @extend .Button.disabled; }
|
|
}
|
|
|
|
.Button--theme-editor-apply {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
// "Beta" buttons
|
|
// --------------------------------------------------
|
|
|
|
// Adds a 'Beta' background image to the button
|
|
|
|
.btn-beta,
|
|
.Button--beta {
|
|
@mixin beta-tag {
|
|
background-image: url(/images/beta-tag.png);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom right;
|
|
background-size: auto 80%;
|
|
}
|
|
@include beta-tag;
|
|
padding-#{direction(right)}: 20px;
|
|
|
|
// Prevent the beta background image from disappearing on hover
|
|
&:hover {
|
|
@include beta-tag;
|
|
}
|
|
}
|