UNPKG

4.17 kBtext/lessView Raw
1/******************************************************************************
2*
3* Copyright (c) 2017, the Perspective Authors.
4*
5* This file is part of the Perspective library, distributed under the terms of
6* the Apache License 2.0. The full license can be found in the LICENSE file.
7*
8*/
9
10@import "variables";
11
12:host {
13 display: none;
14 flex-direction: column;
15 max-height: 35%;
16 margin-top: 34px;
17 margin-bottom: 24px;
18 width: 100%;
19
20 flex: 0 0 auto !important;
21
22 * {
23 box-sizing: border-box;
24 }
25
26 .psp-computed-expression-widget__body {
27 margin-bottom: 0;
28 }
29
30 .psp-computed-expression-widget__container {
31 display: flex;
32 flex-direction: column;
33
34 &.row {
35 align-items: center;
36 flex-direction: row;
37 }
38
39 &:first-of-type {
40 margin-bottom: 0;
41 }
42 }
43
44 .psp-computed-expression-widget__action {
45 margin-bottom: 10px;
46
47 span#psp-computed-expression-widget-close {
48 color: #999;
49 display: flex;
50 font-family: var(--column-close--font-family, inherit);
51 font-size: 16px;
52 width: 20px;
53 min-width: 20px;
54 margin-top: -2px;
55 height: 0;
56
57 &:before {
58 font-feature-settings: "liga";
59 content: var(--column-close--before, "x");
60 }
61
62 &:hover {
63 cursor: pointer;
64 }
65 }
66
67 span#psp-computed-expression-widget-title {
68 display: flex;
69 font-size: 12px;
70 display: flex;
71 margin-left: 34px;
72 margin-top: 3px;
73 font-size: 12px;
74 color: var(--color, @darkgray);
75 }
76 }
77
78 .psp-computed-expression-widget__content {
79 align-items: center;
80 display: flex;
81 flex-direction: column;
82 margin-top: 5px;
83
84 &.psp-computed-expression-widget__content--absolute {
85 position: absolute;
86 }
87
88 &.psp-computed-expression-widget__content--nomargin {
89 margin-top: 0;
90 position: relative;
91 }
92 }
93
94 #psp-computed-expression-widget-actions {
95 display: flex;
96 justify-content: flex-end;
97 margin-left: 20px;
98 margin-top: 12px;
99 }
100
101 .psp-computed-expression-widget__label {
102 color: var(--color, darkgray);
103 font-size: 10px;
104 margin-top: 5px;
105 max-width: 100%;
106
107 &.psp-computed-expression-widget__error {
108 background-color: #cb4549;
109 box-sizing: border-box;
110 color: #fff !important;
111 display: none;
112 position: absolute;
113 z-index: 10000;
114 max-height: 75px;
115 padding: 10px;
116 overflow-x: hidden;
117 overflow-y: scroll;
118 top: 100%;
119 width: 100%;
120 word-break: break-word;
121 }
122 }
123
124 .psp-computed-expression-widget__button {
125 border-radius: 0;
126 border-bottom: 1px solid @border-color;
127 border-left: 0;
128 border-right: 0;
129 border-top: 0;
130 font-size: 12px;
131 margin-left: 6px;
132 padding: 2px 5px;
133
134 &:hover {
135 cursor: pointer;
136 }
137
138 &[disabled] {
139 background: @darkgray !important;
140 color: @lightgray !important;
141 cursor: not-allowed;
142 border-bottom-color: #000 !important;
143 opacity: 0.5;
144 }
145
146 &#psp-computed-expression-widget-button-remove {
147 background: #e76056;
148 border-bottom-color: #bf4d45;
149 color: #fff;
150 display: none;
151
152 &:active {
153 background: #bf4d45;
154 border-bottom-color: #9d3f39;
155 }
156 }
157
158 &#psp-computed-expression-widget-button-save {
159 background: #0171d2;
160 border-bottom-color: #0160b1;
161 color: #fff;
162 height: 22px;
163
164 &:active {
165 background: #0160b1;
166 border-bottom-color: #014986;
167 }
168 }
169 }
170}