summaryrefslogtreecommitdiffstats
path: root/client/components/rules/rules.styl
blob: 45ce4003ac7422af0963fce72b23f75fe175c66e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
.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
.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