feat(chip): added focus circle + bug fixes

Vonage · Sep 7, 2020 · a11fb7c · a11fb7c
1 parent 82496e9
commit a11fb7c
Show file tree

Hide file tree

Showing 3 changed files with 301 additions and 182 deletions.
diff --git a/components/media-controller/src/vwc-media-controller.scss b/components/media-controller/src/vwc-media-controller.scss
@@ -2,66 +2,75 @@
  display: block;
  box-sizing: border-box;
  min-width: 5rem;
-}
-div.component {
- $basic: #B779FF;
- $track: #E1E2E6;
- $button_size: 16px;
- display: flex;
- align-items: center;
 
- > button.play-pause-control {
- flex: 0 0 $button_size;
- background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2232%22%20viewBox%3D%220%200%2064%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M27.0826%2014.872C28.3058%2015.5955%2028.3058%2017.4045%2027.0826%2018.128L5.7523%2030.7453C4.52905%2031.4689%203%2030.5644%203%2029.1173L3%203.8827C3%202.43556%204.52905%201.53109%205.75229%202.25466L27.0826%2014.872Z%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3Crect%20x%3D%2251.2174%22%20y%3D%222%22%20width%3D%229.78261%22%20height%3D%2229%22%20rx%3D%221%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3Crect%20x%3D%2236%22%20y%3D%222%22%20width%3D%229.78261%22%20height%3D%2229%22%20rx%3D%221%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3C%2Fsvg%3E%0A);
- background-repeat: no-repeat;
- background-color: transparent;
- background-size: $button_size * 2 $button_size;
- width: $button_size;
- height: $button_size;
- background-position: 0 center;
- border: none;
- cursor: pointer;
-
- &.engaged {
- background-position: -$button_size center;
- }
-
- &:focus {
- outline: none;
- }
- }
-
- > div.scrubber {
- height: 3px;
- position: relative;
- margin-left: 1rem;
- user-select: none;
+ > div {
+ $scrub_size: 12px;
+ $basic: #B779FF;
+ $track: #E1E2E6;
+ $button_size: 16px;
+ display: flex;
+ align-items: center;
+ padding: 5px 5px;
 
  > button {
- $size: 12px;
- cursor: pointer;
- position: absolute;
- top: 50%;
- left: 0;
- transform: translate(-50%, -50%);
- width: $size;
- height: $size;
- border-radius: $size/2;
- background-color: $basic;
+ flex: 0 0 $button_size;
+ background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2232%22%20viewBox%3D%220%200%2064%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M27.0826%2014.872C28.3058%2015.5955%2028.3058%2017.4045%2027.0826%2018.128L5.7523%2030.7453C4.52905%2031.4689%203%2030.5644%203%2029.1173L3%203.8827C3%202.43556%204.52905%201.53109%205.75229%202.25466L27.0826%2014.872Z%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3Crect%20x%3D%2251.2174%22%20y%3D%222%22%20width%3D%229.78261%22%20height%3D%2229%22%20rx%3D%221%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3Crect%20x%3D%2236%22%20y%3D%222%22%20width%3D%229.78261%22%20height%3D%2229%22%20rx%3D%221%22%20fill%3D%22%23B779FF%22%2F%3E%0A%3C%2Fsvg%3E%0A);
+ background-repeat: no-repeat;
+ background-color: transparent;
+ background-size: $button_size * 2 $button_size;
+ width: $button_size;
+ height: $button_size;
+ background-position: 0 center;
  border: none;
- transition: background-color 0.2s;
- &:hover {
- background-color: lighten($basic, 3%);
- }
+ cursor: pointer;
+
  &:focus {
  outline: none;
  }
  }
 
+ &.play {
+ > button {
+ background-position: -$button_size center;
+ }
+ }
+
  > div {
+ height: 3px;
+ position: relative;
+ margin-left: 1rem;
+ user-select: none;
+ box-sizing: border-box;
  width: 100%;
- height: 100%;
- background-color: $track;
+ cursor: pointer;
+
+ > button {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform-origin: center;
+ transform: translate(-50%, -50%);
+ width: $scrub_size;
+ height: $scrub_size;
+ border-radius: $scrub_size/2;
+ background-color: $basic;
+ border: none;
+ transition: background-color 0.2s, box-shadow 200ms, border-radius 0.2s;
+ box-shadow: 0 0 0 0 #00000000;
+ cursor: pointer;
+
+ &:focus {
+ outline: none;
+ }
+ }
+ }
+
+ &.scrub {
+ > div {
+ > button {
+ box-shadow: 0 0 0 15px #00000017;
+ }
+ }
  }
  }
 }