diff --git a/src/scss/ui/glide.theme.scss b/src/scss/ui/glide.theme.scss new file mode 100644 index 0000000..f0797dc --- /dev/null +++ b/src/scss/ui/glide.theme.scss @@ -0,0 +1,110 @@ +@import '@glidejs/glide/src/assets/sass/variables'; + +$glide-left-icon: url('data:image/svg+xml,') !default; +$glide-right-icon: url('data:image/svg+xml,') !default; + +.#{$glide-class} { + $this: &; + + $se: $glide-element-separator; + $sm: $glide-modifier-separator; + + &#{$se}arrow { + position: absolute; + display: block; + top: 50%; + z-index: 2; + padding: 9px 12px; + background-color: transparent; + opacity: 1; + cursor: pointer; + transition: opacity 150ms ease, border 300ms ease-in-out; + transform: translateY(-50%); + line-height: 1; + background-repeat: no-repeat; + background-position: 50%; + background-size: 50% 50%; + + width: 2em; + height: 100%; + overflow: hidden; + text-indent: 5000px; + border: 0; + + &:focus { + outline: none; + } + + &:hover { + background-color:rgba(0, 0, 0, 0.8); + } + + &#{$sm}left { + left: 0; + background-image: $glide-left-icon; + } + + &#{$sm}right { + right: 0; + background-image: $glide-right-icon; + } + + &#{$sm}disabled { + opacity: 0.33; + } + } + + &#{$se}bullets { + position: absolute; + z-index: 2; + bottom: 2em; + left: 50%; + display: inline-flex; + list-style: none; + transform: translateX(-50%); + } + + &#{$se}bullet { + background-color: rgba(255, 255, 255, 0.5); + width: 9px; + height: 9px; + padding: 0; + border-radius: 50%; + border: 2px solid transparent; + transition: all 300ms ease-in-out; + cursor: pointer; + line-height: 0; + box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); + margin: 0 0.25em; + + &:focus { + outline: none; + } + + &:hover, + &:focus { + border: 2px solid white; + background-color: rgba(255, 255, 255, 0.5); + } + + &#{$sm}active { + background-color: white; + } + } + + &#{$sm}swipeable { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + } + + &#{$sm}dragging { + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + } + + &__slide { + position: relative; + } +} \ No newline at end of file