Home Explore Help
Register Sign In
prc
/
plc-sim
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
plc-sim
/
client
/
node_modules
/
vuetify
/
lib
/
components
/
VWindow
/
VWindow.sass

VWindow.sass 1.4 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 
  1. @use './variables' as *
    2. 

  2. 

  3. .v-window
    4. 

  4.   overflow: hidden
    5. 

  5. 

  6.   &__container
    7. 

  7.     display: flex
    8. 

  8.     flex-direction: column
    9. 

  9.     height: inherit
    10. 

  10.     position: relative
    11. 

  11.     transition: $window-transition
    12. 

  12. 

  13.   &__controls
    14. 

  14.     position: absolute
    15. 

  15.     left: 0
    16. 

  16.     top: 0
    17. 

  17.     width: 100%
    18. 

  18.     height: 100%
    19. 

  19.     display: flex
    20. 

  20.     align-items: center
    21. 

  21.     justify-content: space-between
    22. 

  22.     padding: $window-controls-padding
    23. 

  23.     pointer-events: none
    24. 

  24. 

  25.     *
    26. 

  26.       pointer-events: auto
    27. 

  27. 

  28.   &--show-arrows-on-hover
    29. 

  29.     overflow: hidden
    30. 

  30. 

  31.     .v-window__left
    32. 

  32.       transform: translateX(-200%)
    33. 

  33. 

  34.     .v-window__right
    35. 

  35.       transform: translateX(200%)
    36. 

  36. 

  37.     &:hover
    38. 

  38.       .v-window__left,
    39. 

  39.       .v-window__right
    40. 

  40.         transform: translateX(0)
    41. 

  41. 

  42.   &-x-transition,
    43. 

  43.   &-x-reverse-transition,
    44. 

  44.   &-y-transition,
    45. 

  45.   &-y-reverse-transition
    46. 

  46.     &-enter-active,
    47. 

  47.     &-leave-active
    48. 

  48.       transition: $window-transition
    49. 

  49. 

  50.     &-leave-from,
    51. 

  51.     &-leave-to
    52. 

  52.       position: absolute !important
    53. 

  53.       top: 0
    54. 

  54.       width: 100%
    55. 

  55. 

  56.   &-x-transition
    57. 

  57.     &-enter-from
    58. 

  58.       transform: translateX(100%)
    59. 

  59. 

  60.     &-leave-to
    61. 

  61.       transform: translateX(-100%)
    62. 

  62. 

  63.   &-x-reverse-transition
    64. 

  64.     &-enter-from
    65. 

  65.       transform: translateX(-100%)
    66. 

  66. 

  67.     &-leave-to
    68. 

  68.       transform: translateX(100%)
    69. 

  69. 

  70.   &-y-transition
    71. 

  71.     &-enter-from
    72. 

  72.       transform: translateY(100%)
    73. 

  73. 

  74.     &-leave-to
    75. 

  75.       transform: translateY(-100%)
    76. 

  76. 

  77.   &-y-reverse-transition
    78. 

  78.     &-enter-from
    79. 

  79.       transform: translateY(-100%)
    80. 

  80. 

  81.     &-leave-to
    82. 

  82.       transform: translateY(100%)
    83.