cartodb/app/assets/stylesheets/public/password_protected.css.scss
2020-06-15 10:58:47 +08:00

125 lines
2.0 KiB
SCSS

/**
* Embed map protected with password
*/
@import 'cdb-variables/colors';
$cGreyBackground: #F9F9F9;
$cNavyBlueBackground: #162945;
$cDarkBlue: #0E1C2E;
$cMediumGrey: #B1B8C1;
$halfBaseSize: 4px;
.PublicPage-body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.PublicPage-background--navyBlue {
background-color: $cNavyBlueBackground;
}
.PublicPage-background--grey {
background-color: $cGreyBackground;
}
.PublicPage-centerContainer {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.PublicPage-container {
position: relative;
text-align: center;
}
.PublicPage-header {
margin-bottom: 40px;
text-align: center;
}
.PublicPage-form {
margin: 0 auto;
}
.PublicPage-field-withTooltip {
display: flex;
align-items: center;
}
.PublicPage-inputTooltip {
left: 100%;
white-space: nowrap;
}
.PublicPage-form--inputText {
box-sizing: border-box;
width: 320px;
height: 48px;
padding: 10px;
border: 1px solid $cDarkBlue;
border-radius: 0;
outline: none;
background: $cDarkBlue;
color: #FFF;
&::-webkit-input-placeholder {
color: $cMediumGrey;
}
&:-moz-placeholder {
color: $cMediumGrey;
}
&::-moz-placeholder {
color: $cMediumGrey;
}
&:-ms-input-placeholder {
color: $cMediumGrey;
}
&:focus {
border: 1px solid #1785FB;
}
&.RoundBorders-all {
border-radius: $halfBaseSize;
}
&.RoundBorders-top {
border-radius: $halfBaseSize $halfBaseSize 0 0;
}
&.RoundBorders-bottom {
border-radius: 0 0 $halfBaseSize $halfBaseSize;
}
&.is-alert {
border: 1px solid #F24440;
}
}
.PublicPage-protectedEmbed-iconContainer {
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
margin: 0 auto 50px;
border: 3px solid rgba($cSecondaryDark, 0.04);
border-radius: 50%;
}
.PublicPage-footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}