meri-design-dev/custom/theme/SidebarCustom.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-sidebar-custom
  position: relative
  display: flex
  width: 100%
  height: 100%
  font-size: 0
  overflow: hidden

.p-sidebar-custom-col-resize
  cursor: col-resize

.p-sidebar-custom-col-resize > div
  pointer-events: none
  user-select: none

.p-sidebar-custom-col-resize .p-sidebar-left
  pointer-events: none

.p-sidebar-custom-normal .p-sidebar-custom-btn
  border-radius: 12px
  width: 24px
  height: 24px
  line-height: 24px
  transform: translateX(-12px)

.p-sidebar-custom-normal .p-sidebar-custom-btn svg
  width: 12px
  height: 12px

.p-sidebar-custom-large .p-sidebar-custom-btn
  border-radius: 14px
  width: 28px
  height: 28px
  line-height: 28px
  transform: translateX(-14px)

.p-sidebar-custom-large .p-sidebar-custom-btn svg
  width: 16px
  height: 16px

.p-sidebar-custom-line
  position: absolute
  left: 222px
  top: 0
  z-index: 11
  background-color: $blue-500
  width: 2px
  height: 100%
  pointer-events: none

.p-sidebar-custom-bar
  position: absolute
  top: 0
  z-index: 11
  width: 3px
  height: 100%

.p-sidebar-custom-bar-change-size
  cursor: col-resize

.p-sidebar-custom-bar-change-size:hover::before
  content: ''
  position: absolute
  top: 0
  right: 1px
  z-index: 11
  display: block
  background-color: $blue-500
  width: 2px
  height: 100%

.p-sidebar-custom-btn
  position: absolute
  top: 16px
  z-index: 12
  display: inline-block
  background-color: $theme
  border: 1px solid $grey-300
  box-shadow: $box-shadow-right
  overflow: hidden
  font-size: 0
  text-align: center
  cursor: pointer
  transition: background-color .3s,left .3s

.p-sidebar-custom-btn:hover
  background-color: $blue-500
  border-color: $blue-500

.p-sidebar-custom-btn:hover svg path
  fill: $white

.p-sidebar-custom-btn svg
  margin-top: -2px
  vertical-align: middle
  font-size: 0
  transition: transform .3s

.p-sidebar-custom-btn svg path
  transition: fill .3s

.p-sidebar-custom-btn-rotate svg
  transform: rotate(180deg)

.p-sidebar-left
  position: relative
  z-index: 10
  background-color: $grey-50
  border-right: 1px solid $grey-300
  width: 224px
  height: 100%
  overflow: auto
  transition: width .3s

.p-sidebar-right
  width: calc(100% - 224px)
  height: 100%
  overflow: auto
  transition: width .3s