diff options
| author | alyssaf16 <alyssa_feinberg@brown.edu> | 2024-10-08 10:49:31 -0400 |
|---|---|---|
| committer | alyssaf16 <alyssa_feinberg@brown.edu> | 2024-10-08 10:49:31 -0400 |
| commit | caceff7f37b4e49621bc3495bf1d51fcc3a79957 (patch) | |
| tree | 78b742655d8b362f78f23a54ab55a4b1c3db92ae /src/client/views/collections/CollectionCarouselView.scss | |
| parent | a606005a5934913c38fba9b73886ee6e743aa635 (diff) | |
| parent | fc3e2b18b9dad38920e1cec5e58bf9fbd06f4aaf (diff) | |
Merge branch 'alyssa-starter' of https://github.com/brown-dash/Dash-Web into alyssa-starter
Diffstat (limited to 'src/client/views/collections/CollectionCarouselView.scss')
| -rw-r--r-- | src/client/views/collections/CollectionCarouselView.scss | 95 |
1 files changed, 45 insertions, 50 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss index af617254a..97952822e 100644 --- a/src/client/views/collections/CollectionCarouselView.scss +++ b/src/client/views/collections/CollectionCarouselView.scss @@ -40,7 +40,6 @@ } .carouselView-back, .carouselView-fwd, -.carouselView-star, .carouselView-remove, .carouselView-check, .carouselView-add { @@ -58,16 +57,14 @@ } } .carouselView-fwd { - top: 42.5%; - right: 20; + top: calc(50% - 15px); + right: 0; + transform-origin: right top; } .carouselView-back { - top: 42.5%; - left: 20; -} -.carouselView-star { - top: 0; + top: calc(50% - 15px); left: 0; + transform-origin: top left; } .carouselView-add { position: absolute; @@ -75,62 +72,60 @@ left: 0; } .carouselView-remove { - top: 80%; left: 52%; } .carouselView-check { - top: 80%; right: 52%; } -.carouselView-quiz { - position: relative; - display: flex; - height: 20px; - align-items: center; - margin: auto; - &:hover { - color: white; - } -} - -.carouselView-practice { - position: relative; - display: flex; - flex-direction: column; - height: 20px; - align-items: center; - margin: auto; - &:hover { - color: white; - } -} -.carouselView-starFilter { - position: relative; - display: flex; - height: 20px; - align-items: center; - &:hover { - color: white; - } -} - -.carouselView-practiceModes { - width: 100%; - height: 40px; - display: flex; - flex-direction: column; -} .carouselView-menu { position: absolute; flex-direction: column; align-items: center; display: flex; - top: 2px; - left: 2px; + top: 0px; + left: 0px; width: 30; + transform-origin: top left; border-radius: 5px; color: rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.1); + .carouselView-practiceModes { + width: 100%; + display: flex; + flex-direction: column; + top: 0; + position: relative; + .carouselView-quiz { + position: relative; + display: flex; + height: 20px; + align-items: center; + margin: auto; + &:hover { + color: white; + } + & > svg { + height: 100%; + width: 100%; + } + } + + .carouselView-practice { + position: relative; + display: flex; + flex-direction: column; + height: 20px; + align-items: center; + margin: auto; + &:hover { + color: white; + } + & > svg { + height: 100%; + width: 100%; + } + } + } } .carouselView-back:hover, |
