aframe-inspector/src/style/components.styl

A visual inspector tool for A-Frame.

@import './lib';

propertyRowDefined() {
  .propertyRowDefined {
    {block}
  }
}

.components
  background-color $bg
  color $white
  height 100%
  overflow auto
  position fixed
  width 331px

div.vec2,
div.vec3,
div.vec4
  display inline

.vec2 input.number,
.vec3 input.number
  width 40px

.vec4 input.number
  width 34px

.collapsible-header
  align-items center
  display flex
  justify-content space-between
  .entityPrint
    color #fff

.collapsible-content
  padding 5px 0

.componentTitle span
  max-width 200px
  overflow hidden
  text-overflow ellipsis
  text-transform uppercase
  white-space nowrap
  color #fff
  font-weight 600
  vertical-align bottom !important

.collapsible .static
  background $bglight
  border-bottom 2px solid $bg
  box-sizing content-box
  cursor pointer
  height 16px
  padding 8px 10px 12px 10px
  vertical-align bottom
  font-size 13px
  &:hover
    background $bglighter
/*
.collapsible
  &.collapsed
    background-color $grayalt
    .static,
    .componentHeaderActions
      color #dedede
    &:hover
      background-color $grayhover
*/
.collapsible .menu
  text-align right

.collapsible .menuafter
  color #bbb
  content '\2807'
  font-size 12px
  padding 5px
  text-align right

.collapsible .static
  margin 0

.collapsible .static .collapse-button
  border 6px solid transparent
  float left
  height 0
  margin-right 10px
  margin-left 2px
  width 0

.collapsible.collapsed .static .collapse-button
  border-left-color $white
  margin-top 4px

.collapsible:not(.collapsed) .static .collapse-button
  border-top-color $white
  margin-top 7px

.propertyRow
  align-items center
  display flex
  font-size 13px
  min-height 30px
  padding 2px 15px

  .text
    cursor default
    display inline-block
    overflow hidden
    padding-right 10px
    text-overflow ellipsis
    vertical-align middle
    width 118px

  .map_value
    margin 0 0 0 5px
    width 68px

  .Select-control
    font-size 11px
    height 24px

  .Select-placeholder,
  .Select--single > .Select-control .Select-value
    line-height 19px

  .Select-input
    height 22px

  input[type=text],
  input[type=number],
  input.string,
  input.number
    background $bgdark
    color #1faaf2
    min-height 26px
    padding-bottom 1px
    padding-left 5px
    padding-right 5px
    padding-top 1px
    &:last-child
      padding-right 0

  input.string
    padding-left 8px
    box-sizing border-box
    width 165px

  input[type=text]:focus,
  input.string:focus
    box-shadow none

  .color_value
    margin 0 0 0 5px
    width 68px
    letter-spacing 1px

.propertyRowDefined .text
  color #FAFAFA
  font-weight 500

.components *
  vertical-align middle

span.subcomponent
  color #999
  float none !important
  margin-left 10px
  vertical-align top !important

#addComponentContainer
  align-items center
  display flex
  flex-direction column
  justify-content center
  padding 20px 10px
  background $bgdark

  #addComponent
    text-align left
    width 200px
    .select__control
      background #161616
      height 35px
      color $primary

  #addComponentHeader
    font-size 15px
    margin 5px 0 10px 0

  input[type=text]:focus
    box-shadow none

.Select-menu-outer .is-focused span
  color #fff

.component-title
  align-items center
  display flex

#componentEntityHeader
  .collapsible-header
    bottom 4px
    position relative
  .collapse-button
    display none
  .static
    height 13px
  .entityPrint
    font-size 15px
    padding-left 5px
  .entityName
    max-width 160px
    top 0
  .entityIcons
    color #FAFAFA

#mixinSelect
  width 160px

.propertyRow .texture
  display flex
  input
    margin-left 0
    width 120px

#componentEntityHeader .gltfIcon img
  top 0