quicktab
Version:
Multi IFrame tab plugin. operate IFrame like operating browser tabs
1 lines • 23.7 kB
Source Map (JSON)
{"version":3,"sources":["../../src/scss/_tab.scss","quicktab.css","../../src/scss/_variables.scss","../../src/scss/_list-group.scss","../../src/scss/_loaders.scss","../../src/scss/_dropdown.scss"],"names":[],"mappings":"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","file":"quicktab.css","sourcesContent":["@use 'sass:color';\n\n.quicktab {\n *,\n ::after,\n ::before {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 222px;\n background-color: #fff;\n\n // pen开头的类名可以让鼠标事件不穿透\n &[class*='pen-'] iframe {\n pointer-events: none;\n user-select: none;\n }\n\n // 工具栏\n .tab-bar {\n display: flex;\n flex-shrink: 0;\n height: 38px;\n padding-left: 0;\n margin: 0;\n list-style: none;\n background-color: inherit;\n border: 1px solid $border-color;\n border-right: none;\n\n // 隐藏工具栏\n &.hide {\n display: none;\n }\n\n li {\n height: 100%;\n border-right: 1px solid $border-color;\n\n button {\n display: flex;\n flex-shrink: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 18px;\n font-size: 16px;\n color: #212529;\n cursor: pointer;\n user-select: none;\n background: $white;\n border: 0;\n border-radius: 0;\n outline: none;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out;\n\n // 禁用效果\n &.disabled {\n color: color.adjust($white, $blackness: 40%);\n pointer-events: none;\n cursor: default;\n background-color: color.adjust($white, $blackness: 6%);\n }\n\n // svg大小\n svg {\n width: 14px;\n height: 14px;\n fill: #212529;\n }\n }\n\n // 滚动的li\n &.scroll {\n // fix:滚动无法居中的bug,该css属性必须加上\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n button {\n position: relative;\n max-width: 180px;\n border-right: 1px solid $border-color;\n\n // 这一块是实现鼠标移入时才显示关闭按钮的样式\n &.hover {\n svg {\n position: absolute;\n top: 3px;\n right: 3px;\n display: none;\n }\n\n &:hover {\n svg {\n display: inline;\n }\n }\n }\n\n &::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 1px;\n content: '';\n background-color: $primary-color;\n border-radius: 0;\n transition: all 0.3s;\n }\n\n &:hover {\n color: $primary-color;\n\n &::after {\n width: 100%;\n }\n }\n\n &.active {\n color: $primary-color;\n\n &::after {\n width: 100%;\n }\n }\n\n // 按钮文本\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n // 关闭按钮\n svg {\n flex-shrink: 0;\n margin-left: 16px;\n font-size: 12px;\n border-radius: 50%;\n fill: #c2c2c2;\n\n &:hover {\n background-color: #ff5722;\n fill: #fff;\n }\n }\n }\n }\n\n // 非滚动的li\n &:not(.scroll) {\n button {\n // 鼠标移入的时候变暗5%\n &:hover {\n background-color: color.adjust($white, $blackness: 2%);\n }\n\n // 按下变亮10%\n &:active {\n background-color: color.adjust($white, $blackness: 4%);\n }\n }\n }\n }\n }\n\n // 面板容器\n .tab-body {\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-left: 0;\n margin: 0;\n overflow: hidden;\n list-style: none;\n background-color: inherit;\n\n li {\n position: absolute;\n top: -200%;\n flex: 1;\n width: 100%;\n background-color: inherit;\n\n &.active {\n position: unset;\n left: unset;\n }\n\n iframe {\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n // 遮罩层\n .mask {\n position: absolute;\n inset: 0;\n opacity: 1;\n transition: opacity 800ms;\n\n .mask-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background-color: #fff;\n }\n }\n }\n }\n}\n",".quicktab {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 222px;\n background-color: #fff;\n}\n.quicktab *,\n.quicktab ::after,\n.quicktab ::before {\n box-sizing: border-box;\n}\n.quicktab[class*=pen-] iframe {\n pointer-events: none;\n user-select: none;\n}\n.quicktab .tab-bar {\n display: flex;\n flex-shrink: 0;\n height: 38px;\n padding-left: 0;\n margin: 0;\n list-style: none;\n background-color: inherit;\n border: 1px solid #f5f5f5;\n border-right: none;\n}\n.quicktab .tab-bar.hide {\n display: none;\n}\n.quicktab .tab-bar li {\n height: 100%;\n border-right: 1px solid #f5f5f5;\n}\n.quicktab .tab-bar li button {\n display: flex;\n flex-shrink: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 18px;\n font-size: 16px;\n color: #212529;\n cursor: pointer;\n user-select: none;\n background: #fff;\n border: 0;\n border-radius: 0;\n outline: none;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n}\n.quicktab .tab-bar li button.disabled {\n color: #b6b6b6;\n pointer-events: none;\n cursor: default;\n background-color: #f1f1f1;\n}\n.quicktab .tab-bar li button svg {\n width: 14px;\n height: 14px;\n fill: #212529;\n}\n.quicktab .tab-bar li.scroll {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.quicktab .tab-bar li.scroll::-webkit-scrollbar {\n display: none;\n}\n.quicktab .tab-bar li.scroll button {\n position: relative;\n max-width: 180px;\n border-right: 1px solid #f5f5f5;\n}\n.quicktab .tab-bar li.scroll button.hover svg {\n position: absolute;\n top: 3px;\n right: 3px;\n display: none;\n}\n.quicktab .tab-bar li.scroll button.hover:hover svg {\n display: inline;\n}\n.quicktab .tab-bar li.scroll button::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 1px;\n content: \"\";\n background-color: #7431fa;\n border-radius: 0;\n transition: all 0.3s;\n}\n.quicktab .tab-bar li.scroll button:hover {\n color: #7431fa;\n}\n.quicktab .tab-bar li.scroll button:hover::after {\n width: 100%;\n}\n.quicktab .tab-bar li.scroll button.active {\n color: #7431fa;\n}\n.quicktab .tab-bar li.scroll button.active::after {\n width: 100%;\n}\n.quicktab .tab-bar li.scroll button span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.quicktab .tab-bar li.scroll button svg {\n flex-shrink: 0;\n margin-left: 16px;\n font-size: 12px;\n border-radius: 50%;\n fill: #c2c2c2;\n}\n.quicktab .tab-bar li.scroll button svg:hover {\n background-color: #ff5722;\n fill: #fff;\n}\n.quicktab .tab-bar li:not(.scroll) button:hover {\n background-color: #fafafa;\n}\n.quicktab .tab-bar li:not(.scroll) button:active {\n background-color: whitesmoke;\n}\n.quicktab .tab-body {\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-left: 0;\n margin: 0;\n overflow: hidden;\n list-style: none;\n background-color: inherit;\n}\n.quicktab .tab-body li {\n position: absolute;\n top: -200%;\n flex: 1;\n width: 100%;\n background-color: inherit;\n}\n.quicktab .tab-body li.active {\n position: unset;\n left: unset;\n}\n.quicktab .tab-body li iframe {\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n}\n.quicktab .tab-body li .mask {\n position: absolute;\n inset: 0;\n opacity: 1;\n transition: opacity 800ms;\n}\n.quicktab .tab-body li .mask .mask-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n\n.quicktab-list-group {\n position: fixed;\n display: none;\n flex-direction: column;\n width: 120px;\n max-height: 320px;\n padding: 0;\n margin: 0;\n overflow: hidden;\n overflow-y: auto;\n list-style: none;\n background-color: #fff;\n border-radius: 0;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n}\n.quicktab-list-group.active {\n display: flex;\n}\n.quicktab-list-group li {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 12px;\n font-size: 14px;\n font-weight: 400;\n color: #212529;\n cursor: pointer;\n user-select: none;\n}\n.quicktab-list-group li.separator {\n height: 0;\n padding: 0;\n margin: 0.35em 0;\n overflow: hidden;\n border-top: 1px solid #e6e6e6;\n}\n.quicktab-list-group li.separator:last-child {\n display: none;\n}\n.quicktab-list-group li:hover, .quicktab-list-group li:focus {\n color: #7431fa;\n background-color: #f8f9fa;\n}\n.quicktab-list-group li.active, .quicktab-list-group li:active {\n color: #fff;\n background-color: #7431fa;\n}\n.quicktab-list-group li > span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.quicktab-loaders {\n position: relative;\n box-sizing: border-box;\n width: 64px;\n height: 64px;\n color: #7431fa;\n}\n.quicktab-loaders > div {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n display: inline-block;\n float: none;\n width: 64px;\n height: 64px;\n background-color: currentcolor;\n border: 0 solid currentcolor;\n border-radius: 100%;\n opacity: 0;\n animation: ball-scale-multiple 1s 0s linear infinite;\n}\n.quicktab-loaders > div:nth-child(2) {\n animation-delay: 0.2s;\n}\n.quicktab-loaders > div:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n@keyframes ball-scale-multiple {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 5% {\n opacity: 0.75;\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}\n.quicktab-dropdown {\n position: fixed;\n display: none;\n width: 320px;\n max-width: 100%;\n font-size: 14px;\n background-color: #fff;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n}\n.quicktab-dropdown *:focus {\n outline: none;\n}\n.quicktab-dropdown.active {\n display: inline-block;\n}\n.quicktab-dropdown .header {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid #7431fa;\n}\n.quicktab-dropdown .header svg {\n width: 16px;\n height: 16px;\n margin-right: 10px;\n}\n.quicktab-dropdown .header input {\n flex-grow: 1;\n appearance: none;\n border: none;\n outline: none;\n}\n.quicktab-dropdown .body {\n max-height: 300px;\n overflow-y: auto;\n}\n.quicktab-dropdown .body .empty {\n display: none;\n padding: 12px;\n text-align: center;\n}\n.quicktab-dropdown .body .highlighted {\n font-weight: bold;\n background-color: #ff0;\n}\n.quicktab-dropdown .body .icon-wrapper {\n box-sizing: border-box;\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n}\n.quicktab-dropdown .body .icon-wrapper svg {\n width: 16px;\n height: 16px;\n fill: #212529;\n}\n.quicktab-dropdown .body .icon-wrapper:hover {\n background-color: #dbdbdb;\n}\n.quicktab-dropdown .body .icon-wrapper:focus {\n border: 2px solid #7431fa;\n}\n.quicktab-dropdown .body .sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n padding: 14px 16px;\n font-size: 14px;\n background-color: #fff;\n}\n.quicktab-dropdown .body .sticky.has-icon {\n cursor: pointer;\n}\n.quicktab-dropdown .body .sticky.has-icon .icon-wrapper {\n display: flex;\n}\n.quicktab-dropdown .body .sticky .subheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n user-select: none;\n}\n.quicktab-dropdown .body .sticky .subheader .subheader-text {\n flex-grow: 1;\n min-width: 0;\n margin-right: 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.quicktab-dropdown .body .section {\n padding: 0;\n margin: 0;\n list-style-type: none;\n}\n.quicktab-dropdown .body .section li {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px;\n cursor: default;\n user-select: none;\n}\n.quicktab-dropdown .body .section li .details {\n flex-grow: 1;\n min-width: 0;\n margin-right: 8px;\n font-size: 14px;\n}\n.quicktab-dropdown .body .section li .details p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.quicktab-dropdown .body .section li .details p:first-child {\n font-weight: 400;\n}\n.quicktab-dropdown .body .section li .details p:last-child {\n display: flex;\n align-items: center;\n margin-top: 6px;\n font-size: 90%;\n font-weight: lighter;\n}\n.quicktab-dropdown .body .section li .details p:last-child .dot {\n margin: 0 8px;\n font-weight: 800;\n}\n.quicktab-dropdown .body .section li .details p:last-child .url {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.quicktab-dropdown .body .section li:hover {\n background-color: #ededed;\n}\n.quicktab-dropdown .body .section li:hover .icon-wrapper {\n display: flex;\n}\n.quicktab-dropdown .body .section li.active {\n background-color: #e4e4e4;\n}\n.quicktab-dropdown .body .section li.active .icon-wrapper {\n display: flex;\n}\n\n/*# sourceMappingURL=quicktab.css.map */\n","$blue: #0d6efd !default;\n$white: #fff !default;\n$border-color: #f5f5f5 !default;\n$primary-color: #7431fa !default;\n",".quicktab-list-group {\n position: fixed;\n display: none;\n flex-direction: column;\n width: 120px;\n max-height: 320px;\n padding: 0;\n margin: 0;\n overflow: hidden;\n overflow-y: auto;\n list-style: none;\n background-color: #fff;\n border-radius: 0;\n box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);\n\n &.active {\n display: flex;\n }\n\n li {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 12px;\n font-size: 14px;\n font-weight: 400;\n color: #212529;\n cursor: pointer;\n user-select: none;\n\n // 分割线\n &.separator {\n height: 0;\n padding: 0;\n margin: 0.35em 0;\n overflow: hidden;\n border-top: 1px solid #e6e6e6;\n\n // 最后一个分割线隐藏\n &:last-child {\n display: none;\n }\n }\n\n &:hover,\n &:focus {\n color: $primary-color;\n background-color: #f8f9fa;\n }\n\n &.active,\n &:active {\n color: #fff;\n background-color: $primary-color;\n }\n\n > span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n}\n",".quicktab-loaders {\n position: relative;\n box-sizing: border-box;\n width: 64px;\n height: 64px;\n color: $primary-color;\n\n > div {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n display: inline-block;\n float: none;\n width: 64px;\n height: 64px;\n background-color: currentcolor;\n border: 0 solid currentcolor;\n border-radius: 100%;\n opacity: 0;\n animation: ball-scale-multiple 1s 0s linear infinite;\n\n &:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n &:nth-child(4) {\n animation-delay: 0.4s;\n }\n }\n}\n\n@keyframes ball-scale-multiple {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n\n 5% {\n opacity: 0.75;\n }\n\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}\n","@use 'sass:color';\n\n.quicktab-dropdown {\n *:focus {\n outline: none;\n }\n\n position: fixed;\n display: none;\n width: 320px;\n max-width: 100%;\n font-size: 14px;\n background-color: #fff;\n box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);\n\n &.active {\n display: inline-block;\n }\n\n .header {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid $primary-color;\n\n svg {\n width: 16px;\n height: 16px;\n margin-right: 10px;\n }\n\n input {\n flex-grow: 1;\n appearance: none;\n border: none;\n outline: none;\n }\n }\n\n .body {\n max-height: 300px;\n overflow-y: auto;\n\n $background: #ededed;\n\n // 两个都没有结果的时候\n .empty {\n display: none;\n padding: 12px;\n text-align: center;\n }\n\n // 搜索关键词高亮\n .highlighted {\n font-weight: bold;\n background-color: #ff0;\n }\n\n // 图标容器\n .icon-wrapper {\n box-sizing: border-box;\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n\n svg {\n width: 16px;\n height: 16px;\n fill: #212529;\n }\n\n &:hover {\n background-color: #dbdbdb;\n }\n\n &:focus {\n border: 2px solid $primary-color;\n }\n }\n\n .sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n padding: 14px 16px;\n font-size: 14px;\n background-color: #fff;\n\n &.has-icon {\n cursor: pointer;\n\n .icon-wrapper {\n display: flex;\n }\n }\n\n .subheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n user-select: none;\n\n .subheader-text {\n flex-grow: 1;\n min-width: 0;\n margin-right: 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n\n .section {\n padding: 0;\n margin: 0;\n list-style-type: none;\n\n li {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px;\n cursor: default;\n user-select: none;\n\n .details {\n flex-grow: 1;\n min-width: 0;\n margin-right: 8px;\n font-size: 14px;\n\n p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:first-child {\n font-weight: 400;\n }\n\n &:last-child {\n display: flex;\n align-items: center;\n margin-top: 6px;\n font-size: 90%;\n font-weight: lighter;\n\n .dot {\n margin: 0 8px;\n font-weight: 800;\n }\n\n .url {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n }\n\n &:hover {\n background-color: $background;\n\n .icon-wrapper {\n display: flex;\n }\n }\n\n &.active {\n background-color: color.adjust($background, $blackness: 4%);\n\n .icon-wrapper {\n display: flex;\n }\n }\n }\n }\n }\n}\n"]}