diff --git a/d2l-button.scss b/d2l-button.scss deleted file mode 100644 index dc216b2..0000000 --- a/d2l-button.scss +++ /dev/null @@ -1,168 +0,0 @@ -@import 'node_modules/@brightspace-ui/core/components/colors/colors.scss'; -@import 'node_modules/@brightspace-ui/core/components/typography/typography.scss'; - -@mixin _d2l-button-clear-focus() { - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); -} - -@mixin _d2l-button-focus() { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006fbf; -} - -@mixin _d2l-button-shared() { - border-radius: 0.3rem; - border-style: solid; - border-width: 1px; - box-sizing: border-box; - cursor: pointer; - display: inline-block; - margin: 0; - min-height: -webkit-calc(2rem + 2px); - min-height: calc(2rem + 2px); - outline: none; - text-align: center; - transition: box-shadow 0.2s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - white-space: nowrap; - width: auto; -} - -@mixin d2l-button-icon() { - @include _d2l-button-shared(); - background-color: transparent; - border-color: transparent; - @include _d2l-button-clear-focus(); - font-family: inherit; - min-width: calc(2rem + 2px); - padding: 0; - position: relative; - &::-moz-focus-inner { - border: 0; - } - &[h-align="text"] { - left: calc(((2rem + 2px - 0.9rem) / 2) * -1); - } - [dir="rtl"] &[h-align="text"] { - left: 0; - right: calc(((2rem + 2px - 0.9rem) / 2) * -1); - } - &[disabled]:hover, &[disabled]:focus, &[active][disabled] { - background-color: transparent; - } - &:hover, &:focus, &[active], &.d2l-button-icon-hover, &.d2l-button-icon-focus { - background-color: $d2l-color-gypsum; - } - &:focus, &.d2l-button-icon-focus { - @include _d2l-button-focus(); - } - & d2l-icon { - height: 0.9rem; - width: 0.9rem; - } - &[disabled] { - cursor: default; - opacity: 0.5; - } - &[translucent] { - background-color: rgba(0,0,0,0.5); - transition: background-color 0.5s; - } - &[translucent] d2l-icon { - color: white; - } - &[active][translucent], - &[translucent].d2l-button-icon-hover, - &[translucent].d2l-button-icon-focus, - &[translucent]:hover, - &[translucent]:focus { - border: none; - background-color: $d2l-color-celestine; - box-shadow: none; - } -} - -@mixin d2l-button-subtle() { - @include _d2l-button-shared(); - background-color: transparent; - border-color: transparent; - color: $d2l-color-celestine; - @include _d2l-button-clear-focus(); - font-family: inherit; - padding: 0.5rem 0.6rem; - position: relative; - @include d2l-label-text(); - &::-moz-focus-inner { - border: 0; - } - &[h-align="text"] { - left: -0.6rem; - } - [dir="rtl"] &[h-align="text"] { - left: 0; - right: -0.6rem; - } - &[disabled]:hover, &[disabled]:focus, &[active][disabled] { - background-color: transparent; - } - &:hover, &:focus, &[active], &.d2l-button-subtle-hover, &.d2l-button-subtle-focus { - background-color: $d2l-color-gypsum; - } - &:focus, &.d2l-button-subtle-focus { - @include _d2l-button-focus(); - } - & d2l-icon { - color: $d2l-color-celestine; - height: 0.9rem; - margin-right: 0.3rem; - width: 0.9rem; - } - [dir="rtl"] & d2l-icon { - margin-left: 0.3rem; - margin-right: 0; - } - &[disabled] { - cursor: default; - opacity: 0.5; - } -} - -@mixin d2l-button() { - @include _d2l-button-shared(); - @include _d2l-button-clear-focus(); - font-family: inherit; - padding: 0.5rem 1.5rem; - @include d2l-label-text(); - &::-moz-focus-inner { - border: 0; - } - &, &[disabled]:hover, &[disabled]:focus, &[active][disabled] { - background-color: $d2l-color-regolith; - border-color: $d2l-color-mica; - color: $d2l-color-ferrite; - } - &:hover, &:focus, &[active], &.d2l-button-hover, &.d2l-button-focus { - background-color: $d2l-color-gypsum; - } - &:focus, &.d2l-button-focus { - @include _d2l-button-focus(); - } - &[disabled] { - opacity: 0.5; - cursor: default; - } - &[primary], &[primary][disabled]:hover, &[primary][disabled]:focus, &[primary][active][disabled] { - background-color: $d2l-color-celestine; - border-color: $d2l-color-celestine-minus-1; - color: #ffffff; - } - &[primary]:hover, &[primary].d2l-button-hover, &[primary]:focus, &[primary].d2l-button-focus, &[primary][active] { - background-color: $d2l-color-celestine-minus-1; - } - &[primary]:focus, &[primary].d2l-button-focus { - @include _d2l-button-focus(); - } -} diff --git a/demo/floating-buttons-standard.html b/demo/floating-buttons-standard.html index aef97db..7259a40 100644 --- a/demo/floating-buttons-standard.html +++ b/demo/floating-buttons-standard.html @@ -10,7 +10,6 @@ import '../d2l-button.js'; import '../d2l-floating-buttons.js'; -