chore: add styles for components #24
Conversation
|
✔️ Deploy Preview ready! |
1 similar comment
|
✔️ Deploy Preview ready! |
| display: flex; | ||
| flex-direction: row; | ||
| grid-gap: var(--dt-space-300); | ||
| align-items: center; |
There was a problem hiding this comment.
d-d-flex d-fd-row d-gg4 d-ai-center
| .d-pagination__button { | ||
| padding-right: var(--dt-space-400); | ||
| padding-left: var(--dt-space-400); | ||
| } |
| // ---------------------------------------------------------------------------- | ||
| .d-pagination__separator { | ||
| align-self: flex-end; | ||
| } |
| width: var(--dt-size-550); | ||
| color: var(--dt-color-foreground-tertiary); | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
d-fc-tertiary d-w24 d-ta-center
| &__content { | ||
| width: 100%; | ||
| text-overflow: ellipsis; | ||
| } |
There was a problem hiding this comment.
d-to-ellipsis, d-w100p
| margin-right: var(--dt-space-350); | ||
| padding: var(--dt-space-350); | ||
| border-color: transparent; | ||
| } |
There was a problem hiding this comment.
d-p6 d-mr6 d-bc-transparent
| font-family: inherit; | ||
| line-height: var(--dt-font-line-height-400); | ||
| fill: currentColor; | ||
| } |
There was a problem hiding this comment.
Ok, there is no changes on radio-checkbox.less
There was a problem hiding this comment.
No, since d-description is not a utility I removed the change.
| // @ SKELETON LIST ITEM | ||
| // ---------------------------------------------------------------------------- | ||
| .d-skeleton-list-item { | ||
| display: flex; |
|
|
||
| &--single { | ||
| align-items: center; | ||
| } |
|
|
||
| &__shape { | ||
| margin-right: var(--dt-space-400); | ||
| } |
| &__paragraph-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; |
There was a problem hiding this comment.
d-d-flex d-fd-column d-w100p
| // @ SKELETON PARAGRAPH | ||
| // ---------------------------------------------------------------------------- | ||
| .d-skeleton-paragraph { | ||
| width: 100%; |
|
|
||
| &:last-child { | ||
| margin-bottom: var(--dt-space-0); | ||
| } |
There was a problem hiding this comment.
'd-mb12': row !== integerRows
| // ---------------------------------------------------------------------------- | ||
| .d-skeleton-text { | ||
| height: 80%; | ||
| border-radius: var(--dt-size-radius-200); |
There was a problem hiding this comment.
hmmm
height: 80%; should be height: var(--dt-size-400), what Im missing?
border-radius its ok
There was a problem hiding this comment.
You are right! Bad copy pasting 🤪
|
|
||
| .d-skeleton-text--heading { | ||
| border-radius: var(--dt-size-radius-200); | ||
| } |
| // $ BASE STYLE | ||
| // ---------------------------------------------------------------------------- | ||
| .d-tab-panel--hidden { | ||
| display: none; |
| // ---------------------------------------------------------------------------- | ||
| .d-toggle-wrapper { | ||
| display: flex; | ||
| align-items: center; |
There was a problem hiding this comment.
d-d-flex d-ai-center
|
|
||
| &__container { | ||
| display: flex; | ||
| flex-direction: column; |
There was a problem hiding this comment.
d-d-flex d-fd-column
|
✔️ Dialtone Deploy Preview ready! |
|
✔️ Dialtone-vue 3 Deploy Preview ready! |
ninamarina
force-pushed
the
add/componets-styles
branch
from
65d5363 to
4f21fe5
Compare
|
✔️ Dialtone Deploy Preview ready! |
ninamarina
force-pushed
the
add/componets-styles
branch
3 times, most recently
from
59246a5 to
ef27ab9
Compare
|
✔️ Dialtone-vue 3 Deploy Preview ready! |
ninamarina
requested review from
juliodialpad,
iropolo,
francisrupert and
braddialpad
as code owners
pagination popover skeleton
ninamarina
force-pushed
the
add/componets-styles
branch
from
d178023 to
b8ca862
Compare
|
✔️ Dialtone Deploy Preview ready! |
|
✔️ Dialtone-vue 3 Deploy Preview ready! |
|
✔️ Dialtone Deploy Preview ready! |
|
✔️ Dialtone-vue 3 Deploy Preview ready! |
Part of the effort to remove all utility classes from Dialtone Vue.
Jira: https://dialpad.atlassian.net/browse/DLT-1125
Subtask: https://dialpad.atlassian.net/browse/DLT-1387
Dialtone vue: dialpad/dialtone-vue#1314
Description
Adds styles for the following components in dialtone library:
Pagination
Popover
Radio Checkbox
Skeleton
Validation Message
This would complete all components for the task https://dialpad.atlassian.net/browse/DLT-1125
Pull Request Checklist
stagingas your pull request's base branch. (All PRs usingproductionas its base branch will be declined).gulpscripts successfully compile.Obligatory GIF (super important!)