1
+ #app {
2
+ height : 100vh ;
3
+
4
+ main {
5
+ @include flex (row , flex-start , start );
6
+ width : 100vw ;
7
+ height : 100vh ;
8
+ min-height : calc (100vh - 80px );
9
+ border-bottom : 1px solid #0000008f ;
10
+ background-color : $primary-color-dark ;
11
+ position : relative ;
12
+
13
+ .content {
14
+ @include flex (column , flex-start , start );
15
+ width : calc (100% - 300px );
16
+ height : 100% ;
17
+
18
+ @include m-screen (1200px ) {
19
+ width : 100% ;
20
+ }
21
+
22
+ .search {
23
+ @include flex (row , center , start );
24
+ height : 50px ;
25
+ width : 62% ;
26
+ padding : 20px 30px 20px 80px ;
27
+
28
+ .box {
29
+ @include flex (row , cen, start );
30
+ height : 50px ;
31
+ border-radius : 25px ;
32
+ width : calc (100% - 40px );
33
+ background-color : $secondary-color-dark ;
34
+
35
+ input {
36
+ color : $font-color-dark-2 ;
37
+ width : 94% ;
38
+ height : 100% ;
39
+ padding-inline : 15px ;
40
+ outline : none ;
41
+ background : transparent ;
42
+ border : none ;
43
+ font-size : medium
44
+ }
45
+
46
+ button {
47
+ @include flex-center ;
48
+ height : 100% ;
49
+ background-color : transparent ;
50
+ border : none ;
51
+
52
+ img {
53
+ height : 55% ;
54
+ object-fit : cover ;
55
+ opacity : 0.8 ;
56
+ filter : invert (100% )
57
+ }
58
+ }
59
+ }
60
+ }
61
+
62
+ >.box {
63
+ @include flex (column , flex-start , start );
64
+ padding : 50px 0px 0px 100px ;
65
+ width : 70% ;
66
+ height : 100% ;
67
+
68
+ @include m-screen (1400px ) {
69
+ @include flex (column , center , center );
70
+ padding : 50px 0px 0px 0px ;
71
+ width : 100% ;
72
+ }
73
+
74
+ .resultado {
75
+ @include flex (column , center , end );
76
+ text-align : right ;
77
+ width : 80% ;
78
+ color : $secondary-color-orange ;
79
+ margin-right : 10px ;
80
+ margin-bottom : 10px ;
81
+ height : 100% ;
82
+ font-size : small ;
83
+ font-weight : 200 ;
84
+ @include font-inter (600 );
85
+ }
86
+
87
+
88
+ .vaga {
89
+ @include flex (column , flex-start , start );
90
+ width : 80% ;
91
+ height : 90px ;
92
+ margin-bottom : 10px ;
93
+
94
+ @include m-screen (1400px ) {
95
+ width : 70% ;
96
+ }
97
+
98
+ @include m-screen (800px ) {
99
+ width : 90% ;
100
+ }
101
+
102
+ a {
103
+ @include flex (row , flex-start , start );
104
+ width : 100% ;
105
+ height : 100% ;
106
+ background-color : $secondary-color-dark ;
107
+ padding : 15px ;
108
+ border-radius : 5px ;
109
+ text-decoration : none ;
110
+ color : $font-color-dark ;
111
+
112
+ img {
113
+ height : 60px ;
114
+ width : 60px ;
115
+ object-fit : cover ;
116
+ border-radius : 50% ;
117
+ margin-right : 20px ;
118
+ }
119
+
120
+ .infoVaga {
121
+ @include flex (row , space-between , start );
122
+ width : calc (100% - 60px );
123
+ height : 100% ;
124
+
125
+ .who {
126
+ color : $primary-color-orange ;
127
+ margin-right : 10px ;
128
+ margin-bottom : 10px ;
129
+ }
130
+
131
+ .contentVaga {
132
+ @include flex (column , flex-start , start );
133
+ }
134
+
135
+ .box-button {
136
+ height : 100% ;
137
+ @include flex (column , center , center );
138
+
139
+ button {
140
+ background-color : $primary-color-orange ;
141
+ padding : 10px 20px ;
142
+ border-radius : 10px ;
143
+ color : $secondary-color-dark ;
144
+ border : solid 1px $primary-color-orange ;
145
+ }
146
+ }
147
+
148
+ }
149
+
150
+ p {
151
+ @include font-inter (600 );
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
158
+ }
0 commit comments