@zohodesk/dot 1.0.0 → 1.1.0

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -1,353 +1,353 @@
-.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)
-}
-
-[dir=ltr] .footer {
-    padding-right: var(--zd_size68) 
-}
-
-[dir=rtl] .footer {
-    padding-left: var(--zd_size68) 
-}
-
-.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: var(--zd_bs_attachmentviewer_selected);
-}
-
-[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_size18) ;
-    width: var(--zd_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;
+.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)
+}
+
+[dir=ltr] .footer {
+    padding-right: var(--zd_size68) 
+}
+
+[dir=rtl] .footer {
+    padding-left: var(--zd_size68) 
+}
+
+.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: var(--zd_bs_attachmentviewer_selected);
+}
+
+[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_size18) ;
+    width: var(--zd_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;
 }