wekan/client/components/rules/rules.styl

.rules-list
  overflow:hidden
  overflow-y:scroll
  max-height: 400px
.rules-lists-item
  display: block
  position: relative
  overflow: auto
  p
  	display: inline-block
  	float: left
  	margin: revert

.rules-btns-group
  position: absolute
  right: 0
  top: 50%
  transform: translateY(-50%)
  button
  	margin: auto
.rules-add
  display: block
  overflow: auto
  margin-top: 15px
  margin-bottom: 5px
  input
  	display: inline-block
  	float: right
  	margin: auto
  	margin-right: 10px
  button
  	display: inline-block
  	float: right
  	margin: auto
.rules-back
  display: block
  overflow: auto
  margin-top: 15px
  margin-bottom: 5px
  button
    display: inline-block
    float: right
    margin: auto
    margin-right:14px
   
.flex
  display: -webkit-box
  display: -moz-box
  display: -webkit-flex
  display: -moz-flex
  display: -ms-flexbox
  display: flex



.triggers-content
  color: #727479
  background: #dedede
  .triggers-body
    display flex
    padding-top 15px
    height 100%

    .triggers-side-menu
      background-color: #f7f7f7
      border: 1px solid #f0f0f0
      border-radius: 4px
      height: intrinsic
      box-shadow: inset -1px -1px 3px rgba(0,0,0,.05)

      ul

        li
          margin: 0.1rem 0.2rem;
          width:50px
          height:50px
          text-align:center
          font-size: 25px
          position: relative
          
          i
            position: absolute;
            top: 50%;
            left: 50%;
            box-shadow: none
            transform: translate(-50%,-50%);


          &.active
            background #fff
            box-shadow 0 1px 2px rgba(0,0,0,0.15);

          &:hover
            background #fff
            box-shadow 0 1px 2px rgba(0,0,0,0.15);
          a
            @extends .flex
            padding: 1rem 0 1rem 1rem
            width: 100% - 5rem


            span
              font-size: 13px
    .triggers-main-body
      padding: 0.1em 1em
      width:100%
      .trigger-item
        overflow:auto
        padding:10px
        height:40px
        margin-bottom:5px
        border-radius: 3px
        position: relative
        background-color: white
        .trigger-content
            position:absolute
            top:50%
            transform: translateY(-50%)
            left:10px
            .trigger-text
              font-size: 16px
              display:inline-block
            .trigger-text.trigger-text-email
              margin-left: 5px;
              margin-top: 10px;
              margin-bottom: 10px;
            .trigger-dropdown
              display:inline-block
              select
                width:auto
                height:30px
                margin:0px
                margin-left:5px
              input
                display: inline-block
                width: 80px;
                margin: 0;
        .trigger-content-mail
          left:20px
          right:100px
        .trigger-button
          position:absolute
          top:50%
          transform: translateY(-50%)
          width:30px
          height:30px
          border: 1px solid #eee
          border-radius: 4px
          box-shadow: inset -1px -1px 3px rgba(0,0,0,.05)
          text-align:center
          font-size: 20px
          right:10px
          i
            position: absolute
            top: 50%
            left: 50%
            box-shadow: none
            transform: translate(-50%,-50%)
          &:hover, &.is-active
            box-shadow: 0 0 0 2px darken(white, 60%) inset
        .trigger-button.trigger-button-email
          top:30px
      .trigger-item.trigger-item-mail
        height:300px