@shzlx/ui-default 4.58.2

package/misc/immersive.styl

@@ -0,0 +1,23 @@
+.layout--immersive
+  #panel
+    background: #80b2d5 url('immersive-background.jpg') no-repeat
+    background-size: 1920px 1080px
+    background-size: cover
+    +retina()
+      background-image: url('immersive-background@2x.jpg')
+
+.immersive--content
+  color: $immersive-text-color
+
+  h1, h2, h3, h4, h5, h6
+    color: $immersive-header-color
+
++above(rupture.mobile-cutoff)
+  .immersive--center
+    width: 270px
+    margin: 0 auto
+
+.immersive--center
+  h1
+    text-align: center
+    margin: 2em 0

package/misc/nothing.styl

@@ -0,0 +1,13 @@
+.nothing-placeholder
+  padding: rem(80px 0)
+  text-align: center
+  font-size: rem($font-size-title)
+  color: #AAA
+
+  &.compact
+    padding: rem(20px 0)
+
+.nothing-icon
+  background: url(./puzzled_twd2.svg) no-repeat center center
+  height: 184px
+  margin-bottom: rem(20px)

package/misc/puzzled_twd2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 250"><style>.st0{opacity:.2;fill:url(#SVGID_1_)}.st1{fill:#e0e0e0}.st2{fill:url(#SVGID_2_)}</style><radialGradient id="SVGID_1_" cx="140.8" cy="234.58" r="60.43" gradientTransform="matrix(1 0 0 .07772 0 216.353)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#444344"/><stop offset="1" stop-color="#444344" stop-opacity="0"/></radialGradient><ellipse cx="140.8" cy="234.6" class="st0" rx="61.7" ry="4.1"/><path d="M229.6 125.5c-3.6-6.3-9.9-8.3-17.4-7.1 5.9-5 11.6-9.5 11.1-17.5-.4-9-7.4-11.8-15.1-13.8 4.1-6.6 5.4-13.4.8-19-5.4-6.8-12.9-7.8-20.4-4-9-8.5-10.4-9-19.8-7.4.4-18.4-5.1-23.5-19.3-20.7-5.5-1.4-9.6-3.6-13.2-3.1-8 1.2-15.6 3.8-24.5 6.1-3.7-4.3-9.2-6.6-16.1-4-5.8 2.1-12.2 3.4-17.9 6.1-2.1 1-3.6 4.8-4.2 7.5-.7 2.8-1.7 5.2-2.9 7.5v127.7c2.7-.1 5.5-.5 8.2-1 .1 1 .4 1.6.2 2.1-2.2 9.5-.8 14.3 5.1 18.1 6.4 3.9 10.9 3.2 18.8-2.7 2.6-2.1 4.9-5.3 9.2-4.1.3 3.6.2 7.4.8 10.7 1.3 7.3 7.4 13.5 14 14.6 7.4 1.1 11.9-3 15.5-8.8 1-1.5 1.9-3 3.2-4.6l2.8 3.7c5.9 6.5 11.8 8.5 18.3 6.1 6.4-2.5 9.1-7.7 8.8-17.1-.1-4-.7-8-1-13.5l8.5 8.7c8.5 7.9 20.1 5.2 24.4-5.9.6-1.8.7-4.1 1.9-5.3 5-5 5.4-11.1 4.7-17.3 15.2-6.1 17.4-10.2 13.6-25.5 4.8-4.8 5.3-10.9 1.9-16.5zM114.9 91c-2.3 2.9-6.6 3.3-9.5.9-2.9-2.3-3.4-6.6-1-9.5s6.6-3.3 9.5-.9c2.9 2.4 3.4 6.6 1 9.5zm64.2 48.6c-2.3 2.9-6.6 3.2-9.5.9s-3.4-6.6-1-9.5c2.3-2.9 6.6-3.3 9.5-.9 2.9 2.4 3.3 6.6 1 9.5z" class="st1"/><linearGradient id="SVGID_2_" x1="69.42" x2="69.42" y1="11.31" y2="240.82" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#BCBBBB"/><stop offset=".85" stop-color="#BCBBBB" stop-opacity=".15"/><stop offset="1" stop-color="#BCBBBB" stop-opacity="0"/></linearGradient><path d="M68.2 8.5h2.4v233h-2.4z" class="st2"/></svg>

package/misc/section.styl

@@ -0,0 +1,105 @@
+.immersive-section, .section
+  margin-bottom: rem($section-margin)
+
+  +mobile()
+    margin-bottom: rem(10px)
+
+  &::before, &::after
+    content: ' '
+    display: table
+
+  &.side
+    font-size: rem($font-size-secondary)
+
+.section
+  background: $section-bg-color
+  box-shadow: $section-shadow
+
+  +mobile()
+    box-shadow: none
+    margin-left: - rem($grid-padding)
+    margin-right: - rem($grid-padding)
+
+.hasjs .section
+  +above(rupture.mobile-cutoff)
+    transform: translateY(rem(30px))
+    opacity: 0
+
+    &.visible
+      transform: none
+      opacity: 1
+
+.section__header
+  padding: rem($section-gap-v) rem($section-gap-h) 0
+  position: relative
+
+  &:last-child
+    padding-bottom: rem($section-gap-v)
+
+  +.section__body.no-padding:last-child
+    padding-top: rem($section-gap-v) !important
+
+.section__body
+  padding: 0.7em rem($section-gap-h)
+
+  &.no-padding
+    padding: 0 !important
+
+.section > .section__body
+  &:first-child
+    padding-top: rem($section-gap-v)
+
+  &:last-child
+    padding-bottom: rem($section-gap-v)
+
+.section__footer
+  border-top: 1px solid $table-border-color
+  padding: rem($section-gap-h)
+
+.section__title
+  color: $section-title-color
+
+.section__header .section__title
+  line-height: $form-control-height
+
+h1.section__title
+  font-size: 1.4rem
+  margin-bottom: rem(12px)
+
+h2.section__title
+  font-size: 1.2rem
+  margin-bottom: rem(10px)
+
+h3.section__title
+  font-size: 1rem
+  margin-bottom: rem(8px)
+
+.section__header .section__title
+  margin-bottom: 0
+
+.section__tools
+  position: absolute
+  right: rem($section-gap-h)
+  top: rem($section-gap-v)
+  font-size: rem($font-size-secondary)
+
+  .tool-button
+    appearance: none
+    border: 0
+    background: none
+    color: $section-toolbtn-color
+    margin-left: rem(5px)
+    padding: rem(0 5px)
+    line-height: rem(24px)
+    font-size: rem($font-size-small)
+    outline: 0
+
+    &:hover
+      color: $section-toolbtn-color-hover
+
+.section__list__item
+  padding: rem($section-list-v $section-gap-h)
+  border-bottom: 1px solid $table-border-color
+
+  &:last-child
+    border-bottom: 0

package/misc/slideout.styl

@@ -0,0 +1,46 @@
+html
+  height: 100%
+
+body
+  width: 100%
+
+body, #panel
+  min-height: 100%
+  min-height: 100vh
+
+.slideout-panel
+  position: relative
+  z-index: 1
+  transition: transform .3s ease
+
+.slideout-overlay
+  display: none
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  z-index: 99999
+
++mobile()
+  .nav.slideout-menu
+    position: fixed
+    top: 0
+    bottom: 0
+    right: 0
+    left: auto
+    z-index: 0
+    width: 200px
+    overflow-y: auto
+    -webkit-overflow-scrolling: touch
+    display: none
+    height: auto
+    min-height: 100vh
+
+  .slideout-open,
+  .slideout-open body,
+  .slideout-open .slideout-panel
+    overflow: hidden
+
+  .slideout-open .slideout-menu
+    display: block !important

package/misc/structure.styl

@@ -0,0 +1,158 @@
+.hasjs .hasjs--hide
+  display: none
+
+.nojs .nojs--hide
+  display: none
+
+.non-scratchpad--hide
+  display: none
+
+.mode--scratchpad .non-scratchpad--hide
+  display: block
+
+.scratchpad--hide
+  display: block
+
+.mode--scratchpad .scratchpad--hide
+  display: none
+
+.mobile--hide
+  +mobile()
+    display: none
+
+::-webkit-scrollbar
+  width: 8px;
+  height: 8px;
+
+::-webkit-scrollbar-track
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+  border-radius: 8px;
+
+::-webkit-scrollbar-thumb
+  border-radius: 8px;
+  background: #bbb;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
+
+html
+  overflow-y: overlay;
+
+.main
+  padding: rem(55px 0)
+  flex: 1
+
+  +above(rupture.desktop-cutoff)
+    padding: 4rem 0rem
+
+  +mobile()
+    padding: 0
+
+.monaco-editor .main
+  padding: 0
+
+.v-center
+  vertical-align: middle
+
+// Media Object
+// Heavily borrowed from http://csswizardry.com/2013/05/the-flag-object/
+
+.media
+  display: table
+  width: 100%
+
+.media__left, .media__right, .media__body
+  display: table-cell
+  vertical-align: middle
+
+  &.top
+    vertical-align: top
+
+  &.bottom
+    vertical-align: bottom
+
+.media__left
+  padding-right: rem(10px)
+
+.media__right
+  padding-left: rem(10px)
+
+.media__left, .media__right
+  img
+    display: block
+
+.media__body
+  width: 100%
+
+.display-hidden
+  display: none
+
+// Number Box Object
+.numbox
+  text-align: center
+
+.numbox__num.large
+  font-size: 1.6rem
+
+.numbox__num.medium
+  font-size: 1.3rem
+
+.numbox__text
+  font-size: rem($font-size-small)
+  margin-top: rem(10px)
+  color: #AAA
+
+// Balancer: horizontally equally distributed columns
+.balancer
+  width: 100%
+  display: table
+  table-layout: fixed
+
+.balancer__body
+  display: table-cell
+  vertical-align: middle
+
+  &.top
+    vertical-align: top
+
+  &.bottom
+    vertical-align: bottom
+
+// Flexbox helper
+.flex-row
+  display: flex
+  flex-direction: row
+
+.flex-col
+  display: flex
+  flex-direction: column
+
+.flex-wrap
+  flex-wrap: wrap
+
+.flex-fill
+  flex: 1
+  min-width: 0
+  min-height: 0
+
+.flex-main-start
+  justify-content: flex-start
+
+.flex-main-end
+  justify-content: flex-end
+
+.flex-main-center
+  justify-content: center
+
+.flex-cross-start
+  align-items: flex-start
+
+.flex-cross-end
+  align-items: flex-end
+
+.flex-cross-center
+  align-items: center
+
+.flex-cross-stretch
+  align-items: stretch
+  
+.overflow-hidden-horizontal
+  overflow-x: hidden

package/misc/textalign.styl

@@ -0,0 +1,11 @@
+.text-center
+  text-align: center
+
+.text-right
+  text-align: right
+
+.text-left
+  text-align: left
+
+.text-justify
+  text-align: justify