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';
-