react-ui-basics 0.0.174 → 0.0.177

package/src/ImageGallery.css

@@ -0,0 +1,196 @@
+.ImageGallery {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.01);
+  user-select: none;
+}
+.ImageGallery:focus {
+  outline-width: 0px;
+}
+.ImageGallery.animated {
+  transition: background-color 0.25s ease;
+  opacity: 1;
+}
+.ImageGallery.mounting, .ImageGallery.mounted {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.ImageGallery .image {
+  position: absolute;
+  cursor: grab;
+}
+.ImageGallery .image .counter {
+  display: none;
+}
+.ImageGallery .image img {
+  border-radius: 4px;
+  max-width: 100%;
+  min-width: 100%;
+}
+.ImageGallery .image.animated {
+  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
+  will-change: top, left, width, height, opacity;
+}
+.ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
+  opacity: 1;
+}
+.ImageGallery .image.zoomed {
+  text-align: center;
+  overflow: hidden;
+}
+.ImageGallery .image.dragging {
+  transition: none;
+  cursor: move;
+}
+.ImageGallery .image .close {
+  position: absolute;
+  top: -18px;
+  right: -18px;
+}
+.ImageGallery .image .spinner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.65);
+}
+.ImageGallery .image .spinner .SpinningProgress {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -24px;
+  margin-top: -24px;
+}
+.ImageGallery .image .spinner .SpinningProgress .line {
+  stroke: #2196F3;
+}
+.ImageGallery .Button.animated {
+  transition: all 0.25s ease;
+  opacity: 0;
+  transform: scale(0);
+}
+.ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
+  opacity: 1;
+  transform: scale(1);
+}
+.ImageGallery .Button {
+  color: white;
+  background: rgba(0, 0, 0, 0.4);
+}
+.ImageGallery .Button:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+.ImageGallery > .arrow {
+  position: absolute;
+  top: 50%;
+  height: 76px;
+  width: 76px;
+  margin-top: -38px;
+}
+.ImageGallery > .arrow.left {
+  left: 5%;
+}
+.ImageGallery > .arrow.right {
+  right: 5%;
+}
+.ImageGallery > .arrow .material-icons {
+  font-size: 40px;
+}
+.ImageGallery .counter {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: white;
+  font-size: 13px;
+}
+.ImageGallery .previews {
+  height: 80px;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 45px;
+}
+.ImageGallery .previews .viewport {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.ImageGallery .previews .container {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  transition: left 0.25s ease;
+}
+.ImageGallery .previews .preview {
+  position: relative;
+  height: 100%;
+  display: inline-block;
+  width: 106.66px;
+  overflow: hidden;
+  margin-left: 12px;
+  border-radius: 2px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.ImageGallery .previews .preview:first-child {
+  margin-left: 0;
+}
+.ImageGallery .previews .preview > .border {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 3px;
+}
+.ImageGallery .previews .preview > .border .line {
+  left: 50%;
+  width: 0;
+  height: 3px;
+  min-height: 3px;
+  background-color: #4AC263;
+  transition: all 0.2s ease;
+  position: absolute;
+}
+.ImageGallery .previews .preview:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.35);
+  transition: background 0.2s ease;
+}
+.ImageGallery .previews .preview:hover:after {
+  background: rgba(0, 0, 0, 0.1);
+}
+.ImageGallery .previews .preview.selected .border .line {
+  left: 0;
+  width: 100%;
+}
+.ImageGallery .previews .preview.selected:after {
+  background: rgba(0, 0, 0, 0);
+}
+.ImageGallery .previews > .arrow {
+  position: absolute;
+  top: 50%;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+  min-height: 30px;
+  margin-top: -15px;
+}
+.ImageGallery .previews > .arrow.left {
+  left: 0;
+}
+.ImageGallery .previews > .arrow.right {
+  right: 0;
+}
+.ImageGallery .previews > .arrow .material-icons {
+  font-size: 24px;
+}