summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_selectActionTable.scss
blob: fa17733374639ba9ab77c26855e6363d0e43e17a (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
.select-action-table-view {
	.svg-icon-wrapper {
		flex-direction: row;
		
		&::before {
			content:"";			
		}
		.svg-icon {
			margin-left: 5px;
			margin-right: 5px;
			width:16px;
			height:16px;
		}	
	}
	.dummy-icon {
		background-color: $white;
		fill: $white;
		.locked {
			fill: $white;
		}
	}

	.select-action-table-controllers {
		display: flex;
		.svg-icon-wrapper {
			&:hover {
				cursor: pointer;
			}
			&:first-child {
				margin-left: auto;
			}
		}
	}
	.select-action-table {
		display: flex;
		flex-direction: column;
		border-color: $light-gray;

		.select-action-table-headers {
			display: flex;
			background-color: $tlv-light-gray;
			border-color: inherit;						
			.select-action-table-header {
				@extend .body-1-medium;
				flex: 1;
				border-top: 1px solid;
				border-right: 1px solid;				
				border-color: inherit;
				padding: 8px 0 7px 20px;
				&:first-child {
					border-left: 1px solid;
					border-color: inherit;
				}
			}		
		}
		.select-action-table-row-wrapper {
			display: flex;
			flex-direction: row;			
    		margin-bottom: 14px;
			.svg-icon.trash-o {
				
				fill: $dark-gray;								
			}
			.svg-icon.error-circle {
				fill: $red;				
			}
			.svg-icon.check-circle {
				fill: $green;				
			}			
			.select-action-table-row {
				display: flex;
				flex: 1;
				border: 1px solid;
				border-color: $light-gray;
				&.has-error {
					border-color: $red;
				}
				.select-action-table-cell {
					flex: 1;
					border-right: 1px solid;
					border-color: $light-gray;
					@extend .body-1;
					.dropdown-multi-select {
						.form-group {
							.Select{
								&.is-open {
									border: 1px solid $blue;
								}
							}
						}
					}
					.form-group {
						margin: 0;						
						.Select-control {
							height:36px;
							border: none;
							.is-open {
								border-left-color: $blue;
								border-right-color: $blue;
							}
							.Select-value, .Select-placeholder, .Select-input {
								padding-left: 20px;
								padding-right: 50px;
								padding-top: 4px;
								
							}
							.Select-placeholder {
								color: $dark-gray;
							}
							.Select-arrow-zone {
								padding-right: 15px;
							}
						}											
					}
					&:last-child {
						border-right: none;
					}											
				}
				.Select-menu-outer {
						border-left: 1px solid $blue;
						border-right: 1px solid $blue;
						border-bottom: 1px solid $blue;
						overflow: auto;
						.Select-menu {																	
							display: inline-block;
							.Select-option {								
								width: 100%;
								display: inline-block;
								border-bottom: 1px solid $light-gray;																					
								&:hover {
									background-color: $blue;
									color: $white;
									&.is-focused {
										background-color: $blue;
									}
									&.is-focused {
										background-color: $blue;
									}
								}
								&.is-selected {
									background-color: transparent;
								}
								&.is-focused {
									background-color: transparent;
								}								
							}
						}	
					}
			}
		}
	}
}