app/assets/sass/_plan-node.scss


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

.plan-node {
   text-decoration: none;
   color: $text-color;
   display: inline-block;
   transition: all 0.1s;
   position: relative;
   padding: $padding-base $padding-lg;
	background-color: #fff;
	font-size: $font-size-sm;
	border: 1px solid $line-color;
   margin-bottom: 4px;
	border-radius: $border-radius-base;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
   width: 240px;
   box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);

   header {
      margin-bottom: $padding-base;
      overflow: hidden;
      cursor: pointer;

      &:hover {
         background-color: $gray-lightest;
      }

      h4 {
         font-size: $font-size-base;
         float: left;
         font-weight: 600;
      }

      .node-duration {
         float: right;
         margin-left: $padding-lg;
         font-size: $font-size-base;
      }
   }

   .prop-list {
      float: left;
      text-align: left;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-all;
      margin-top: $padding-lg;
      margin-bottom: $padding-base;
   }

   .relation-name {
     text-align: left;
   }

   .planner-estimate {
      border-top: 1px solid $line-color;
   	text-align: left;
      padding-top: $padding-sm;
   	margin-top: $padding-base;
   	width: 100%;
   }

   .tags {
      margin-top: $padding-base;
      text-align: left;

      span {
         display: inline-block;
         background-color: $alert-color;
         color: #fff;
         font-size: round($font-size-sm * 0.8);
         font-weight: 600;
         margin-right: $padding-sm;
         margin-bottom: $padding-sm;
         padding: $padding-sm;
         border-radius: $border-radius-base;
         line-height: 1.1;
      }
   }

   //hovers
   &:hover {
     border-color: $highlight-color;
   }

   .node-description {
      text-align: left;
      font-style: italic;
      padding-top: $padding-lg;
      word-break: normal;

      .node-type {
         font-weight: 600;
         background-color: $blue;
         color: #fff;
         padding: 0 $padding-base;
      }
   }

   .btn-default {
      border: 0;
   }
}

.node-bar-container {
   height: 5px;
   margin-top: $padding-lg;
   margin-bottom: $padding-sm;
   border-radius: $border-radius-lg;
   background-color: $gray-light;
   position: relative;

   .node-bar {
      border-radius: $border-radius-lg;
      height: 100%;
      text-align: left;
      position: absolute;
      left: 0;
      top: 0;
   }
}

.node-bar-label {
   text-align: left;
   display: block;
}

.expanded {
   width: 400px !important;
   overflow: visible !important;
   padding: $padding-base $padding-lg !important;
   .tags span {
      margin-right: $padding-sm !important;
   }
}

.compact {
   width: 140px;
}

.dot {
   width: 30px;
   overflow: hidden;
   padding: $padding-sm;

   .tags span {
      margin-right: 1px;
   }

   .node-bar-container {
      margin-top: $padding-sm;
   }
}