Skip to content
GitLab

initial commit.

Merged initial commit.
SG_Formkit into development
Merged Somnath Ghorpade requested to merge SG_Formkit into development
Compare
and
145 files
+ 12238
− 0
Preferences
File browser
Compare changes
app/assets/css/template.scss 0 → 100644
+ 411
− 0
// Variables
$gray-lightest: #85858d;
$blue: #B7CADB;
$yellow: #FAF4B7;
$pink: #F2D1D1;
$green: #C4DFAA;
$indigo: #D9D7F1;
$orange: #F6D7A7;
$red : #FFB3B3;
$gray-lighter: #5e5a49;
// Reset
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// Body
body {
font-family: 'DM Sans', sans-serif;
}
// Img
img {
display: block;
max-width: 100%;
height: auto;
}
.wrapper {
display: flex;
flex-direction: column;
height: calc(100vh - 72px);
padding: 2.5rem;
overflow-y: auto;
}
// Buttons
.btn {
padding: 1rem;
border: 0;
border-radius: 8px;
outline: none;
background-color: transparent;
display: inline-flex;
align-items: center;
color: #212121;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
.isax {
font-size: 1.25rem;
margin-right: 0.5rem;
}
&.btn-submit {
background-color: $green;
.isax {
font-size: 1.25rem;
margin-right: 0.5rem;
}
}
&.btn-show {
background-color: $orange;
}
}
// Home
.box {
.title {
text-align: center;
font-weight: 900;
color: #212121;
}
.desc {
text-align: center;
margin-top: 0.5rem;
font-size: 0.8125rem;
color: $gray-lightest;
font-weight: 500;
margin-bottom: 2.5rem;
}
.bx-card {
margin-bottom: 1.5rem;
.p-card {
height: 350px;
border-radius: 12px;
padding: 3rem;
display: flex;
flex-direction: column;
overflow: hidden;
cursor: pointer;
}
.icon-holder {
margin-left: -0.5rem;
.isax {
font-size: 3rem;
color: #212121;
}
}
&-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--bluegray-900);
margin-top: auto;
transition: transform 0.3s ease;
transform: translateY(66px);
display: flex;
align-items: center;
justify-content: space-between;
.isax {
font-size: 2rem;
transition: transform 0.3s ease;
transform: translateX(350px);
}
}
&-desc {
color: #212121;
font-weight: 500;
line-height: 1.6;
font-size: 0.875rem;
transition: transform 0.3s ease;
transform: translateY(450px);
}
&:hover {
.bx-card-name {
transform: translateY(-16px);
.isax {
transform: translateX(0);
}
}
.bx-card-desc {
transform: translateY(0);
}
}
}
.col-3 {
$colors: $blue, $yellow, $pink, $green,$indigo, $orange;
$repeat: 26;
@for $i from 1 through $repeat {
&:nth-child(#{length($colors)}n + #{$i}) {
.bx-card {
.p-card {
background-color: (nth($colors, random(length($colors))));
box-shadow: 0 24px 50px rgba(#212121, 0.08);
}
}
}
}
// &:nth-child(2n+2) {
// .bx-card {
// .p-card {
// background-color: $blue;
// box-shadow: 0 24px 50px rgba($blue, 0.3);
// }
// }
// }
// &:nth-child(3n+3) {
// .bx-card {
// .p-card {
// background-color: $yellow;
// box-shadow: 0 24px 50px rgba($yellow, 0.3);
// }
// }
// }
// &:nth-child(5n+5) {
// .bx-card {
// .p-card {
// background-color: $green;
// box-shadow: 0 24px 50px rgba($green, 0.3);
// }
// }
// }
// &:nth-child(7n+7) {
// .bx-card {
// .p-card {
// background-color: $orange;
// box-shadow: 0 24px 50px rgba($orange, 0.3);
// }
// }
// }
}
}
// Login
.title.alt {
display: flex;
align-items: center;
.isax {
margin-right: 1rem;
font-size: 2rem;
cursor: pointer;
}
}
.box-login {
margin-top: 2.5rem;
&.clickable {
cursor: pointer;
}
.p-card {
padding: 2rem;
box-shadow: 0 24px 50px rgba(#212121, 0.04);
.icon-holder {
i {
font-size: 2rem;
}
}
.bx-login-name {
margin-top: 1rem;
font-size: 1.125rem;
font-weight: 700;
}
.data {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
.btn-wrapper {
margin-top: 0;
}
&.alt {
background-color: #f8f8f8;
padding: 1rem 2rem;
border-radius: 8px;
margin-bottom: 0;
}
}
.field + .field {
margin-top: 2.5rem;
}
.form-text {
font-size: 0.8125rem;
margin-top: 0.25rem;
}
.btn-wrapper {
margin-top: 2rem;
.btn + .btn {
margin-left: 1.5rem;
}
}
.field {
p {
word-wrap: break-word;
}
.p-fileupload {
.p-fileupload-files {
.p-button-icon-only {
.p-button-icon {
&::before {
content: '\e9d9';
font-family: 'iconsax';
font-size: 1.5rem;
}
}
}
}
.isax {
font-size: 1.5rem;
}
}
}
}
.json-wrapper {
.jv-container.jv-light {
font-family: 'DM Sans', sans-serif;
}
.jv-container:hover {
box-shadow: none;
border-color: #eee;
}
}
}
// Registration
.reg {
.box-login {
.field {
.p-inputtext {
width: 100%;
}
}
.field {
.p-password {
width: 100%;
.p-inputtext {
width: 100%;
}
}
}
.btn-wrapper {
text-align: center;
}
}
}
// Validator
#validator {
.box-login {
.p-card {
.field {
.p-dropdown {
width: 100%;
height: 42px;
margin-top: 0.5rem;
padding: 0.75rem;
font-size: 0.875rem;
}
}
}
.p-card {
.field {
.p-dropdown {
.p-dropdown-item {
font-size: 0.875rem;
}
}
}
}
.p-card {
.field {
.invalid-feedback {
color: $red;
font-weight: 700;
margin-top: 0.5rem;
}
}
}
.p-card {
.field {
.p-inputtext {
width: 100%;
margin-top: 0.5rem;
font-size: 0.875rem;
}
}
}
.p-card {
.field {
.label-checkbox {
margin-left: 0.5rem;
}
}
}
}
}
// Accordion
.p-accordion-tab {
margin-bottom: 0;
& + .p-accordion-tab {
margin-top: 1rem;
}
}
// Footer
.box-footer {
padding: 0.25rem 1rem;
box-shadow: 0 -8px 16px rgba(#212121, 0.04);
margin-top: auto;
.bxf-container {
display: flex;
align-items: center;
img {
width: 64px;
height: 64px;
margin-right: 1rem;
}
&-info {
font-size: 0.8125rem;
color: var(--gray-500);
p + p {
margin-top: 0.25rem;
}
}
}
}
// Custom Scrollbar
::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
border-radius: 16px;
}
::-webkit-scrollbar-thumb {
border-radius: 16px;
background: #f8f9fa;
}
\ No newline at end of file