new design for ssh_keys_choice page

This commit is contained in:
ARvind Tiwari 2017-08-01 19:05:52 +05:30
commit f530b879f7
5 changed files with 114 additions and 128 deletions

View file

@ -1,6 +1,58 @@
h2,h3,h4,h5{
font-family: 'Lato-Light', sans-serif;
/* ssh_keys_choice */
.dashboard-choice-container h1 {
font-family: Lato, sans-serif;
font-weight: 300;
}
.dashboard-choice-container .page-header {
border: 0;
}
.dashboard-choice-container .page-header p {
font-size: 16px;
font-family: Lato, sans-serif;
font-weight: 300;
}
.dashboard-choice-container h2 {
font-family: Lato, sans-serif;
font-weight: 400;
font-size: 22px;
margin-top: 0;
}
.choice-container {
border: 1px solid #C9C6C6;
padding: 25px;
border-radius: 1px;
}
.choice-container p{
font-size: 18px;
font-family: Lato, sans-serif;
font-weight: 300;
}
.choice-container-top {
border-bottom: 1px solid #C9C6C6;
padding-bottom: 25px;
margin-bottom: 25px;
}
.choice-btn {
min-width: 100px;
margin-top: 25px;
background-color: #3C5480;
color: #fff;
border: 2px solid #3C5480;
padding: 4px 10px;
transition: 0.3s all ease-out;
}
.choice-btn:focus,
.choice-btn:hover,
.choice-btn:active {
color: #3C5480;
background-color: #fff;
}
.choice-btn-faded {
background-color: #8396C4;
border: 2px solid #8396C4;
}
.ssh-keys-table thead tr th,
.ssh-keys-table tbody tr td{
color: #717274;
@ -32,11 +84,7 @@ h2,h3,h4,h5{
@media (min-width: 768px) {
.ssh-header-container {
display: flex;
/* flex-direction: row-reverse; */
/* vertical-align: middle; */
/* align-items: center; */
justify-content: space-between;
/* text-align: right; */
}
.ssh-header-container p{
margin-bottom: 0;
@ -95,7 +143,7 @@ h2,h3,h4,h5{
padding-right: 5px;
}
}
@media screen and (max-width: 360px){
@media (max-width: 360px){
.content-dashboard {
width: 100% !important;
}
@ -103,75 +151,9 @@ h2,h3,h4,h5{
padding-right: 5px;
padding-left: 5px;
}
.col-md-12, .col-sm-12{
padding-left: 0;
padding-right: 0;
}
}
.choice-container{
margin-top: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.choice-container div{
padding-top: 30px;
padding-bottom: 30px;
display: flex;
align-items: center;
flex-direction: column;
width: 49%;
}
.choice-container div h3{
margin: auto;
width: 100%;
/* text-align: center; */
font-family: 'Lato-Light', sans-serif;
}
.choice-container div h3 img:hover{
cursor: pointer;
}
.choice-container div.choice-container-line{
padding-top: 0;
padding-bottom: 0;
background: #c9c6c6;
height: 250px;
width:1px;
}
@media screen and (max-width: 768px){
.choice-container div.choice-container-line{
display: none;
}
.choice-container{
flex-direction: column;
}
.choice-container div{
width: 100%;
}
.choice-container div h3 {
font-size: 16px;
}
}
.dashboard-choice-container {
max-width: 834px !important;
}
.choice-button{
width: 172px;
height: 42px;
border-radius: 0;
color: white;
margin-top: 70px;
font-size: 20px;
}
@media screen and (max-width: 768px){
.choice-button{
margin-top: 20px;
}
}
.upload-btn{
background-color: #337ab7;
max-width: 834px !important;
}
.form_key_name{
width:60%;
@ -277,8 +259,6 @@ h2,h3,h4,h5{
.custom_form_button{
border-radius: 0;
}
.form_key_name:focus,
.form_public_key:focus,
.has-error .form_key_name,
@ -291,8 +271,10 @@ h2,h3,h4,h5{
.has-success .form_public_key:focus {
box-shadow: none;
}
.wide400 {
max-width: 400px;
margin: auto;
}
.mob-only {
display: none;
}
@ -304,9 +286,10 @@ h2,h3,h4,h5{
.pc-only {
display: none;
}
}
}}
}
}}
}
}}
.choice-container div h3 {
font-size: 16px;
}
.choice-button{
margin-top: 20px;
}
}