diff options
| author | Sam Potts <me@sampotts.me> | 2015-03-09 00:47:38 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2015-03-09 00:47:38 +1100 |
| commit | 1532f2ab2366965ceab6193df06ba8cd381f4cc3 (patch) | |
| tree | 617f7a86b5cc52c0723d4ea20e413587855767bb /src/sass | |
| parent | 5370fc5c836a159365bed595a442b7a886bb6ffa (diff) | |
| download | plyr-1532f2ab2366965ceab6193df06ba8cd381f4cc3.tar.lz plyr-1532f2ab2366965ceab6193df06ba8cd381f4cc3.tar.xz plyr-1532f2ab2366965ceab6193df06ba8cd381f4cc3.zip | |
Added tooltip option (Fixes #50)
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/plyr.scss | 56 |
1 files changed, 55 insertions, 1 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 0940b378..58a66cde 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -23,6 +23,13 @@ $control-color: $gray-light; $control-color-inactive: $gray; $control-color-hover: #fff; +// Tooltips +$tooltip-bg: $controls-bg; +$tooltip-color: #fff; +$tooltip-padding: $control-spacing; +$tooltip-arrow-size: 5px; +$tooltip-radius: 3px; + // Progress $progress-bg: lighten($gray, 10%); $progress-playing-bg: $blue; @@ -125,7 +132,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size position: relative; max-width: 100%; min-width: 290px; - overflow: hidden; // For the controls // border-box everything // http://paulirish.com/2012/box-sizing-border-box-ftw/ @@ -258,6 +264,54 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } } + // Tooltips + &-tooltip { + visibility: hidden; + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: $tooltip-padding; + padding: $tooltip-padding ($tooltip-padding * 1.5); + + opacity: 0; + background: $tooltip-bg; + border-radius: $tooltip-radius; + color: $tooltip-color; + font-size: $font-size-small; + line-height: 1.5; + font-weight: 600; + + transform: translate(-50%, ($tooltip-padding * 3)); + transition: transform .2s .2s ease, opacity .2s .2s ease; + + &::after { + content: ""; + display: block; + position: absolute; + left: 50%; + bottom: -$tooltip-arrow-size; + margin-left: -$tooltip-arrow-size; + width: 0; + height: 0; + transition: inherit; + border-style: solid; + border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; + border-color: $controls-bg transparent transparent; + } + } + label:hover .player-tooltip, + input:focus + label .player-tooltip, + button:hover .player-tooltip, + button:focus .player-tooltip { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); + } + label:hover .player-tooltip, + button:hover .player-tooltip { + z-index: 3; + } + // Player progress // <progress> element &-progress { |