meri-design-dev/custom/theme/Drawer.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-loading16px
  display: inline-block
  width: 100%
  height: 100%
  line-height: 100%
  text-align: center

.p-loading16px .p-loading16px-line
  width: 100%
  height: 100%
  min-width: 12px
  min-height: 12px
  animation: loading16px .5s linear infinite

@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
.slideRightLeft-enter-active
  animation: slideInRight .3s ease-out

.slideRightLeft-leave-active
  animation: slideOutLeft .3s ease-in

@keyframes slideInRight
  from
    opacity: 0
    transform: translate3d(100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes slideInRight
  from
    opacity: 0
    transform: translate3d(100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes slideInRight
  from
    opacity: 0
    transform: translate3d(100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes slideInRight
  from
    opacity: 0
    transform: translate3d(100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes slideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    visibility: hidden
    transform: translate3d(100%,0,0)
@keyframes slideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    visibility: hidden
    transform: translate3d(100%,0,0)
@keyframes slideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    visibility: hidden
    transform: translate3d(100%,0,0)
@keyframes slideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    visibility: hidden
    transform: translate3d(100%,0,0)
.p-drawer-box
  position: fixed
  right: 0
  top: 0
  z-index: 3000
  display: block
  width: 100%
  height: 100%
  transition: right .3s

.p-drawer-shadow
  position: absolute
  top: 0
  right: 0
  z-index: 2999
  width: 100%
  height: 100%
  opacity: 0

.p-drawer-shadow-event
  pointer-events: none

.p-drawer
  outline: none
  position: absolute
  right: 0
  top: 0
  background-color: $theme
  box-shadow: $box-shadow-bottom
  min-width: 304px
  max-width: 680px
  height: 100%
  font-size: 0
  z-index: 3000

.p-drawer-title
  display: flex
  justify-content: space-between
  align-items: center
  position: relative
  padding-left: 32px
  padding-right: 32px
  border-bottom: 1px solid $grey-300
  width: 100%
  height: 56px

.p-drawer-title .p-drawer-title-content
  width: calc(100% - 16px)
  font-size: 0

.p-drawer-title .p-drawer-title-icon svg
  width: 16px
  height: 16px
  cursor: pointer

.p-drawer-title .p-drawer-title-icon svg:hover path
  fill: $blue-500
  transition: fill .3s

.p-drawer-content
  width: 100%
  min-width: 304px
  max-width: 680px
  height: calc(100% - 56px)
  overflow-x: hidden
  overflow-y: auto

.p-drawer-content .p-drawer-content-loading
  padding: 16px
  width: 100%
  text-align: center

.p-drawer-content .p-drawer-content-loading svg
  width: 16px
  vertical-align: middle

.p-drawer-content .p-drawer-content-loading span
  vertical-align: middle
  color: $grey-600
  font-size: 14px

.p-drawer-content-bottom
  height: calc(100% - 132px)

.p-drawer-handle
  padding: 24px 32px 20px
  background-color: $theme
  width: 100%

.p-drawer-handle-bottom
  position: absolute
  right: 0
  bottom: 0
  box-shadow: $box-shadow-top

.p-drawer-loading
  position: absolute
  left: 0
  top: 0
  background-color: rgba(255,255,255,0.8)
  width: 100%
  height: 100%
  z-index: 11

.p-drawer-loading .p-drawer-loading-svg
  margin: 50% auto 0
  width: 40px
  height: 40px

.p-loading16px-drawer
  color: $grey-400