react-editable-photo-grid 2.3.6 → 3.0.0

package/src/styles.css

@@ -1,443 +1,416 @@
-.photogrid--checkbox {
-    background: white;
-    border: 2px solid white;
-    cursor: pointer;
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    z-index: 10;
-}
-
-.photogrid--checkbox.active {
-    background: #333;
-}
-
-.photogrid {
-    padding: 0 0.125rem;
-}
-
-.photogrid--row__controls {
-    display: block;
-    position: absolute;
-    left: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 20;
-}
-
-.photogrid--row__controls > li {
-    display: block;
-}
-
-.photogrid--photo__controls {
-    display: block;
-    width: 100%;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 0.5rem;
-    text-align: center;
-}
-
-.photogrid--photo__controls > li {
-    display: inline-block;
-}
-
-.photogrid--photo__controls > li + li {
-    margin-left: 0.25rem;
-}
-
-.photogrid--row__controls > li + li {
-    margin-top: 0.25rem;
-}
-
-.photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {
-    width: 36px;
-    height: 36px;
-    display: block;
-    background: #ddd;
-    color: #333;
-    font-size: 1.5rem;
-    line-height: 2rem;
-}
-
-.photogrid--photo__row {
-    display: block;
-    background: transparent;
-    min-height: 0;
-    position: relative;
-    z-index: 10;
-    padding: 0;
-}
-
-.photogrid--photo__row.editing {
-    padding-left: 2.75rem;
-}
-
-.photogrid--photo__column {
-    position: relative;
-    vertical-align: middle;
-    display: block;
-    margin: 0.125rem;
-}
-
-.photogrid--photo_overlay {
-    cursor: pointer;
-}
-
-.photogrid--photo_overlay, .photogrid__gallery_item__overlay, .custom__gallery__photo__overlay {
-    text-align: center;
-    min-height: 0;
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.6);
-    padding: 0.5rem;
-    z-index: 200;
-}
-
-.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4, .custom__gallery__photo__overlay h4 {
-    pointer-events: none;
-    margin: 25% 0 0 0;
-    font-size: 20px;
-    font-weight: 600;
-    padding: 0;
-}
-
-.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p, , .custom__gallery__photo__overlay p {
-    pointer-events: none;
-    font-size: 16px;
-    margin: 7px 0 0 0;
-    padding: 0;
-}
-
-.photogrid--photo__column > .photo__details {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 20;
-    text-align: center;
-}
-
-.photogrid--photo__column > .photo__details > .photo__position {
-    display: inline-block;
-    background: rgba(0, 0, 0, 0.65);
-    color: white;
-    padding: 0.1rem;
-}
-
-.photogrid--photo__column > .photo__details > .photo__details__desc {
-    list-style-type: none;
-    display: block;
-    margin: 7px 0 0 0;
-    padding: 0;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    font-size: 13px;
-}
-
-.photogrid--photo__column > .photo__details > .photo__details__desc > li {
-    display: block;
-}
-
-.photogrid--photo__column > img {
-    display: block;
-    max-width: 100%;
-    max-height: 750px;
-    height: auto;
-    margin: 0;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.custom__gallery {
-    display: block;
-    overflow: hidden;
-    position: fixed;
-    left: 0;
-    top: 0;
-    margin: 0 auto;
-    width: 100%;
-    height: 100vh;
-    z-index: 9000;
-    background: black;
-}
-
-.custom__gallery .custom__gallery__container {
-  vertical-align: middle;
-  display: block;
-  height: 100%;
-  margin: 0 auto;
-  position: relative;
-}
-
-.custom__gallery .custom__gallery__container .previous__item {
-  display: none;
-  height: 50px;
-  width: 50px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: white;
-  font-size: 2rem;
-  left: 50px;
-  cursor: pointer;
-  z-index: 9001;
-}
-
-.custom__gallery .custom__gallery__container .previous__item > * {
-  pointer-events: none;
-}
-
-.custom__gallery .custom__gallery__container .custom__gallery__images {
-  height: 100vh;
-  text-align: center;
-}
-
-.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {
-  position: relative;
-  height: 100vh;
-  display: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {
-  display: block;
-}
-
-.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
-  display: block;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  max-width: 100%;
-  height: auto;
-  width: 100%;
-  margin: 0 auto;
-  line-height: 1;
-  vertical-align: middle;
-  outline: 0;
-}
-
-.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {
-  color: white;
-  margin-top: 12px;
-}
-
-.custom__gallery .custom__gallery__container .next__item {
-  display: none;
-  height: 50px;
-  width: 50px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: white;
-  font-size: 2rem;
-  right: 50px;
-  cursor: pointer;
-  z-index: 9001;
-}
-
-.custom__gallery .custom__gallery__container .next__item > * {
-  pointer-events: none;
-}
-
-.custom__gallery .close__gallery {
-  position: absolute;
-  z-index: 9999;
-  right: 0;
-  background: none;
-  color: white;
-  border: none;
-  font-size: 3rem;
-  float: right;
-  font-weight: 300;
-  width: 73px;
-  height: 73px;
-  overflow: hidden;
-  text-decoration: none;
-}
-
-.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {
-  text-decoration: none;
-}
-
-
-.photogrid__gallery {
-    width: 100%;
-    text-align: center;
-    overflow: hidden;
-    position: fixed;
-    height: 100vh;
-    left: 0;
-    top: 0;
-    background-color: black;
-    z-index: 400;
-    margin: 0 auto;
-}
-
-.photogrid__gallery_scrollcontainer {
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    height: 100vh;
-    margin: 0 auto;
-    width: 100%;
-}
-
-.photogrid__gallery_scrollcontainer::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {
-    background: #ddd;
-    border-radius: 10px;
-}
-
-.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.photogrid__gallery_item {
-    width: 100%;
-    height: 100vh;
-    scroll-snap-align: start;
-    transform-origin: center;
-    transform: scale(1);
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-}
-
-.photogrid__gallery_item +.photogrid__gallery_item {
-    margin-left: 1rem;
-}
-
-.photogrid__gallery_item > img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 0 auto;
-}
-
-.photogrid__gallery__hide {
-    text-align: right;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding-right: 0.5rem;
-    z-index: 500;
-}
-
-.photogrid__gallery__hide > button {
-    color: white;
-    font-weight: 300;
-    width: 73px;
-    height: 73px;
-    font-size: 3rem;
-    background: none;
-    border: none;
-}
-
-.photogrid__prev, .photogrid__next {
-    display: none;
-    width: auto;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    color: white;
-    z-index: 401;
-    font-size: 2rem;
-}
-
-.photogrid__prev > button > *, .photogrid__next > button > * {
-    pointer-events: none;
-}
-
-.photogrid__prev {
-    left: 1.25rem;
-}
-
-.photogrid__next {
-    right: 1.25rem;
-}
-
-@media only screen and (min-width: 768px) {
-    .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {
-        display: inline-block;
-    }
-
-    .photogrid--photo__row {
-        display: flex;
-        flex: 1 1 auto;
-    }
-
-    .photogrid--photo__column > img {
-        display: inline-block;
-    }
-}
-
-@media only screen and (min-width: 1024px) {
-    .photogrid__prev, .photogrid__next {
-        display: block;
-    }
-}
-
-
-@media only screen and (min-width: 1280px) {
-    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {
-        display: block;
-    }
-    .photogrid--photo__column:hover .photogrid--photo_overlay {
-        display: block;
-    }
-    .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {
-        display: block;
-    }
-    .photogrid__gallery_scrollcontainer {
-        width: 91.6%;
-    }
-}
-
-@media only screen and (min-width: 1400px) {
-    .custom__gallery .custom__gallery__container {
-        width: 92%;
-    }
-
-    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
-        max-width: 100%;
-        height: 100%;
-        width: auto;
-    }
-}
-
-@media only screen and (min-width: 1536px) {
-    .photogrid__gallery_scrollcontainer {
-        width: 75%;
-    }
-}
+.photogrid--checkbox {
+    background: white;
+    border: 2px solid white;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+}
+
+.photogrid--checkbox.active {
+    background: #333;
+}
+
+.photogrid {
+    padding: 0 0.125rem;
+}
+
+.photogrid--row__controls {
+    display: block;
+    position: absolute;
+    left: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 20;
+}
+
+.photogrid--row__controls > li {
+    display: block;
+}
+
+.photogrid--photo__controls {
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0.5rem;
+    text-align: center;
+}
+
+.photogrid--photo__controls > li {
+    display: inline-block;
+}
+
+.photogrid--photo__controls > li + li {
+    margin-left: 0.25rem;
+}
+
+.photogrid--row__controls > li + li {
+    margin-top: 0.25rem;
+}
+
+.photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {
+    width: 36px;
+    height: 36px;
+    display: block;
+    background: #ddd;
+    color: #333;
+    font-size: 1.5rem;
+    line-height: 2rem;
+}
+
+.photogrid--photo__row {
+    display: block;
+    background: transparent;
+    min-height: 0;
+    position: relative;
+    z-index: 10;
+    padding: 0;
+}
+
+.photogrid--photo__row.editing {
+    padding-left: 2.75rem;
+}
+
+.photogrid--photo__column {
+    position: relative;
+    vertical-align: middle;
+    display: block;
+    margin: 0.125rem;
+}
+
+.photogrid--photo_overlay, .photogrid__gallery_item__overlay {
+    min-height: 0;
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    padding: 0.5rem;
+    z-index: 200;
+}
+
+.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4 {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+}
+
+.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p {
+    margin: 7px 0 0 0;
+    padding: 0;
+    font-size: 12px;
+}
+
+.photogrid--photo__column > .photo__position {
+    position: absolute;
+    top: 0;
+    z-index: 20;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.65);
+    color: white;
+    padding: 0.1rem;
+}
+
+.photogrid--photo__column > img {
+    display: block;
+    max-width: 100%;
+    max-height: 750px;
+    height: auto;
+    margin: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.custom__gallery {
+    display: block;
+    overflow: hidden;
+    position: fixed;
+    left: 0;
+    top: 0;
+    margin: 0 auto;
+    width: 100%;
+    height: 100vh;
+    z-index: 9000;
+    background: black;
+}
+
+.custom__gallery .custom__gallery__container {
+  vertical-align: middle;
+  display: block;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.custom__gallery .custom__gallery__container .previous__item {
+  display: none;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  left: 50px;
+  cursor: pointer;
+  z-index: 9001;
+}
+
+.custom__gallery .custom__gallery__container .previous__item > * {
+  pointer-events: none;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images {
+  height: 100vh;
+  text-align: center;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {
+  position: relative;
+  height: 100vh;
+  display: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {
+  display: block;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1;
+  vertical-align: middle;
+  outline: 0;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {
+  color: white;
+  margin-top: 12px;
+}
+
+.custom__gallery .custom__gallery__container .next__item {
+  display: none;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  right: 50px;
+  cursor: pointer;
+  z-index: 9001;
+}
+
+.custom__gallery .custom__gallery__container .next__item > * {
+  pointer-events: none;
+}
+
+.custom__gallery .close__gallery {
+  position: absolute;
+  z-index: 9999;
+  right: 0;
+  background: none;
+  color: white;
+  border: none;
+  font-size: 3rem;
+  float: right;
+  font-weight: 300;
+  width: 73px;
+  height: 73px;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {
+  text-decoration: none;
+}
+
+
+.photogrid__gallery {
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background-color: black;
+    z-index: 400;
+    margin: 0 auto;
+}
+
+.photogrid__gallery_scrollcontainer {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    height: 100vh;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 10px;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.photogrid__gallery_item {
+    width: 100%;
+    height: 100vh;
+    scroll-snap-align: start;
+    transform-origin: center;
+    transform: scale(1);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.photogrid__gallery_item +.photogrid__gallery_item {
+    margin-left: 1rem;
+}
+
+.photogrid__gallery_item > img {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.photogrid__gallery__hide {
+    text-align: right;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-right: 0.5rem;
+}
+
+.photogrid__gallery__hide > button {
+    color: white;
+    font-weight: 300;
+    width: 73px;
+    height: 73px;
+    font-size: 3rem;
+    background: none;
+    border: none;
+}
+
+.photogrid__prev, .photogrid__next {
+    display: none;
+    width: auto;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: white;
+    z-index: 401;
+    font-size: 2rem;
+}
+
+.photogrid__prev > button > *, .photogrid__next > button > * {
+    pointer-events: none;
+}
+
+.photogrid__prev {
+    left: 1.25rem;
+}
+
+.photogrid__next {
+    right: 1.25rem;
+}
+
+@media only screen and (min-width: 768px) {
+    .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {
+        display: inline-block;
+    }
+
+    .photogrid--photo__row {
+        display: flex;
+        flex: 1 1 auto;
+    }
+
+    .photogrid--photo__column > img {
+        display: inline-block;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .photogrid__prev, .photogrid__next {
+        display: block;
+    }
+}
+
+
+@media only screen and (min-width: 1280px) {
+    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {
+        display: block;
+    }
+    .photogrid--photo__column img:hover + .photogrid--photo_overlay {
+        display: block;
+    }
+    .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {
+        display: block;
+    }
+    .photogrid__gallery_scrollcontainer {
+        width: 91.6%;
+    }
+}
+
+@media only screen and (min-width: 1400px) {
+    .custom__gallery .custom__gallery__container {
+        width: 92%;
+    }
+
+    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
+        max-width: 100%;
+        height: 100%;
+        width: auto;
+    }
+}
+
+@media only screen and (min-width: 1536px) {
+    .photogrid__gallery_scrollcontainer {
+        width: 75%;
+    }
+}