Cesar Mendivil
e43686e36d
- Introduced ModalDestinationButton for destination selection with customizable icons and labels. - Added ModalInput for text input with optional character counter. - Implemented ModalLink for reusable links styled as underlined text. - Created ModalPlatformCard for platform selection with badges. - Developed ModalRadioGroup for radio button groups with custom styling. - Added ModalSection for grouping modal content with optional labels. - Implemented ModalSelect for dropdown selections with custom styling. - Created ModalShareButtons for sharing options via Gmail, Email, and Messenger. - Developed ModalTextarea for multi-line text input with character counter. - Introduced ModalToggle for toggle switches with optional help text and links. - Updated README.md with component descriptions, usage examples, and design guidelines. - Added index.ts for centralized exports of modal components.
71 lines
1.0 KiB
CSS
71 lines
1.0 KiB
CSS
/* Component-specific styles for InviteGuestsModal */
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.helpText {
|
|
color: #5f6368;
|
|
font-size: 13px;
|
|
margin: 0 0 -4px 0;
|
|
line-height: 1.5;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.planText {
|
|
color: #5f6368;
|
|
font-size: 13px;
|
|
margin: -4px 0 0 0;
|
|
line-height: 1.5;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.copyInput {
|
|
margin: 0;
|
|
}
|
|
|
|
.shareButtons {
|
|
margin: 0;
|
|
}
|
|
|
|
.toggle {
|
|
padding-top: 12px;
|
|
border-top: 1px solid #dadce0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Dark mode */
|
|
[data-theme="dark"] .helpText,
|
|
[data-theme="dark"] .planText {
|
|
color: #9aa0a6;
|
|
}
|
|
|
|
[data-theme="dark"] .toggle {
|
|
border-top-color: #5f6368;
|
|
}
|
|
|
|
|
|
/* Dark mode */
|
|
[data-theme="dark"] .helpText,
|
|
[data-theme="dark"] .planText {
|
|
color: #9aa0a6;
|
|
}
|
|
|
|
[data-theme="dark"] .toggle {
|
|
border-top-color: #5f6368;
|
|
}
|
|
|