aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass/components/buttons.scss
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2017-12-20 15:14:05 +0000
committerSam Potts <sam@potts.es>2017-12-20 15:14:05 +0000
commit6864149989c6a5b1bb6e9199e1f8af062c64dcc4 (patch)
tree283649e596f5a81780fabe3603bb0be7d0d47485 /demo/src/sass/components/buttons.scss
parentaab53fa91fded2babdef8c3529a0ff1203f92f97 (diff)
downloadplyr-6864149989c6a5b1bb6e9199e1f8af062c64dcc4.tar.lz
plyr-6864149989c6a5b1bb6e9199e1f8af062c64dcc4.tar.xz
plyr-6864149989c6a5b1bb6e9199e1f8af062c64dcc4.zip
Converted to SASS/SCSS
Diffstat (limited to 'demo/src/sass/components/buttons.scss')
-rw-r--r--demo/src/sass/components/buttons.scss83
1 files changed, 83 insertions, 0 deletions
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
new file mode 100644
index 00000000..db821ad3
--- /dev/null
+++ b/demo/src/sass/components/buttons.scss
@@ -0,0 +1,83 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+// Shared
+.button,
+.button__count {
+ align-items: center;
+ background: #fff;
+ border: 0;
+ border-radius: $border-radius-base;
+ box-shadow: 0 1px 1px rgba(#000, 0.1);
+ color: $gray;
+ display: inline-flex;
+ padding: ($spacing-base * 0.75);
+ position: relative;
+ text-shadow: none;
+ user-select: none;
+ vertical-align: middle;
+}
+
+// Buttons
+.button {
+ font-weight: $font-weight-bold;
+ padding-left: $spacing-base;
+ padding-right: $spacing-base;
+ transition: all 0.2s ease;
+
+ &:hover,
+ &:focus {
+ color: $gray-dark;
+
+ // Remove the underline/border
+ &::after {
+ display: none;
+ }
+ }
+
+ &:hover {
+ box-shadow: 0 2px 2px rgba(#000, 0.1);
+ transform: translateY(-1px);
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &.tab-focus {
+ @include tab-focus();
+ }
+
+ &:active {
+ transform: translateY(1px);
+ }
+}
+
+// Button group
+.button--with-count {
+ display: inline-flex;
+
+ .button .icon {
+ flex-shrink: 0;
+ }
+}
+
+// Count bubble
+.button__count {
+ animation: fadein 0.2s ease;
+ margin-left: ($spacing-base / 2);
+
+ &::before {
+ border: $arrow-size solid transparent;
+ border-left-width: 0;
+ border-right-color: #fff;
+ content: '';
+ height: 0;
+ position: absolute;
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0;
+ }
+}