-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added table molecule * updated versions * review changes * updated typography * added review changes * updated breadcrumb * updated otpinput * updated accordion * added intermediate state for checkbox * updated icon css in hamburger * added metric card component * updated table molecule props * added accessor for headerData * updated formcard * added review changes
- Loading branch information
1 parent
579ea81
commit 5e77e15
Showing
64 changed files
with
7,196 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,202 @@ | ||
| .digit-form-card{ | ||
| width: 100%; | ||
| max-width: 100%; | ||
| height: fit-content; | ||
| background-color: theme(digitv2.lightTheme.paper-primary); | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| .digit-form-card-header { | ||
| @apply flex-col; | ||
| display: flex !important; | ||
| gap: theme(digitv2.spacers.spacer4); | ||
|
|
||
| &.with-shadow { | ||
| box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; | ||
| } | ||
|
|
||
| @media (min-width: 48rem) { | ||
| padding: theme(digitv2.spacers.spacer6); | ||
| padding-bottom: theme(digitv2.spacers.spacer0); | ||
|
|
||
| &.with-shadow { | ||
| padding-bottom: theme(digitv2.spacers.spacer6); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 30.063rem) and (max-width: 47.938rem) { | ||
| padding: theme(digitv2.spacers.spacer5); | ||
| padding-bottom: theme(digitv2.spacers.spacer0); | ||
|
|
||
| &.with-shadow { | ||
| padding-bottom: theme(digitv2.spacers.spacer5); | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 30rem) { | ||
| padding: theme(digitv2.spacers.spacer4); | ||
| padding-bottom: theme(digitv2.spacers.spacer0); | ||
|
|
||
| &.with-shadow { | ||
| padding-bottom: theme(digitv2.spacers.spacer4); | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .digit-form-card-content { | ||
| @extend .typography.body-s; | ||
| position: relative; | ||
| font-family: theme(digitv2.fontFamily.sans); | ||
| font-style: theme(digitv2.fontStyle.normal); | ||
| font-weight: theme(digitv2.fontWeight.regular); | ||
| line-height: theme(digitv2.lineHeight.lineheight2); | ||
|
|
||
| @media (max-aspect-ratio: 9/16) { | ||
| /* Media query for mobile */ | ||
| font-size: theme(digitv2.fontSize.body-s.mobile); | ||
| } | ||
|
|
||
| @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) { | ||
| /* Media query for tablets */ | ||
| font-size: theme(digitv2.fontSize.body-s.tablet); | ||
| } | ||
|
|
||
| @media (min-aspect-ratio: 3/4) { | ||
| /* Media query for desktop */ | ||
| font-size: theme(digitv2.fontSize.body-s.desktop); | ||
| } | ||
| @apply overflow-hidden overflow-y-auto flex-col; | ||
| display: flex; | ||
| flex: 1; | ||
| color: theme(digitv2.lightTheme.text-primary); | ||
|
|
||
| &.inline { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| @media (min-width: 48rem) { | ||
| gap: theme(digitv2.spacers.spacer6); | ||
| padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6); | ||
|
|
||
| &.with-shadow, | ||
| &.without-footer{ | ||
| padding: theme(digitv2.spacers.spacer6); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media (min-width: 30.063rem) and (max-width: 47.938rem) { | ||
| gap: theme(digitv2.spacers.spacer5); | ||
| padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5); | ||
|
|
||
| &.with-shadow, | ||
| &.without-footer{ | ||
| padding: theme(digitv2.spacers.spacer5); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media (max-width: 30rem) { | ||
| gap: theme(digitv2.spacers.spacer4); | ||
| padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4); | ||
|
|
||
| &.with-shadow, | ||
| &.without-footer{ | ||
| padding: theme(digitv2.spacers.spacer4); | ||
| } | ||
| } | ||
|
|
||
| .digit-label-field-pair { | ||
| margin-bottom: unset; | ||
| } | ||
|
|
||
| .digit-radio-options-wrap { | ||
| margin-bottom: unset; | ||
| } | ||
| } | ||
|
|
||
| .digit-form-card-footer { | ||
| @apply flex-wrap; | ||
| display: flex; | ||
| gap: theme(digitv2.spacers.spacer4); | ||
|
|
||
| &.with-shadow { | ||
| box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; | ||
| } | ||
|
|
||
| @media (min-width: 48rem) { | ||
| padding: theme(digitv2.spacers.spacer6); | ||
| } | ||
|
|
||
| @media (min-width: 30.063rem) and (max-width: 47.938rem) { | ||
| @apply w-full; | ||
| padding: theme(digitv2.spacers.spacer5); | ||
| } | ||
|
|
||
| @media (max-width: 30rem) { | ||
| @apply flex-col; | ||
| padding: theme(digitv2.spacers.spacer4); | ||
| } | ||
|
|
||
|
|
||
| .digit-form-card-buttons { | ||
| margin-left: auto; | ||
| display: flex; | ||
| gap: theme(digitv2.spacers.spacer4); | ||
| @apply max-w-full flex-wrap; | ||
|
|
||
| @media (min-width: 30.063rem) and (max-width: 47.938rem) { | ||
| @apply w-full; | ||
|
|
||
| button { | ||
| flex: 1; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 30rem) { | ||
| @apply flex-col; | ||
| margin: theme(digitv2.spacers.spacer0); | ||
|
|
||
| button { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| &.equal-buttons{ | ||
| width: 100%; | ||
|
|
||
| @media (min-width: 30.063rem) { | ||
|
|
||
| button { | ||
| flex: 1; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .vertical-formcard-divider{ | ||
| position: absolute; | ||
|
|
||
| @media (max-aspect-ratio: 9/16) { | ||
| /* Media query for mobile */ | ||
| top: theme(digitv2.spacers.spacer4); | ||
| height: calc(100% - 2rem); | ||
| } | ||
|
|
||
| @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) { | ||
| /* Media query for tablets */ | ||
| top: theme(digitv2.spacers.spacer5); | ||
| height: calc(100% - 2.5rem); | ||
| } | ||
|
|
||
| @media (min-aspect-ratio: 3/4) { | ||
| /* Media query for desktop */ | ||
| top: theme(digitv2.spacers.spacer6); | ||
| height: calc(100% - 3rem); | ||
| } | ||
| border: 0.063rem solid theme(digitv2.lightTheme.generic-divider); | ||
| z-index: 1; | ||
| } | ||
| } |
Oops, something went wrong.