src/SCSS/pages/_adminOnboarding.scss
.s1-parent-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin: 10rem 0rem;
min-height: calc(100vh - 460px);
progress {
border-radius: 5px;
width: 100px;
position: absolute;
right: 250px;
top: 120px;
}
progress::-webkit-progress-bar {
background-color: #cfcdcd;
border-radius: 2px;
}
progress::-webkit-progress-value {
background-color: $color-secondary;
border-radius: 2px;
transition: all 0.3s ease;
}
progress::-moz-progress-bar {
background-color: $color-gray-light;
}
button {
margin: 6rem 0rem;
background-color: $color-secondary;
width: 13rem;
padding: 10px;
color: $color-white;
border-radius: 8px;
border: none;
cursor: pointer;
&:disabled {
background-color: gray;
&:hover {
background-color: gray;
}
}
&:hover {
background-color: $color-primary;
}
}
.s1-img {
margin-bottom: 8%;
}
}
.s1-getting-started {
width: 50%;
margin-left: 8rem;
margin-top: 3rem;
h1 {
font-size: 4.8rem;
padding-bottom: 2rem;
}
h5 {
font-size: 3.2rem;
font-weight: 300;
padding-bottom: 3rem;
}
h6 {
font-size: 1.8rem;
font-weight: 300;
}
span {
margin-left: 2rem;
i {
font-size: 2rem;
}
}
.list-container {
margin-bottom: 3rem;
.styled-li {
font-size: 3rem;
font-weight: 300;
display: flex;
margin: 1.5rem 0rem;
.numbered-list {
background-color: $color-white-dark;
width: 4rem;
height: 4rem;
border-radius: 50%;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2rem;
}
}
}
#upload-logo {
text-decoration: underline;
margin-top: 3rem;
}
// form {
// display: flex;
// flex-direction: column;
// }
.choose-color {
margin: 6rem 0rem 3rem 0rem;
}
.color-picker {
display: flex;
#black {
width: 5rem;
height: 5rem;
background-color: black;
border-radius: 50%;
margin: 0.5rem;
}
#red {
width: 5rem;
height: 5rem;
background-color: red;
border-radius: 50%;
margin: 0.5rem;
}
#blue {
width: 5rem;
height: 5rem;
background-color: blue;
border-radius: 50%;
margin: 0.5rem;
}
#purple {
width: 5rem;
height: 5rem;
background-color: purple;
border-radius: 50%;
margin: 0.5rem;
}
#grey {
width: 5rem;
height: 5rem;
background-color: grey;
border-radius: 50%;
margin: 0.5rem;
}
}
}
.step-p-container {
display: flex;
justify-content: space-between;
margin-left: 5%;
margin-bottom: 8rem;
width: 100%;
p {
text-decoration: underline;
margin-left: 3%;
width: 100%;
}
}
.previousarrow {
display: flex;
width: 75%;
}
.button-container {
display: flex;
justify-content: center;
margin-left: 25%;
}
.name-container {
display: flex;
flex-direction: row;
}
.create-account-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 70%;
h6 {
font-size: 1.8rem;
color: $color-black;
font-weight: 500;
margin: 15px 0px 15px 5px;
}
.org-size {
display: flex;
flex-direction: row;
}
label {
font-size: 1.6rem;
color: $color-black;
margin-right: 2.5rem;
}
.dropdown-container {
margin: 15px 0px 15px 0px;
}
.orgname-input {
border-radius: 0px;
border: 1px solid #787878;
width: 95.7%;
&::placeholder {
color: rgba(51, 51, 51, 0.5);
font-style: italic;
font-weight: 600;
}
}
.industry-label {
font-size: 1.8rem;
font-weight: 500;
margin-left: 0.25rem;
}
.select-placeholder {
appearance: none;
border-radius: 0px;
border: 1px solid #787878;
width: 40%;
color: rgba(51, 51, 51, 0.5);
font-style: italic;
font-weight: 600;
}
.formname {
width: 47%;
border-radius: 0px;
border: 1px solid #787878;
&::placeholder {
color: rgba(51, 51, 51, 0.5);
font-style: italic;
font-weight: 600;
}
}
// .radio-div input[type="radio"] {
// opacity: 10;
// width: 20;
// }
}
.admin-user-add-container {
.user-upload-title {
font-size: $large;
line-height: 5.8rem;
padding-bottom: 7rem;
}
.admin-add-employee-form {
height: 22rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.upload-now-question {
height: 8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.how-upload-question {
height: 8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.gray-details {
color: $color-gray-light;
margin-left: 0rem;
font-size: $small;
}
}
h6 {
font-size: 1.8rem;
}
label {
font-size: $small;
}
}
}
.employee-add-container {
.employee-upload-title {
font-size: $large;
line-height: 5.8rem;
padding-bottom: 7rem;
margin-left: 12rem;
}
.add-employee-form {
display: flex;
flex-direction: column;
width: 90%;
margin-left: 0rem;
.employee-image-upload {
display: flex;
align-items: center;
font-size: $default-font-size;
padding-top: 3rem;
span {
color: $color-gray-light;
margin-left: 0rem;
margin-right: 2rem;
}
}
.add-another-employee {
width: 11rem;
padding-top: 3rem;
text-decoration: underline;
font-size: 1.8rem;
font-weight: 500;
color: #c91757;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
.AddMoreIcon {
fill: #c91757;
}
}
.success-employee-add {
padding-top: 4rem;
p {
color: $color-gray-light;
.employee-email {
margin-left: 3rem;
}
}
h6 {
padding-bottom: 1.5rem;
}
}
}
}
.bulk-upload-container {
.bulk-upload-title {
font-size: $large;
line-height: 5.8rem;
padding-bottom: 7rem;
}
.bulk-template-download {
padding: 1rem 0rem;
text-decoration: underline;
p {
font-size: 1.8rem;
}
}
.dropzone {
background-color: $color-white-cement;
width: 51.5rem;
height: 25.8rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
.AddBulkIcon {
fill: #c91757;
}
p {
font-size: 2.4rem;
line-height: 2.8rem;
padding-top: 3rem;
span {
text-decoration: underline;
margin-left: 0rem;
font-size: 2.4rem;
line-height: 2.8rem;
}
}
}
.file-preview {
width: 51.5rem;
padding-top: 2rem;
}
.bulk-success-container-names {
margin-top: 2rem;
height: 15rem;
overflow: auto;
width: 50rem;
table {
width: 50rem;
padding: 1rem 0rem;
color: $color-gray-light;
tr {
text-align: left;
}
}
}
button {
cursor: pointer;
}
}
.color-form {
display: flex;
flex-direction: column;
.primary-color {
width: 6rem;
height: 2rem;
background-color: black;
border: 3px solid red;
}
}
// testing radio styles