argo-cd

1
@import 'node_modules/argo-ui/src/styles/config';
2

3
$logoPath: 'assets/images/argologo.svg';
4
$logoNegativePath: 'assets/images/argo.png';
5

6
.login {
7
    min-height:100vh;
8
    background: linear-gradient(to top left, 
9
        rgba(122, 139, 207, 0.8) 0%, 
10
        rgba(46, 50, 90, 0.8) 100%), 
11
        url("assets/images/stars.gif");
12
    display: flex;
13

14
    &__content {
15
        float: left;
16
        margin: auto;
17
        width: calc(100% - 320px);
18
        text-align: center;
19
    }
20

21
    .argo__logo {
22
        background-image: url($logoNegativePath);
23
        background-repeat: no-repeat;
24
        background-size: contain;
25
        min-height: 200px;
26
        margin: auto;
27
        background-position: center;
28
        height: 50vh;
29
    }
30

31
    &__text{
32
        position: relative;
33
        margin: auto;
34
        top: -10vh;
35
        color: #FFF;
36
        font-size: 2.5rem;
37
        font-weight: 100; 
38
    }
39

40

41
    &__box-wrapper {
42
        display: table;
43
        width: 100%;
44
        height: calc(100% - 60px - 70px - 40px);
45
        padding: 20px 0 80px;
46
    }
47

48
    &__box-outer {
49
        display: table-cell;
50
        vertical-align: middle;
51
        overflow: hidden;
52
        float: right;
53
    }
54

55
    &__box {
56
        min-width: 320px;
57
        width: 20%;
58
        margin: 0 auto;
59
        padding: 40px;
60
        background-color: #fff;
61
        position: relative;
62
        float: right;
63
        min-height: 100vh;
64

65
        .width-control{
66
            max-width: 200px;
67
            margin: auto;
68
        }
69

70
        &_saml {
71
            padding: 40px 0;
72
        }
73

74
        h3, h4, h5 {
75
            color: #b268a7;
76
            text-align: center;
77
            padding-top: 1em;
78
            padding-bottom: 1em;
79
        }
80

81
        h6 {
82
            text-align: center;
83
        }
84

85
        h3 {
86
            font-size: 2.25em;
87
            font-weight: 100;
88
            padding-bottom: 66px;
89

90
            @media screen and (max-height: 774px) {
91
                padding-bottom: 20px;
92
            }
93
        }
94
    }
95

96
    &__form-row {
97
        padding: 20px 0;
98
    }
99

100
    &__more-row {
101
        padding: 20px 0;
102
        text-align: center;
103
        font-weight: bold;
104

105
        @media screen and (max-height: 774px) {
106
            padding: 0;
107
        }
108

109
        a {
110
            font-size: 13px;
111
            text-transform: uppercase;
112
            color: $argo-color-gray-7;
113
            font-weight: 300;
114
        }
115

116
        p {
117
            font-size: 13px;
118
        }
119
    }
120

121
    &__saml-separator {
122
        margin-top: 15px;
123
        color: $argo-color-gray-7;
124
        border-bottom: 1px solid $argo-color-gray-4;
125
        text-align: center;
126
        & > span {
127
            position: relative;
128
            top: 0.8em;
129
            display: inline-block;
130
            padding: 0 6px;
131
            background: #fff;
132
        }
133
    }
134

135
    &__logo {
136
        display: block;
137
        background-repeat: no-repeat;
138
        background-position: center;
139
        text-align: center;
140

141
        &--neg {
142
            height: 40px;
143
            background-size: contain;
144
            background-image: url($logoPath);
145
            background-repeat: no-repeat;
146
            margin-left: 4.5rem;
147
            position: relative;
148
            top: 1.5rem;
149
            width: 10rem;
150
        }
151
        &--argo{
152
            height: 5rem;
153
            background-size: contain;
154
            background-image: url(assets/images/Argo.svg);
155
            background-repeat: no-repeat;
156
            float: left;
157
            width: 4rem;  
158
        }
159

160
        img.logo-image{
161
            max-width: 50%;
162
            color: #F77530;
163
        }
164
    }
165

166
    &__footer {
167
        color: $argo-color-gray-2;
168
        bottom: 20px;
169
        position: absolute;
170
        width: 90%;
171
        text-align: center;
172
        left: 20px;        
173

174
        & a {
175
            color: $argo-color-gray-2;
176
            img{
177
                width: 36px;
178
                filter: invert(50%);
179
                -webkit-filter: invert(50%);
180
            }
181
        }
182

183
        .ver {
184
            font-size:12px;
185
            color: $argo-color-gray-7;
186
        }
187

188
        &__link {
189
            font-size:12px;
190
            padding:0px 5px;
191
        }
192
    }
193

194
    ::after {
195
        content: '';
196
        clear: both;
197
    }
198

199
}
200