quicktab/dist/css/quicktab.min.css.map

Multi IFrame tab plugin. operate IFrame like operating browser tabs

{"version":3,"sources":["../../src/scss/_tab.scss","dist/css/quicktab.css","../../src/scss/_list-group.scss","../../src/scss/_loaders.scss","../../src/scss/_dropdown.scss"],"names":[],"mappings":"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","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  -webkit-user-select: none;\n  -moz-user-select: 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  -webkit-user-select: none;\n  -moz-user-select: none;\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  -webkit-user-select: none;\n  -moz-user-select: none;\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  -webkit-appearance: none;\n  -moz-appearance: none;\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: -webkit-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  -webkit-user-select: none;\n  -moz-user-select: none;\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  -webkit-user-select: none;\n  -moz-user-select: none;\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 */",".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"]}