Skip to content

Commit

Permalink
Added Panels, Panel Card, Popup (#71)
Browse files Browse the repository at this point in the history 
* added panels and panelcards

* added textblock atom

* added Popup

* updated panels

* updated versions

* review-changes

* updated panel cards
  • Loading branch information
@Swathi-eGov
Swathi-eGov authored May 28, 2024
1 parent 584f44c commit fb7e996
Show file tree
Hide file tree
Showing 32 changed files with 3,670 additions and 25 deletions.
1 change: 1 addition & 0 deletions react/css/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
# Changelog
```bash
1.8.2-coreui.20 Added Popup,Panel and Panel Card css
1.8.2-coreui.19 Added Uploader Variants
1.8.2-coreui.18 Updated Text-Secondary color typography
1.8.2-coreui.17 Updated RemoveableTag styles
Expand Down
2 changes: 1 addition & 1 deletion react/css/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-css",
"version": "1.8.2-coreui.19",
"version": "1.8.2-coreui.20",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <[email protected]>",
Expand Down
157 changes: 157 additions & 0 deletions react/css/src/digitv2/components/panelcard.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
.digit-panelcard-wrap {
@apply w-full flex-col;
display: flex;
height: fit-content;
border-radius: theme(digitv2.spacers.spacer1);
box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
background: theme(digitv2.lightTheme.paper-primary);

.digit-panelcard-header{

&.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-panelcard-children-wrap {
@apply flex-col overflow-hidden overflow-y-auto ;

display: flex;
flex: 1;

&.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 {
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{
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{
padding: theme(digitv2.spacers.spacer4);
}
}

.digit-panelcard-description {
@extend .typography.body-s;
color: theme(digitv2.lightTheme.generic-inputborder);
}

}

.digit-panelcard-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-panelcard-footer-buttons {
margin-left: auto;
display: flex;
gap: theme(digitv2.spacers.spacer4);

@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%;
}
}
}

.panelcard-infocard{
margin: theme(digitv2.spacers.spacer0);
width: 100%;
max-width: 100%;
min-width: 100%;
}
}

.digit-panelcard-children-wrap::-webkit-scrollbar {
width: theme(digitv2.spacers.spacer2);
background-color: theme(digitv2.lightTheme.generic-background);
}

.digit-panelcard-children-wrap::-webkit-scrollbar-track {
background-color: theme(digitv2.lightTheme.generic-background);
border-radius: 0.563rem;
}

.digit-panelcard-children-wrap::-webkit-scrollbar-thumb {
background-color: theme(digitv2.lightTheme.generic-divider);
border-radius: 0.563rem;
}
73 changes: 73 additions & 0 deletions react/css/src/digitv2/components/panels.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.digit-panel-wrapper {
@apply flex flex-col items-center;
gap: theme(digitv2.spacers.spacer6);

@media (min-width: 48rem) {
padding: theme(digitv2.spacers.spacer10);
}

@media (min-width: 30.063rem) and (max-width: 47.938rem) {
padding: theme(digitv2.spacers.spacer10);
}

@media (max-width: 30rem) {
padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
}

&.success {
background-color: theme(digitv2.lightTheme.alert-success);
}

&.error {
background-color: theme(digitv2.lightTheme.alert-error);
}

.digit-panel-message-wrapper {
@apply items-center;
display: flex;
flex-direction: column !important;

@media (min-width: 48rem) {
gap: theme(digitv2.spacers.spacer6);
}

@media (min-width: 30.063rem) and (max-width: 47.938rem) {
gap: theme(digitv2.spacers.spacer5);
}

@media (max-width: 30rem) {
gap: theme(digitv2.spacers.spacer4);
}

.digit-panel-message {
@extend .typography.heading-xl;
@apply whitespace-pre-wrap break-words;
line-height: normal;
color: theme(digitv2.lightTheme.paper-primary);
}
}

.digit-panel-info-wrapper {
display: flex;
flex-direction: column !important;
align-items: center;
gap: theme(digitv2.spacers.spacer1);

.digit-panel-info {
@extend .typography.body-l;
color: theme(digitv2.lightTheme.paper-primary);
}

.digit-panel-multiple-responses {
display: flex;
flex-direction: column;
gap: theme(digitv2.spacers.spacer1);
}

.digit-panel-response {
@extend .typography.heading-m;
color: theme(digitv2.lightTheme.paper-primary);
}

}
}
Loading

0 comments on commit fb7e996

Please sign in to comment.