@vue/ui/src/style/base.styl

UI components used in the vuejs organization apps

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i')

@import "./imports"
@import "./animation"
@import "./tooltip"

html
  background $vue-ui-white

body
  font-size 16px
  font-family 'Roboto', 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color $vue-ui-gray-800
  margin 0

.vue-ui-dark-mode
  color $vue-ui-white
  background $vue-ui-black
  body
    color @color

.vue-ui-high-contrast
  background black

hr
  border none
  height 1px
  background $vue-ui-primary-100

a
  color $vue-ui-primary-500
  text-decoration none
  .vue-ui-icon
    svg
      fill @color

h1, h2, h3, h4, h5, h6
  font-weight 300
  margin 24px 0 8px
  &:first-child
    margin-top 0

h1
  font-size 42px

h2
  font-size 32px

h3
  font-size 26px

h4
  font-size 22px

h5
  font-size 18px

h6
  font-size 16px

p
  margin 0 0 8px

ul
  margin 4px 0

.vue-ui-no-scroll
  overflow hidden

.vue-ui-spacer
  flex auto 1 1 !important
  width 0
  height 0

.vue-ui-empty
  color rgba($vue-ui-gray-800, .5)
  padding 24px
  text-align center
  box-sizing border-box
  .vue-ui-icon
    svg
      fill @color
  .vue-ui-dark-mode &
    color rgba($vue-ui-white, .5)

.vue-ui-text
  &.banner
    padding 12px
    display flex
    align-items center
    border-radius $br
    > .vue-ui-icon
      flex auto 0 0
      &:first-child
        margin-right 10px
  &.primary
    vue-ui-text-colors($vue-ui-primary-500)
  &.accent
    vue-ui-text-colors($vue-ui-accent-500)
  &.danger
    vue-ui-text-colors($vue-ui-danger-500)
  &.warning
    vue-ui-text-colors($vue-ui-warning-500)
  &.info
    vue-ui-text-colors($vue-ui-info-500)
  &.success
    vue-ui-text-colors($vue-ui-primary-500)

.vue-ui-grid
  display grid
  &.default-gap
    grid-gap 12px
  &.big-gap
    grid-gap 24px
  for n in (1..10)
    &.col-{n}
      grid-template-columns repeat(n, 1fr)

    .span-{n}
      grid-column span n

::-webkit-scrollbar
  width 10px
  height @width
::-webkit-scrollbar-track-piece
  background transparent
::-webkit-scrollbar-track:hover
  background rgba($vue-ui-gray-600, .05)
  .vue-ui-dark-mode &
    background rgba($vue-ui-gray-600, .1)
::-webkit-scrollbar-thumb
  background-color $vue-ui-gray-300
  border 3px solid transparent
  background-clip padding-box
  border-radius 5px
  &:hover
    background-color $vue-ui-gray-600
  .vue-ui-dark-mode &
    background-color $vue-ui-gray-800
    &:hover
      background-color $vue-ui-gray-500

.vue-ui-dark-mode
  scrollbar-color $vue-ui-gray-800 $vue-ui-black

.vue-ui-high-contrast
  :focus
    outline cyan 2px solid !important

// Icon

.vue-ui-icon
  display inline-block
  width 18px
  height @width
  vertical-align bottom
  svg
    width 100%
    height 100%
    fill $vue-ui-gray-800
    pointer-events none

  .vue-ui-dark-mode &
    svg
      fill $vue-ui-white

  &.primary
    svg
      fill $vue-ui-primary-500
  &.accent
    svg
      fill $vue-ui-accent-500
  &.danger
    svg
      fill $vue-ui-danger-500
  &.warning
    svg
      fill $vue-ui-warning-500
  &.info
    svg
      fill $vue-ui-info-500
  &.success
    svg
      fill $vue-ui-primary-500

  &.top
    position relative
    top -.06rem

  // Size
  &.small
    width 12px
    height @width
  &.medium
    width 20px
    height @width
  &.big
    width 24px
    height @width
  &.large
    width 32px
    height @width
  &.huge
    width 42px
    height @width
  &.gigantic
    width 64px
    height @width

// Loading bar

colors($foreground, $background)
  background $background
  .bar
    background $foreground

.vue-ui-loading-bar
  height 3px
  position relative

  .bar
    height 100%

  colors($vue-ui-gray-800, $vue-ui-primary-100)
  .vue-ui-dark-mode &
    colors($vue-ui-gray-600, $vue-ui-gray-800)

  &.primary
    colors($vue-ui-primary-500, $vue-ui-primary-100)
    .vue-ui-dark-mode &
      colors($vue-ui-primary-500, $vue-ui-gray-800)

  &.accent
    colors($vue-ui-accent-500, $vue-ui-primary-100)
    .vue-ui-dark-mode &
      colors($vue-ui-accent-300, $vue-ui-gray-800)

  &.unknown
    .bar
      position absolute
      top 0
      animation bar-animation .8s infinite linear

  &.ghost
    height 0
    z-index 300
    background transparent
    .bar
      height 3px

@keyframes bar-animation
  0%
    left 0
    right 100%
  50%
    left 0
    right 0
  100%
    left 100%
    right 0

// Loading indicator

colors($color)
  border-color rgba($color, .1)
  border-right-color $color

.vue-ui-loading-indicator
  display flex
  &.inline
    display inline-flex
  flex-direction column
  box-center()

  > .animation
    animation rotating .7s linear infinite
    width 16px
    height @width
    border-radius 50%
    border transparent 2px solid
    colors($vue-ui-gray-800)
    .vue-ui-dark-mode &
      colors($vue-ui-gray-600)
  &.primary
    > .animation
      colors($vue-ui-primary-500)
  &.accent
    > .animation
      colors($vue-ui-accent-500)
      .vue-ui-dark-mode &
        colors($vue-ui-accent-300)
  &.small
    > .animation
      width 10px
      height @width
  &.big
    > .animation
      width 24px
      height @width
      border-width 3px

  .vue-ui-high-contrast &
    > .animation
      border-width 4px

  &.overlay
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 1
    > .animation
      margin-bottom 32px
    &:not(.transparent)
      background rgba($vue-ui-white, .95)
      .vue-ui-dark-mode &
        background rgba($vue-ui-gray-900, .95)
    &.fixed
      position fixed

@keyframes rotating
  0%
    transform rotate(0)
  100%
    transform rotate(360deg)