@zohodesk/dot 1.0.0-temp-74 → 1.0.0-temp-75

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,291 +1,346 @@
-.header {
-    background-color: var(--zdt_attachmentviewer_header_bg);
-    height: var(--zd_size40);
-    position: relative;
-    z-index: 1;
-    padding: 0 var(--zd_size15);
-    composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-    border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
-}
-
-.title {
-    padding-right: var(--zd_size15);
-    max-width: 50%;
-    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.count {
-    padding: 0 var(--zd_size10);
-    position: absolute;
-    composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.title,
-.count {
-    color: var(--zdt_attachmentviewer_title_text);
-    font-size: var(--zd_font_size15);
-}
-
-.menuBar {
-    padding-left: var(--zd_size5);
-}
-
-.mbleMenuBar {
-    margin-top: var(--zd_size8);
-    align-self: baseline;
-}
-
-.menu+.menu {
-    margin-left: var(--zd_size22);
-}
-
-.mobileMenu+.mobileMenu {
-    margin-bottom: var(--zd_size22);
-}
-
-.menuIcon {
-    --iconColor: var(--zdt_attachmentviewer_title_text);
-}
-
-.nrmlArrowBox {
-    width: var(--zd_size80);
-}
-
-.mbleArrowBox {
-    width: var(--zd_size50);
-}
-
-.arrowBox:hover {
-    background-color: var(--zdt_attachmentviewer_arrow_bg_hover);
-}
-
-.arrow {
-    color: var(--zdt_attachmentviewer_title_text);
-    font-size: var(--zd_font_size22);
-    border-radius: 50%;
-    cursor: pointer;
-    height: var(--zd_size38);
-    width: var(--zd_size38);
-    line-height: var(--zd_size36);
-}
-
-.preview {
-    text-align: center;
-    margin: var(--zd_size20) 0;
-    composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.zoomIn {
-    max-height: 100%;
-    max-width: 90%;
-    position: absolute;
-    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.zoomOut {
-    cursor: zoom-out;
-}
-
-.button {
-    position: absolute;
-    bottom: var(--zd_size23);
-    right: var(--zd_size20);
-    z-index: 3;
-    border: 1px solid var(--zdt_attachmentviewer_button_border);
-}
-
-.visible {
-    visibility: visible;
-}
-
-.hidden {
-    visibility: hidden;
-}
-
-.footer {
-    background-color: var(--zdt_attachmentviewer_footer_bg);
-    width: 100%;
-    overflow: hidden;
-    transition: height var(--zd_transition3);
-}
-
-.footerHeight {
-    height: var(--zd_size75);
-}
-
-.footerHide {
-    height: 0;
-}
-
-.listContainer {
-    padding: 0 var(--zd_size18);
-}
-
-.imgItem {
-    height: var(--zd_size60);
-    min-width: var(--zd_size40);
-    border-width: 2px;
-    border-style: solid;
-    border-color: var(--dot_mirror);
-    border-radius: 3px;
-    position: relative;
-    transition: border var(--zd_transition3);
-    padding: var(--zd_size2);
-}
-
-.imgItem:hover {
-    border-color: var(--zdt_attachmentviewer_hover_border);
-}
-
-.imgItem+.imgItem {
-    margin-left: var(--zd_size12);
-}
-
-.image {
-    cursor: pointer;
-}
-
-.selected,
-.selected:hover {
-    border-color: var(--zdt_attachmentviewer_selected_border);
-}
-
-.selected::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--zdt_attachmentviewer_selected_after_bg);
-    opacity: 0.3;
-    box-shadow: 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset;
-}
-
-.zoomIcon {
-    font-size: var(--zd_font_size15);
-}
-
-.newTabIcon {
-    font-size: var(--zd_font_size12);
-}
-
-.appIcon {
-    font-size: var(--zd_font_size9);
-}
-
-.thumpIcon {
-    color: var(--zdt_attachmentviewer_title_text);
-    transition: transform var(--zd_transition3);
-    transform: rotateX(180deg);
-}
-
-.thumpIconActive {
-    transform: rotateX(0deg);
-}
-
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    background-size: 100% 100%;
-    width: var(--zd_size100);
-}
-
-.isAudio .image {
-    opacity: 0;
-}
-
-.video {
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.imgBox {
-    position: absolute;
-    transition: var(--zd_transition3) ease-in-out;
-    opacity: 0;
-    overflow: auto;
-}
-
-.imgBox>img {
-    object-fit: contain;
-}
-
-.imgRef {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.img {
-    transition: var(--zd_transition3) ease-in-out;
-    margin: auto;
-    cursor: zoom-in;
-}
-
-.imgRef .normalImg {
-    max-width: inherit;
-    max-height: inherit;
-    cursor: zoom-in;
-}
-
-.imgRef .zoomedImg {
-    max-width: initial;
-    max-height: initial;
-    cursor: zoom-out;
-}
-
-.previewBox {
-    position: relative;
-    overflow: hidden;
-}
-
-.spinLoad {
-    position: absolute;
-    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-    height: var(--zd_font_size18);
-    width: var(--zd_font_size18);
-}
-
-.loader {
-    height: 100%;
-    width: 100%;
-    animation-duration: var(--zd_transition8);
-    animation-timing-function: linear;
-    composes: rotate from '../common/dot_animation.module.css';
-    composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
-    border: 2px solid var(--zdt_attachmentviewer_loader_border);
-    border-top-color: var(--zdt_attachmentviewer_loader_border_top);
-    border-radius: 50%;
-}
-
-.hide {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.author {
-    max-width: var(--zd_size200);
-    padding-left: var(--zd_size15);
-}
-
-.authorName {
-    margin: 0 var(--zd_size10);
-    font-size: var(--zd_font_size15);
-    color: var(--zdt_attachmentviewer_title_text);
-    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.btn {
-    background-color: var(--dot_mirror);
-    border: 0;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-}
-
+.header {
+    height: var(--zd_size40);
+    position: relative;
+    z-index: 1;
+    composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+    background-color: var(--zdt_attachmentviewer_header_bg);
+    padding: 0 var(--zd_size15);
+    border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
+}
+
+.title {
+    max-width: 50%;
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .title {
+    padding-right: var(--zd_size15);
+}
+
+[dir=rtl] .title {
+    padding-left: var(--zd_size15);
+}
+
+.count {
+    position: absolute;
+    composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
+    padding: 0 var(--zd_size10);
+}
+
+.title,
+.count {
+    color: var(--zdt_attachmentviewer_title_text);
+    font-size: var(--zd_font_size15);
+}
+
+[dir=ltr] .menuBar {
+    padding-left: var(--zd_size5);
+}
+
+[dir=rtl] .menuBar {
+    padding-right: var(--zd_size5);
+}
+
+.mbleMenuBar {
+    align-self: baseline;
+    margin-top: var(--zd_size8);
+}
+
+[dir=ltr] .menu+.menu {
+    margin-left: var(--zd_size22);
+}
+
+[dir=rtl] .menu+.menu {
+    margin-right: var(--zd_size22);
+}
+
+.mobileMenu+.mobileMenu {
+    margin-bottom: var(--zd_size22);
+}
+
+.menuIcon {
+    --iconColor: var(--zdt_attachmentviewer_title_text);
+}
+
+.nrmlArrowBox {
+    width: var(--zd_size80);
+}
+
+.mbleArrowBox {
+    width: var(--zd_size50);
+}
+
+.arrowBox:hover {
+    background-color: var(--zdt_attachmentviewer_arrow_bg_hover);
+}
+
+.arrow {
+    color: var(--zdt_attachmentviewer_title_text);
+    font-size: var(--zd_font_size22);
+    height: var(--zd_size38);
+    width: var(--zd_size38);
+    line-height: var(--zd_size36);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.preview {
+    composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
+    text-align: center;
+    margin: var(--zd_size20) 0;
+}
+
+.zoomIn {
+    max-height: 100%;
+    max-width: 90%;
+    position: absolute;
+    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.zoomOut {
+    cursor: zoom-out;
+}
+
+.button {
+    position: absolute;
+    bottom: var(--zd_size23);
+    z-index: 3;
+    border: 1px solid var(--zdt_attachmentviewer_button_border);
+}
+
+[dir=ltr] .button {
+    right: var(--zd_size20);
+}
+
+[dir=rtl] .button {
+    left: var(--zd_size20);
+}
+
+.visible {
+    visibility: visible;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.footer {
+    width: 100%;
+    overflow: hidden;
+    transition: height var(--zd_transition3);
+    background-color: var(--zdt_attachmentviewer_footer_bg);
+}
+
+.footerHeight {
+    height: var(--zd_size75);
+}
+
+.footerHide {
+    height: 0;
+}
+
+.listContainer {
+    padding: 0 var(--zd_size18);
+}
+
+.imgItem {
+    height: var(--zd_size60);
+    min-width: var(--zd_size40);
+    position: relative;
+    transition: border var(--zd_transition3);
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--dot_mirror);
+    border-radius: 3px;
+    padding: var(--zd_size2);
+}
+
+.imgItem:hover {
+    border-color: var(--zdt_attachmentviewer_hover_border);
+}
+
+[dir=ltr] .imgItem+.imgItem {
+    margin-left: var(--zd_size12);
+}
+
+[dir=rtl] .imgItem+.imgItem {
+    margin-right: var(--zd_size12);
+}
+
+.image {
+    cursor: pointer;
+}
+
+.selected, .selected:hover {
+    border-color: var(--zdt_attachmentviewer_selected_border);
+}
+
+.selected::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    background-color: var(--zdt_attachmentviewer_selected_after_bg);
+    box-shadow: 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset;
+}
+
+[dir=ltr] .selected::after {
+    left: 0;
+}
+
+[dir=rtl] .selected::after {
+    right: 0;
+}
+
+.zoomIcon {
+    font-size: var(--zd_font_size15);
+}
+
+.newTabIcon {
+    font-size: var(--zd_font_size12);
+}
+
+.appIcon {
+    font-size: var(--zd_font_size9);
+}
+
+.thumpIcon {
+    color: var(--zdt_attachmentviewer_title_text);
+    transition: transform var(--zd_transition3);
+    transform: rotateX(180deg);
+}
+
+.thumpIconActive {
+    transform: rotateX(0deg);
+}
+
+.isAudio {
+    composes: audioImage from '../common/dot_common.module.css';
+    width: var(--zd_size100);
+    background-size: 100% 100%;
+}
+
+.isAudio .image {
+    opacity: 0;
+}
+
+.video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+[dir=ltr] .video {
+    left: 0;
+    right: 0;
+}
+
+[dir=rtl] .video {
+    right: 0;
+    left: 0;
+}
+
+.imgBox {
+    position: absolute;
+    transition: var(--zd_transition3) ease-in-out;
+    opacity: 0;
+    overflow: auto;
+}
+
+.imgBox>img {
+    object-fit: contain;
+}
+
+.imgRef {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.img {
+    transition: var(--zd_transition3) ease-in-out;
+    margin: auto;
+    cursor: zoom-in;
+}
+
+.imgRef .normalImg {
+    max-width: inherit;
+    max-height: inherit;
+    cursor: zoom-in;
+}
+
+.imgRef .zoomedImg {
+    max-width: initial;
+    max-height: initial;
+    cursor: zoom-out;
+}
+
+.previewBox {
+    position: relative;
+    overflow: hidden;
+}
+
+.spinLoad {
+    position: absolute;
+    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+    height: var(--zd_font_size18);
+    width: var(--zd_font_size18);
+}
+
+.loader {
+    height: 100%;
+    width: 100%;
+    composes: rotate from '../common/dot_animation.module.css';
+    composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
+    border: 2px solid var(--zdt_attachmentviewer_loader_border);
+    border-top-color: var(--zdt_attachmentviewer_loader_border_top);
+    border-radius: 50%;
+}
+
+[dir=ltr] .loader {
+    animation-duration: var(--zd_transition8);
+    animation-timing-function: linear;
+}
+
+[dir=rtl] .loader {
+    animation-duration: var(--zd_transition8);
+    animation-timing-function: linear;
+}
+
+.hide {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.author {
+    max-width: var(--zd_size200);
+}
+
+[dir=ltr] .author {
+    padding-left: var(--zd_size15);
+}
+
+[dir=rtl] .author {
+    padding-right: var(--zd_size15);
+}
+
+.authorName {
+    font-size: var(--zd_font_size15);
+    color: var(--zdt_attachmentviewer_title_text);
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+    margin: 0 var(--zd_size10);
+}
+
+.btn {
+    height: 100%;
+    width: 100%;
+    background-color: var(--dot_mirror);
+    border: 0;
+    cursor: pointer;
+}
+