Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

modified classnames and updated tag styles and other css #43

Merged
merged 3 commits into from
Apr 17, 2024
Merged

modified classnames and updated tag styles and other css #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66e9bee
updated-components
Swathi-eGov Apr 17, 2024
0f4ff04
updated-css
Swathi-eGov Apr 17, 2024
496ef14
updated components and css versions
Swathi-eGov Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions react/css/README.md
View file
Open in desktop
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.6 updated css with new classnames and updated tag styles
1.8.2-coreui.5 updated css version
1.8.2-coreui.4 updated classnames
1.8.2-coreui.3 styles for stepper and fixed date issue
Expand Down
2 changes: 1 addition & 1 deletion react/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-css",
"version": "1.8.2-coreui.5",
"version": "1.8.2-coreui.6",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <jagan.kumar@egov.org.in>",
Expand Down
7 changes: 2 additions & 5 deletions react/css/src/digitv2/components/buttonsV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import url("../index.scss");

.icon-label-container {
@apply w-full flex max-w-full;
@apply w-full flex max-w-full items-center;
gap: 0.5rem;

.digit-button-customIcon {
Expand All @@ -12,6 +12,7 @@

&.link {
gap: 0.25rem;
align-items: flex-start;

.digit-button-customIcon {
width: 1.25rem;
Expand All @@ -20,10 +21,6 @@
}
}

.icon-label-container:not(.link) {
@apply items-center;
}

.digit-button-label {
@extend .typography.button;
@apply leading-6 text-center text-white w-full overflow-hidden whitespace-no-wrap;
Expand Down
2 changes: 1 addition & 1 deletion react/css/src/digitv2/components/checkboxV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import url("../index.scss");

.digit-checkbox-wrap {
.digit-checkbox-container {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The verification process has revealed that the old class name .digit-checkbox-wrap is still being used in the file react/css/example/index.css. This suggests that the class name change to .digit-checkbox-container has not been fully applied across all relevant files. It is recommended to update this occurrence to maintain consistency in the usage of class names throughout the project.

Analysis chain

Ensure the class name change from .digit-checkbox-wrap to .digit-checkbox-container is reflected across all relevant files.

Scripts Executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for old class name usage in SCSS files
rg --type css '.digit-checkbox-wrap' --files-with-matches

Length of output: 85

@apply flex mb-md relative;
gap: 1rem;

Expand Down
10 changes: 3 additions & 7 deletions react/css/src/digitv2/components/fieldV1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,14 @@
}

.label-container {
@apply flex;
width: 80%;
@apply flex items-end w-full;
gap: 0.25rem;

@media (max-width: 30rem) {
/* Media query for mobile */
width: 100%;
}
}

.info-icon {
@apply relative cursor-pointer;
width: 1.188rem;
height: 1.188rem;
}

.info-icon .infotext {
Expand Down
19 changes: 3 additions & 16 deletions react/css/src/digitv2/components/labelFieldPairV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,20 @@


@media (min-width: 30.063rem) {
align-items: flex-start;
@apply items-start;
}

@media (max-width: 30rem) {
flex-direction: column;
align-items: flex-start;
@apply flex-col items-start;
}

& .label,
& header {
margin-right: 1.5rem;
width: 33%;

@media (min-width: 30.063rem) and (max-width: 47.938rem) {
/* Media query for tablets */
max-width: 12rem;
}

@media (max-width: 30rem) {
/* Media query for mobile */
width:100%;
max-width:100%
}

@media (min-width: 48rem) {
/*Media quey for desktop*/
max-width: 17rem;
@apply w-full;
}
}

Expand Down
24 changes: 10 additions & 14 deletions react/css/src/digitv2/components/multiSelectDropdownV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,28 +69,24 @@
.digit-multiselectdropdown-server {
top: 2.5rem;
@apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
max-height: 25vmax;
max-height: 70vmax;
box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
width: 100% !important;
}

.digit-multiselectdropdown-server::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 0.625rem;
.digit-server::-webkit-scrollbar {
width: 0.5rem;
background-color: theme(digitv2.lightTheme.generic-background);
}

.digit-multiselectdropdown-server::-webkit-scrollbar {
width: 0.625rem;
background-color: #F5F5F5;
.digit-server::-webkit-scrollbar-track {
background-color: theme(digitv2.lightTheme.generic-background);
border-radius: 0.563rem;
}

.digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border-radius: 0.625rem;
}

.digit-multiselectdropdown-server::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
.digit-server::-webkit-scrollbar-thumb {
background-color: theme(digitv2.lightTheme.generic-divider);
border-radius: 0.563rem;
}

.digit-nested-category {
Expand Down
2 changes: 1 addition & 1 deletion react/css/src/digitv2/components/radiobtnV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import url("../index.scss");

.digit-radio-wrap {
.digit-radio-options-wrap {
@apply leading-10 flex justify-between flex-wrap;
margin-bottom: 0.5rem;

Expand Down
52 changes: 34 additions & 18 deletions react/css/src/digitv2/components/selectdropdownV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
.digit-dropdown-employee-select-wrap {
@apply w-full relative;

max-width: 37.5rem;
@media (min-width: 30.063rem) and (max-width: 47.938rem) {
/* Media query for tablets */
max-width: 27.5rem;
min-width: 12.5rem;
}

@media (max-width: 30rem) {
/* Media query for mobile */
max-width: 20.5rem;
min-width: 9.75rem;
width: 100%;
}

@media (min-width: 48rem) {
/* Media query for desktop */
max-width: 37.5rem;
min-width: 12.5rem;
}

.digit-dropdown-select {
@extend .light-input-border;
Expand Down Expand Up @@ -83,10 +100,10 @@
}
}

.digit-options-card {
.digit-dropdown-options-card {
width: 100% !important;
box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
max-height: 27.5rem;
max-height: 70vmax;
@apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;

p {
Expand All @@ -111,23 +128,19 @@
}
}

.digit-options-card::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 0.625rem;
}

.digit-options-card::-webkit-scrollbar {
width: 0.625rem;
background-color: #F5F5F5;
width: 0.5rem;
background-color: theme(digitv2.lightTheme.generic-background);
}

.digit-options-card::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border-radius: 0.625rem;
.digit-options-card::-webkit-scrollbar-track {
background-color: theme(digitv2.lightTheme.generic-background);
border-radius: 0.563rem;
}

.digit-options-card::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
.digit-options-card::-webkit-scrollbar-thumb {
background-color: theme(digitv2.lightTheme.generic-divider);
border-radius: 0.563rem;
}


Expand All @@ -154,8 +167,11 @@
height: 1.188rem;
}

.profile-dropdown--item {
.digit-dropdown-item {

@apply flex flex-row;
padding: 0.625rem;
gap:0.625rem;
min-height: 2.438rem;
color: theme(digitv2.lightTheme.text-primary) !important;

Expand Down Expand Up @@ -392,11 +408,11 @@
}
}

.digit-options-card {
.digit-dropdown-options-card {
width: 100% !important;
box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
@apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
max-height: 25vmax;
max-height: 70vmax;

p {
@extend .light-text-color-primary;
Expand Down
22 changes: 9 additions & 13 deletions react/css/src/digitv2/components/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,22 +135,18 @@
}
}

.digit-stepper-container::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 0.313rem;
}

.digit-stepper-container::-webkit-scrollbar {
width: 0.313rem;
height: 0.625rem;
background-color: #F5F5F5;
width: 0.5rem;
height:0.5rem;
background-color: theme(digitv2.lightTheme.generic-background);
}

.digit-stepper-container::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border-radius: 0.313rem;
.digit-stepper-container::-webkit-scrollbar-track {
background-color: theme(digitv2.lightTheme.generic-background);
border-radius: 0.563rem;
}

.digit-stepper-container::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
.digit-stepper-container::-webkit-scrollbar-thumb {
background-color: theme(digitv2.lightTheme.generic-divider);
border-radius: 0.563rem;
}
48 changes: 29 additions & 19 deletions react/css/src/digitv2/components/tagV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.digit-tag-container {
@apply flex flex-wrap mb-md items-center;
gap: 0.5rem;
margin-top:0.5rem;
margin-top: 0.5rem;

@media (min-width: 481px) {
/* Media query for tablets */
Expand All @@ -23,36 +23,46 @@
}

.digit-tag {
@apply inline-flex items-center;
@apply inline-flex items-center h-10;
padding: 0.5rem;
gap: 0.5rem;
border-radius: 3.125rem;
background: theme(digitv2.lightTheme.generic-divider);
height: 2.5rem;
margin: 0px;
border-radius: 0.25rem;
background: theme(digitv2.lightTheme.generic-background);
margin: 0rem;
border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);


.digit-text {
@extend .typography.body-s;
@apply overflow-hidden h-4;
max-width: calc(100% - 24px);
overflow: hidden;
text-overflow: clip;
color: theme(digitv2.lightTheme.text-primary);
font-family: theme(digitv2.fontFamily.sans);
font-size: 0.875rem;
font-style: theme(digitv2.fontStyle.normal);
font-weight: theme(digitv2.fontWeight.regular);
line-height: theme(digitv2.lineHeight.normal);
height: 1rem;
line-height: 1.026rem;
}

.close-icon {
@apply flex items-center;
width: 1.25rem;
height: 1.25rem;
border: 1px solid theme(digitv2.lightTheme.text-secondary);
border-radius: 50%;
@apply flex items-center w-6 h-6 cursor-pointer;
border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
border-radius: 0.25rem;
background-color: theme(digitv2.lightTheme.text-secondary);
cursor: pointer;
}

&.errortag {
border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
background-color: theme(digitv2.lightTheme.paper-primary);
box-shadow: 0.125rem 0.125rem 0.25rem 0rem #D4351C4D;

.digit-text {
@extend .typography.heading-s;
line-height: 1.172rem;
color: theme(digitv2.lightTheme.alert-error);
}

.close-icon {
border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
background-color: theme(digitv2.lightTheme.alert-error);
}
}
}
}
16 changes: 6 additions & 10 deletions react/css/src/digitv2/components/textareaV2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,18 @@
}

textarea::-webkit-scrollbar {
width: 0.625rem;
background-color: #F5F5F5;
width: 0.5rem;
background-color: theme(digitv2.lightTheme.generic-background);
}

textarea::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 0.625rem;
background-color: theme(digitv2.lightTheme.generic-background);
border-radius: 0.563rem;
}

textarea::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border-radius: 0.625rem;
}

textarea::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
background-color: theme(digitv2.lightTheme.generic-divider);
border-radius: 0.563rem;
}

.digit-employee-card-textarea {
Expand Down
Loading