fleet/frontend/components/hosts/AddHostModal/_styles.scss
noahtalerman 51cfb07f64
Implement global colors. Add italic font. (#64)
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.

Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
2020-11-24 08:59:03 -08:00

154 lines
2.5 KiB
SCSS

.add-host-modal {
&__manual-install-header {
width: 600px;
border-radius: 2px;
background-color: $white;
box-shadow: 0 3px 12px 0 rgba(49, 49, 93, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.07);
border: solid 1px $ui-borders;
position: relative;
z-index: 2;
padding: 15px 25px;
box-sizing: border-box;
h2 {
font-size: 18px;
font-weight: $bold;
line-height: 1.33;
letter-spacing: -0.6px;
color: #48c586;
margin: 0;
}
h3 {
font-size: 15px;
font-weight: $regular;
line-height: 1.6;
letter-spacing: normal;
color: rgba(32, 37, 50, 0.48);
margin: 0;
}
.kolidecon {
float: left;
font-size: 44px;
color: #48c586;
margin-right: 15px;
}
}
&__manual-install-content {
width: 580px;
border-radius: 2px;
background-color: $white;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.07);
border: solid 1px rgba(73, 143, 226, 0.1);
margin-top: -5px;
margin-left: 10px;
padding: 20px;
box-sizing: border-box;
h4 {
font-size: 16px;
font-weight: $bold;
line-height: 1.5;
letter-spacing: -0.5px;
color: rgba(32, 37, 50, 0.66);
margin: 10px 0 0;
.kolidecon {
margin-left: 5px;
font-size: 18px;
}
}
p {
font-size: 15px;
font-weight: $regular;
line-height: 1.6;
letter-spacing: normal;
color: rgba(32, 37, 50, 0.66);
margin: 0;
}
a {
text-decoration: none;
}
}
&__documentation-link {
h4 {
margin: 0;
}
}
&__install-steps {
margin: 0;
padding: 0;
list-style: none;
li {
&:first-child {
h4 {
margin-top: 10px;
}
}
}
}
&__button-wrap {
border-top: solid 1px $ui-borders;
text-align: right;
margin: 15px 0 0;
padding: 15px 0 0;
}
&__download-cert {
text-align: center;
padding-top: 15px;
span {
display: block;
}
}
&__reveal-secret {
float: right;
text-decoration: none;
}
&__secret-wrapper {
position: relative;
}
&__secret-copy-icon {
position: absolute;
top: 8px;
right: 10px;
font-size: 18px;
color: $core-purple;
&:active {
top: 8px;
}
}
&__secret-input {
input {
border-radius: 2px;
background-color: $core-light-blue-grey;
border-color: $ui-borders;
color: $core-purple;
}
}
pre,
code {
background-color: #f9f9f9;
}
&__error {
color: $alert;
}
}