From 83452f328213c7f5296652efd3d017f8b3e0184a Mon Sep 17 00:00:00 2001 From: Wes Reed Date: Tue, 6 Dec 2022 16:45:41 -0500 Subject: [PATCH 001/465] fix: brought back custom modal attributes from v3 --- packages/coreui-react/src/components/modal/CModal.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx index 5bfb7a61..65ae9667 100644 --- a/packages/coreui-react/src/components/modal/CModal.tsx +++ b/packages/coreui-react/src/components/modal/CModal.tsx @@ -108,6 +108,7 @@ export const CModal = forwardRef( transition = true, unmountOnClose = true, visible, + ...attributes }, ref, ) => { @@ -232,6 +233,7 @@ export const CModal = forwardRef( fullscreen={fullscreen} scrollable={scrollable} size={size} + {...attributes} > {children} From d8f7e7b2cb8d0df212d5ea66f2bd1e61e924a255 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 19 Dec 2022 12:44:55 +0100 Subject: [PATCH 002/465] docs: update documentation --- packages/docs/content/4.4/components/icon.mdx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/docs/content/4.4/components/icon.mdx b/packages/docs/content/4.4/components/icon.mdx index 2383e7df..2d7fa0c8 100644 --- a/packages/docs/content/4.4/components/icon.mdx +++ b/packages/docs/content/4.4/components/icon.mdx @@ -1,7 +1,7 @@ --- -title: React Icon Component +title: React Icons Component name: Icon -description: Official React.js component for CoreUI Icons and CoreUI Icons PRO. +description: React icons is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their webpages without doing any extra work. menu: Components route: /components/icon --- @@ -20,7 +20,7 @@ import * as icon from '@coreui/icons'; ## Installation -If you want to use our icon component and our icons library you have to install two additional packages. +To use React icons in your project, you will need to install it as a dependency: ### Npm @@ -73,9 +73,9 @@ render() { ... ``` -## Available icons +## Available react icons -CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. +CoreUI React Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. export const LinearExample = () => { const icons = ['cilAccountLogout', 'cilActionRedo', 'cilActionUndo', 'cilAddressBook', 'cilAirplaneModeOff', 'cilAirplaneMode', 'cilAirplay', 'cilAlarm', 'cilAlbum', 'cilAlignCenter', 'cilAlignLeft', 'cilAlignRight', 'cilAmericanFootball', 'cilAnimal', 'cilAperture', 'cilApple', 'cilApplicationsSettings', 'cilApplications', 'cilAppsSettings', 'cilApps', 'cilArrowBottom', 'cilArrowCircleBottom', 'cilArrowCircleLeft', 'cilArrowCircleRight', 'cilArrowCircleTop', 'cilArrowLeft', 'cilArrowRight', 'cilArrowThickBottom', 'cilArrowThickFromBottom', 'cilArrowThickFromLeft', 'cilArrowThickFromRight', 'cilArrowThickFromTop', 'cilArrowThickLeft', 'cilArrowThickRight', 'cilArrowThickToBottom', 'cilArrowThickToLeft', 'cilArrowThickToRight', 'cilArrowThickToTop', 'cilArrowThickTop', 'cilArrowTop', 'cilAssistiveListeningSystem', 'cilAsteriskCircle', 'cilAsterisk', 'cilAt', 'cilAudioDescription', 'cilAudioSpectrum', 'cilAudio', 'cilAvTimer', 'cilBabyCarriage', 'cilBaby', 'cilBackspace', 'cilBadge', 'cilBalanceScale', 'cilBan', 'cilBank', 'cilBarChart', 'cilBarcode', 'cilBaseball', 'cilBasket', 'cilBasketball', 'cilBath', 'cilBathroom', 'cilBattery0', 'cilBattery3', 'cilBattery5', 'cilBatteryAlert', 'cilBatteryEmpty', 'cilBatteryFull', 'cilBatterySlash', 'cilBeachAccess', 'cilBeaker', 'cilBed', 'cilBellExclamation', 'cilBell', 'cilBike', 'cilBirthdayCake', 'cilBlind', 'cilBluetooth', 'cilBlurCircular', 'cilBlurLinear', 'cilBlur', 'cilBoatAlt', 'cilBold', 'cilBoltCircle', 'cilBolt', 'cilBook', 'cilBookmark', 'cilBorderAll', 'cilBorderBottom', 'cilBorderClear', 'cilBorderHorizontal', 'cilBorderInner', 'cilBorderLeft', 'cilBorderOuter', 'cilBorderRight', 'cilBorderStyle', 'cilBorderTop', 'cilBorderVertical', 'cilBowling', 'cilBraille', 'cilBriefcase', 'cilBrightness', 'cilBritishPound', 'cilBrowser', 'cilBrushAlt', 'cilBrush', 'cilBug', 'cilBuilding', 'cilBullhorn', 'cilBurger', 'cilBurn', 'cilBusAlt', 'cilCalculator', 'cilCalendarCheck', 'cilCalendar', 'cilCameraControl', 'cilCameraRoll', 'cilCamera', 'cilCarAlt', 'cilCaretBottom', 'cilCaretLeft', 'cilCaretRight', 'cilCaretTop', 'cilCart', 'cilCash', 'cilCasino', 'cilCast', 'cilCat', 'cilCc', 'cilCenterFocus', 'cilChartLine', 'cilChartPie', 'cilChart', 'cilChatBubble', 'cilCheckAlt', 'cilCheckCircle', 'cilCheck', 'cilChevronBottom', 'cilChevronCircleDownAlt', 'cilChevronCircleLeftAlt', 'cilChevronCircleRightAlt', 'cilChevronCircleUpAlt', 'cilChevronDoubleDown', 'cilChevronDoubleLeft', 'cilChevronDoubleRight', 'cilChevronDoubleUp', 'cilChevronLeft', 'cilChevronRight', 'cilChevronTop', 'cilChildFriendly', 'cilChild', 'cilCircle', 'cilClearAll', 'cilClipboard', 'cilClock', 'cilClone', 'cilClosedCaptioning', 'cilCloudDownload', 'cilCloudUpload', 'cilCloud', 'cilCloudy', 'cilCode', 'cilCoffee', 'cilCog', 'cilColorBorder', 'cilColorFill', 'cilColorPalette', 'cilColumns', 'cilCommand', 'cilCommentBubble', 'cilCommentSquare', 'cilCompass', 'cilCompress', 'cilContact', 'cilContrast', 'cilControl', 'cilCopy', 'cilCouch', 'cilCreditCard', 'cilCropRotate', 'cilCrop', 'cilCursorMove', 'cilCursor', 'cilCut', 'cilDataTransferDown', 'cilDataTransferUp', 'cilDeaf', 'cilDelete', 'cilDescription', 'cilDevices', 'cilDialpad', 'cilDiamond', 'cilDinner', 'cilDisabled', 'cilDog', 'cilDollar', 'cilDoor', 'cilDoubleQuoteSansLeft', 'cilDoubleQuoteSansRight', 'cilDrinkAlcohol', 'cilDrink', 'cilDrop', 'cilEco', 'cilEducation', 'cilElevator', 'cilEnvelopeClosed', 'cilEnvelopeLetter', 'cilEnvelopeOpen', 'cilEqualizer', 'cilEthernet', 'cilEuro', 'cilExcerpt', 'cilExitToApp', 'cilExpandDown', 'cilExpandLeft', 'cilExpandRight', 'cilExpandUp', 'cilExposure', 'cilExternalLink', 'cilEyedropper', 'cilFaceDead', 'cilFace', 'cilFactorySlash', 'cilFactory', 'cilFastfood', 'cilFax', 'cilFeaturedPlaylist', 'cilFile', 'cilFilterFrames', 'cilFilterPhoto', 'cilFilterSquare', 'cilFilterX', 'cilFilter', 'cilFindInPage', 'cilFingerprint', 'cilFire', 'cilFlagAlt', 'cilFlightTakeoff', 'cilFlipToBack', 'cilFlipToFront', 'cilFlip', 'cilFlower', 'cilFolderOpen', 'cilFolder', 'cilFont', 'cilFootball', 'cilFork', 'cilFridge', 'cilFrown', 'cilFullscreenExit', 'cilFullscreen', 'cilFunctionsAlt', 'cilFunctions', 'cilGamepad', 'cilGarage', 'cilGem', 'cilGif', 'cilGift', 'cilGlobeAlt', 'cilGolfAlt', 'cilGolf', 'cilGradient', 'cilGrain', 'cilGraph', 'cilGridSlash', 'cilGrid', 'cilGroup', 'cilHamburgerMenu', 'cilHandPointDown', 'cilHandPointLeft', 'cilHandPointRight', 'cilHandPointUp', 'cilHappy', 'cilHd', 'cilHdr', 'cilHeader', 'cilHeadphones', 'cilHealing', 'cilHeart', 'cilHighlighter', 'cilHighligt', 'cilHistory', 'cilHome', 'cilHospital', 'cilHotTub', 'cilHouse', 'cilHttps', 'cilImageBroken', 'cilImagePlus', 'cilImage', 'cilInbox', 'cilIndentDecrease', 'cilIndentIncrease', 'cilIndustrySlash', 'cilIndustry', 'cilInfinity', 'cilInfo', 'cilInputHdmi', 'cilInputPower', 'cilInput', 'cilInstitution', 'cilItalic', 'cilJustifyCenter', 'cilJustifyLeft', 'cilJustifyRight', 'cilKeyboard', 'cilLan', 'cilLanguage', 'cilLaptop', 'cilLayers', 'cilLeaf', 'cilLemon', 'cilLevelDown', 'cilLevelUp', 'cilLibraryAdd', 'cilLibraryBuilding', 'cilLibrary', 'cilLifeRing', 'cilLightbulb', 'cilLineSpacing', 'cilLineStyle', 'cilLineWeight', 'cilLinkAlt', 'cilLinkBroken', 'cilLink', 'cilListFilter', 'cilListHighPriority', 'cilListLowPriority', 'cilListNumberedRtl', 'cilListNumbered', 'cilListRich', 'cilList', 'cilLocationPin', 'cilLockLocked', 'cilLockUnlocked', 'cilLocomotive', 'cilLoop1', 'cilLoopCircular', 'cilLoop', 'cilLowVision', 'cilMagnifyingGlass', 'cilMap', 'cilMediaEject', 'cilMediaPause', 'cilMediaPlay', 'cilMediaRecord', 'cilMediaSkipBackward', 'cilMediaSkipForward', 'cilMediaStepBackward', 'cilMediaStepForward', 'cilMediaStop', 'cilMedicalCross', 'cilMeh', 'cilMemory', 'cilMenu', 'cilMic', 'cilMicrophone', 'cilMinus', 'cilMobileLandscape', 'cilMobile', 'cilMoney', 'cilMonitor', 'cilMoodBad', 'cilMoodGood', 'cilMoodVeryBad', 'cilMoodVeryGood', 'cilMoon', 'cilMouse', 'cilMouthSlash', 'cilMove', 'cilMovie', 'cilMugTea', 'cilMug', 'cilMusicNote', 'cilNewspaper', 'cilNoteAdd', 'cilNotes', 'cilObjectGroup', 'cilObjectUngroup', 'cilOpacity', 'cilOpentype', 'cilOptions', 'cilPaintBucket', 'cilPaint', 'cilPaperPlane', 'cilPaperclip', 'cilParagraph', 'cilPaw', 'cilPenAlt', 'cilPenNib', 'cilPen', 'cilPencil', 'cilPeople', 'cilPhone', 'cilPin', 'cilPizza', 'cilPlant', 'cilPlaylistAdd', 'cilPlus', 'cilPool', 'cilPowerStandby', 'cilPregnant', 'cilPrint', 'cilPushchair', 'cilPuzzle', 'cilQrCode', 'cilRain', 'cilRectangle', 'cilRecycle', 'cilReload', 'cilReportSlash', 'cilResizeBoth', 'cilResizeHeight', 'cilResizeWidth', 'cilRestaurant', 'cilRoom', 'cilRouter', 'cilRowing', 'cilRss', 'cilRuble', 'cilRunning', 'cilSad', 'cilSatelite', 'cilSave', 'cilSchool', 'cilScreenDesktop', 'cilScreenSmartphone', 'cilScrubber', 'cilSearch', 'cilSend', 'cilSettings', 'cilShareAll', 'cilShareAlt', 'cilShareBoxed', 'cilShare', 'cilShieldAlt', 'cilShortText', 'cilShower', 'cilSignLanguage', 'cilSignalCellular0', 'cilSignalCellular3', 'cilSignalCellular4', 'cilSim', 'cilSitemap', 'cilSmilePlus', 'cilSmile', 'cilSmokeFree', 'cilSmokeSlash', 'cilSmoke', 'cilSmokingRoom', 'cilSnowflake', 'cilSoccer', 'cilSofa', 'cilSortAlphaDown', 'cilSortAlphaUp', 'cilSortAscending', 'cilSortDescending', 'cilSortNumericDown', 'cilSortNumericUp', 'cilSpa', 'cilSpaceBar', 'cilSpeak', 'cilSpeaker', 'cilSpeech', 'cilSpeedometer', 'cilSpreadsheet', 'cilSquare', 'cilStarHalf', 'cilStar', 'cilStorage', 'cilStream', 'cilStrikethrough', 'cilSun', 'cilSwapHorizontal', 'cilSwapVertical', 'cilSwimming', 'cilSync', 'cilTablet', 'cilTag', 'cilTags', 'cilTask', 'cilTaxi', 'cilTennisBall', 'cilTennis', 'cilTerminal', 'cilTerrain', 'cilTextShapes', 'cilTextSize', 'cilTextSquare', 'cilTextStrike', 'cilText', 'cilThumbDown', 'cilThumbUp', 'cilToggleOff', 'cilToggleOn', 'cilToilet', 'cilTouchApp', 'cilTransfer', 'cilTranslate', 'cilTrash', 'cilTriangle', 'cilTruck', 'cilTv', 'cilUnderline', 'cilUsb', 'cilUserFemale', 'cilUserFollow', 'cilUserPlus', 'cilUserUnfollow', 'cilUserX', 'cilUser', 'cilVector', 'cilVerticalAlignBottom', 'cilVerticalAlignCenter', 'cilVerticalAlignTop', 'cilVideo', 'cilVideogame', 'cilViewColumn', 'cilViewModule', 'cilViewQuilt', 'cilViewStream', 'cilVoiceOverRecord', 'cilVoice', 'cilVolumeHigh', 'cilVolumeLow', 'cilVolumeOff', 'cilWalk', 'cilWallet', 'cilWallpaper', 'cilWarning', 'cilWatch', 'cilWc', 'cilWeightlifitng', 'cilWheelchair', 'cilWifiSignal0', 'cilWifiSignal1', 'cilWifiSignal2', 'cilWifiSignal3', 'cilWifiSignal4', 'cilWifiSignalOff', 'cilWindowMaximize', 'cilWindowMinimize', 'cilWindowRestore', 'cilWindow', 'cilWrapText', 'cilXCircle', 'cilX', 'cilYen', 'cilZoomIn', 'cilZoomOut', 'cilZoom'] @@ -187,6 +187,8 @@ export const TabPanesExample = () => { +React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation. + ## API ### CIcon From a060bb7b28fa06df4db64a1c07063b6359b0ffd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 19 Dec 2022 15:48:07 +0100 Subject: [PATCH 003/465] Update CModal.tsx --- packages/coreui-react/src/components/modal/CModal.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx index 65ae9667..125b2148 100644 --- a/packages/coreui-react/src/components/modal/CModal.tsx +++ b/packages/coreui-react/src/components/modal/CModal.tsx @@ -108,7 +108,7 @@ export const CModal = forwardRef( transition = true, unmountOnClose = true, visible, - ...attributes + ...rest }, ref, ) => { @@ -233,9 +233,10 @@ export const CModal = forwardRef( fullscreen={fullscreen} scrollable={scrollable} size={size} - {...attributes} > - {children} + + {children} + From 9638f40abb0355ba4d9ccb4fbe321be20b340737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 19 Dec 2022 16:59:46 +0100 Subject: [PATCH 004/465] feat(CFormInput, CFormSelect, CFormTextarea): add feedback support to floating labels --- .../components/form/CFormControlWrapper.tsx | 21 ++++++++++++++++++- .../src/components/form/CFormInput.tsx | 2 ++ .../src/components/form/CFormSelect.tsx | 2 ++ .../src/components/form/CFormTextarea.tsx | 2 ++ .../content/4.4/forms/floating-labels.mdx | 4 +++- 5 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx index a6a83fa1..538454a0 100644 --- a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx +++ b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx @@ -12,6 +12,12 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps { * @ignore */ children?: ReactNode + /** + * A string of all className you want applied to the floating label wrapper. + * + * @since 4.3.0 + */ + floatingClassName?: string /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * @@ -42,6 +48,7 @@ export const CFormControlWrapper: FC = ({ feedback, feedbackInvalid, feedbackValid, + floatingClassName, floatingLabel, id, invalid, @@ -51,9 +58,20 @@ export const CFormControlWrapper: FC = ({ valid, }) => { return floatingLabel ? ( - + {children} {label || floatingLabel} + {text && {text}} + ) : ( <> @@ -76,6 +94,7 @@ export const CFormControlWrapper: FC = ({ CFormControlWrapper.propTypes = { children: PropTypes.node, + floatingClassName: PropTypes.string, floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), diff --git a/packages/coreui-react/src/components/form/CFormInput.tsx b/packages/coreui-react/src/components/form/CFormInput.tsx index 2b6e95ed..2a0f55a0 100644 --- a/packages/coreui-react/src/components/form/CFormInput.tsx +++ b/packages/coreui-react/src/components/form/CFormInput.tsx @@ -58,6 +58,7 @@ export const CFormInput = forwardRef( feedback, feedbackInvalid, feedbackValid, + floatingClassName, floatingLabel, id, invalid, @@ -101,6 +102,7 @@ export const CFormInput = forwardRef( feedback={feedback} feedbackInvalid={feedbackInvalid} feedbackValid={feedbackValid} + floatingClassName={floatingClassName} floatingLabel={floatingLabel} id={id} invalid={invalid} diff --git a/packages/coreui-react/src/components/form/CFormSelect.tsx b/packages/coreui-react/src/components/form/CFormSelect.tsx index 9223413f..121b69f8 100644 --- a/packages/coreui-react/src/components/form/CFormSelect.tsx +++ b/packages/coreui-react/src/components/form/CFormSelect.tsx @@ -52,6 +52,7 @@ export const CFormSelect = forwardRef( feedback, feedbackInvalid, feedbackValid, + floatingClassName, floatingLabel, htmlSize, id, @@ -81,6 +82,7 @@ export const CFormSelect = forwardRef( feedback={feedback} feedbackInvalid={feedbackInvalid} feedbackValid={feedbackValid} + floatingClassName={floatingClassName} floatingLabel={floatingLabel} id={id} invalid={invalid} diff --git a/packages/coreui-react/src/components/form/CFormTextarea.tsx b/packages/coreui-react/src/components/form/CFormTextarea.tsx index 5f4d090b..d336ab82 100644 --- a/packages/coreui-react/src/components/form/CFormTextarea.tsx +++ b/packages/coreui-react/src/components/form/CFormTextarea.tsx @@ -44,6 +44,7 @@ export const CFormTextarea = forwardRef feedback, feedbackInvalid, feedbackValid, + floatingClassName, floatingLabel, id, invalid, @@ -70,6 +71,7 @@ export const CFormTextarea = forwardRef feedback={feedback} feedbackInvalid={feedbackInvalid} feedbackValid={feedbackValid} + floatingClassName={floatingClassName} floatingLabel={floatingLabel} id={id} invalid={invalid} diff --git a/packages/docs/content/4.4/forms/floating-labels.mdx b/packages/docs/content/4.4/forms/floating-labels.mdx index ef5958f6..57aa3641 100644 --- a/packages/docs/content/4.4/forms/floating-labels.mdx +++ b/packages/docs/content/4.4/forms/floating-labels.mdx @@ -95,9 +95,10 @@ Form validation styles also work as expected. Date: Mon, 19 Dec 2022 17:09:37 +0100 Subject: [PATCH 005/465] refactor: move `isVisible()` to utils --- .../src/components/carousel/CCarousel.tsx | 11 +---------- .../coreui-react/src/components/sidebar/CSidebar.tsx | 11 +---------- packages/coreui-react/src/utils/index.ts | 3 +++ packages/coreui-react/src/utils/isVisible.ts | 11 +++++++++++ 4 files changed, 16 insertions(+), 20 deletions(-) create mode 100644 packages/coreui-react/src/utils/index.ts create mode 100644 packages/coreui-react/src/utils/isVisible.ts diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx index ef121972..08818bc2 100644 --- a/packages/coreui-react/src/components/carousel/CCarousel.tsx +++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx @@ -10,18 +10,9 @@ import React, { import PropTypes from 'prop-types' import classNames from 'classnames' +import { isVisible } from '../../utils' import { useForkedRef } from '../../utils/hooks' -const isVisible = (element: HTMLDivElement) => { - const rect = element.getBoundingClientRect() - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ) -} - export interface CCarouselProps extends HTMLAttributes { /** * index of the active item. diff --git a/packages/coreui-react/src/components/sidebar/CSidebar.tsx b/packages/coreui-react/src/components/sidebar/CSidebar.tsx index eb21eb82..ec897c2d 100644 --- a/packages/coreui-react/src/components/sidebar/CSidebar.tsx +++ b/packages/coreui-react/src/components/sidebar/CSidebar.tsx @@ -3,6 +3,7 @@ import { createPortal } from 'react-dom' import PropTypes from 'prop-types' import classNames from 'classnames' +import { isVisible } from '../../utils' import { useForkedRef } from '../../utils/hooks' import { CBackdrop } from '../backdrop/CBackdrop' @@ -52,16 +53,6 @@ export interface CSidebarProps extends HTMLAttributes { const isOnMobile = (element: HTMLDivElement) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile')) -const isVisible = (element: HTMLDivElement) => { - const rect = element.getBoundingClientRect() - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ) -} - export const CSidebar = forwardRef( ( { diff --git a/packages/coreui-react/src/utils/index.ts b/packages/coreui-react/src/utils/index.ts new file mode 100644 index 00000000..ac72a6ad --- /dev/null +++ b/packages/coreui-react/src/utils/index.ts @@ -0,0 +1,3 @@ +import isVisible from './isVisible' + +export { isVisible } diff --git a/packages/coreui-react/src/utils/isVisible.ts b/packages/coreui-react/src/utils/isVisible.ts new file mode 100644 index 00000000..0bf5cb30 --- /dev/null +++ b/packages/coreui-react/src/utils/isVisible.ts @@ -0,0 +1,11 @@ +const isVisible = (element: HTMLElement) => { + const rect = element.getBoundingClientRect() + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ) +} + +export default isVisible From 9fb77770fd8889c8f4c1e4b1ea462fdafef91edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 19 Dec 2022 17:48:29 +0100 Subject: [PATCH 006/465] feat(CCarousel): add swipe interactions on touchscreen devices --- .../src/components/carousel/CCarousel.tsx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx index 08818bc2..9a6234e9 100644 --- a/packages/coreui-react/src/components/carousel/CCarousel.tsx +++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx @@ -3,6 +3,7 @@ import React, { createContext, forwardRef, HTMLAttributes, + TouchEvent, useState, useEffect, useRef, @@ -50,6 +51,12 @@ export interface CCarouselProps extends HTMLAttributes { * If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. */ pause?: boolean | 'hover' + /** + * Whether the carousel should support left/right swipe interactions on touchscreen devices. + * + * @since 4.5.0 + */ + touch?: boolean /** * Set type of the transition. */ @@ -84,6 +91,7 @@ export const CCarousel = forwardRef( onSlid, onSlide, pause = 'hover', + touch = true, transition, wrap = true, ...rest @@ -99,6 +107,7 @@ export const CCarousel = forwardRef( const [customInterval, setCustomInterval] = useState() const [direction, setDirection] = useState('next') const [itemsNumber, setItemsNumber] = useState(0) + const [touchPosition, setTouchPosition] = useState(null) const [visible, setVisible] = useState() useEffect(() => { @@ -193,11 +202,38 @@ export const CCarousel = forwardRef( } } + const handleTouchMove = (e: TouchEvent) => { + const touchDown = touchPosition + + if (touchDown === null) { + return + } + + const currentTouch = e.touches[0].clientX + const diff = touchDown - currentTouch + + if (diff > 5) { + handleControlClick('next') + } + + if (diff < -5) { + handleControlClick('prev') + } + + setTouchPosition(null) + } + + const handleTouchStart = (e: TouchEvent) => { + const touchDown = e.touches[0].clientX + setTouchPosition(touchDown) + } + return (
@@ -262,6 +298,7 @@ CCarousel.propTypes = { onSlid: PropTypes.func, onSlide: PropTypes.func, pause: PropTypes.oneOf([false, 'hover']), + touch: PropTypes.bool, transition: PropTypes.oneOf(['slide', 'crossfade']), wrap: PropTypes.bool, } From d26aa5f1deee8b976584e792d71bbe1d160407f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 19 Dec 2022 17:57:48 +0100 Subject: [PATCH 007/465] docs: update API documentation --- packages/coreui-react/src/components/carousel/CCarousel.tsx | 2 +- .../src/components/form/CFormControlWrapper.tsx | 2 +- packages/docs/content/4.4/api/CCarousel.api.mdx | 1 + packages/docs/content/4.4/api/CFormControlWrapper.api.mdx | 1 + packages/docs/content/4.4/api/CFormInput.api.mdx | 1 + packages/docs/content/4.4/api/CFormSelect.api.mdx | 1 + packages/docs/content/4.4/api/CFormTextarea.api.mdx | 1 + packages/docs/content/4.4/api/CToastClose.api.mdx | 6 ++++++ 8 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx index 9a6234e9..87d1a90a 100644 --- a/packages/coreui-react/src/components/carousel/CCarousel.tsx +++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx @@ -52,7 +52,7 @@ export interface CCarouselProps extends HTMLAttributes { */ pause?: boolean | 'hover' /** - * Whether the carousel should support left/right swipe interactions on touchscreen devices. + * Set whether the carousel should support left/right swipe interactions on touchscreen devices. * * @since 4.5.0 */ diff --git a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx index 538454a0..c74fba26 100644 --- a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx +++ b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx @@ -15,7 +15,7 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps { /** * A string of all className you want applied to the floating label wrapper. * - * @since 4.3.0 + * @since 4.5.0 */ floatingClassName?: string /** diff --git a/packages/docs/content/4.4/api/CCarousel.api.mdx b/packages/docs/content/4.4/api/CCarousel.api.mdx index 0d1bd046..ed3fa126 100644 --- a/packages/docs/content/4.4/api/CCarousel.api.mdx +++ b/packages/docs/content/4.4/api/CCarousel.api.mdx @@ -16,5 +16,6 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel' | **onSlid** | Callback fired when a slide transition end. | `(active: number, direction: string) => void` | - | | **onSlide** | Callback fired when a slide transition starts. | `(active: number, direction: string) => void` | - | | **pause** | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | `boolean` \| `'hover'` | hover | +| **touch**
4.5.0+
| Set whether the carousel should support left/right swipe interactions on touchscreen devices. | `boolean` | true | | **transition** | Set type of the transition. | `'slide'` \| `'crossfade'` | - | | **wrap** | Set whether the carousel should cycle continuously or have hard stops. | `boolean` | true | diff --git a/packages/docs/content/4.4/api/CFormControlWrapper.api.mdx b/packages/docs/content/4.4/api/CFormControlWrapper.api.mdx index 1578f671..c303da39 100644 --- a/packages/docs/content/4.4/api/CFormControlWrapper.api.mdx +++ b/packages/docs/content/4.4/api/CFormControlWrapper.api.mdx @@ -10,6 +10,7 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW | **feedback**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackInvalid**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackValid**
4.2.0+
| Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | +| **floatingClassName**
4.5.0+
| A string of all className you want applied to the floating label wrapper. | `string` | - | | **floatingLabel**
4.2.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | | **invalid** | Set component validation state to invalid. | `boolean` | - | | **label**
4.2.0+
| Add a caption for a component. | `ReactNode` | - | diff --git a/packages/docs/content/4.4/api/CFormInput.api.mdx b/packages/docs/content/4.4/api/CFormInput.api.mdx index d6fe5037..36b44cfd 100644 --- a/packages/docs/content/4.4/api/CFormInput.api.mdx +++ b/packages/docs/content/4.4/api/CFormInput.api.mdx @@ -13,6 +13,7 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' | **feedback**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackInvalid**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackValid**
4.2.0+
| Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | +| **floatingClassName**
4.5.0+
| A string of all className you want applied to the floating label wrapper. | `string` | - | | **floatingLabel**
4.2.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | | **invalid** | Set component validation state to invalid. | `boolean` | - | | **label**
4.2.0+
| Add a caption for a component. | `ReactNode` | - | diff --git a/packages/docs/content/4.4/api/CFormSelect.api.mdx b/packages/docs/content/4.4/api/CFormSelect.api.mdx index 3ed682ec..9dbafea4 100644 --- a/packages/docs/content/4.4/api/CFormSelect.api.mdx +++ b/packages/docs/content/4.4/api/CFormSelect.api.mdx @@ -11,6 +11,7 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' | **feedback**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackInvalid**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackValid**
4.2.0+
| Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | +| **floatingClassName**
4.5.0+
| A string of all className you want applied to the floating label wrapper. | `string` | - | | **floatingLabel**
4.2.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | | **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - | | **invalid** | Set component validation state to invalid. | `boolean` | - | diff --git a/packages/docs/content/4.4/api/CFormTextarea.api.mdx b/packages/docs/content/4.4/api/CFormTextarea.api.mdx index 00f8c4c9..c6fe4065 100644 --- a/packages/docs/content/4.4/api/CFormTextarea.api.mdx +++ b/packages/docs/content/4.4/api/CFormTextarea.api.mdx @@ -12,6 +12,7 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' | **feedback**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackInvalid**
4.2.0+
| Provide valuable, actionable feedback. | `ReactNode` | - | | **feedbackValid**
4.2.0+
| Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | +| **floatingClassName**
4.5.0+
| A string of all className you want applied to the floating label wrapper. | `string` | - | | **floatingLabel**
4.2.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | | **invalid** | Set component validation state to invalid. | `boolean` | - | | **label**
4.2.0+
| Add a caption for a component. | `ReactNode` | - | diff --git a/packages/docs/content/4.4/api/CToastClose.api.mdx b/packages/docs/content/4.4/api/CToastClose.api.mdx index c1357d7a..eba2ff59 100644 --- a/packages/docs/content/4.4/api/CToastClose.api.mdx +++ b/packages/docs/content/4.4/api/CToastClose.api.mdx @@ -7,7 +7,13 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **active** | Toggle the active state for the component. | `boolean` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass` \| `FunctionComponent` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | +| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | +| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | +| **type** | Specifies the type of button. Always specify the type attribute for the ` +
+
+

React Modal body text goes here.

+
+
+ + +
+ + + + +```jsx + React Modal title - React Modal body text goes here. + +

React Modal body text goes here.

+ Close Save changes @@ -58,7 +73,9 @@ export const LiveDemoExample = () => { Modal title - Woohoo, you're reading this text in a modal! + +

Woohoo, you're reading this text in a modal!

+ setVisible(false)}> Close @@ -83,7 +100,9 @@ return ( setVisible(false)}> Modal title - Woohoo, you're reading this text in a modal! + +

Woohoo, you're reading this text in a modal!

+ setVisible(false)}> Close From 81ef1ed7ce06704332002925399bec9e460e9662 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 6 Jun 2023 13:11:15 +0200 Subject: [PATCH 141/465] chore: clean-up --- packages/coreui-react/src/components/popover/CPopover.tsx | 1 - packages/coreui-react/src/components/tooltip/CTooltip.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index a7408d58..9b887bbf 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -51,7 +51,6 @@ export interface CPopoverProps extends Omit, 'tit } const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => { - console.log(element) switch (placement) { case 'right': { return isRTL(element) ? 'left' : 'right' diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index db6e7cea..ae025e44 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -47,7 +47,6 @@ export interface CTooltipProps extends Omit, 'con } const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => { - console.log(element) switch (placement) { case 'right': { return isRTL(element) ? 'left' : 'right' From eafc6ceee9a633891edcc3730e06dbd4edca4832 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 6 Jun 2023 14:10:03 +0200 Subject: [PATCH 142/465] refactor(CSpinner): improve class names --- packages/coreui-react/src/components/spinner/CSpinner.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/spinner/CSpinner.tsx b/packages/coreui-react/src/components/spinner/CSpinner.tsx index c031f08a..81fb7c1e 100644 --- a/packages/coreui-react/src/components/spinner/CSpinner.tsx +++ b/packages/coreui-react/src/components/spinner/CSpinner.tsx @@ -51,8 +51,10 @@ export const CSpinner = forwardRef Date: Tue, 6 Jun 2023 14:17:07 +0200 Subject: [PATCH 143/465] build: update eslint configuration --- .eslintrc.js | 44 +++++++++---------- .../src/components/accordion/index.ts | 8 +--- 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ade1db98..82fef581 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,7 +18,7 @@ module.exports = { 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', - "plugin:unicorn/recommended", + 'plugin:unicorn/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { @@ -36,32 +36,30 @@ module.exports = { }, }, rules: { - "unicorn/filename-case": "off", - "unicorn/no-array-for-each": "off", - "unicorn/no-null": "off", - "unicorn/prefer-dom-node-append": "off", - "unicorn/prefer-export-from": "off", - "unicorn/prefer-query-selector": "off", - "unicorn/prevent-abbreviations": "off", + 'unicorn/filename-case': 'off', + 'unicorn/no-array-for-each': 'off', + 'unicorn/no-null': 'off', + 'unicorn/prefer-dom-node-append': 'off', + 'unicorn/prefer-export-from': 'off', + 'unicorn/prefer-query-selector': 'off', + 'unicorn/prevent-abbreviations': 'off', }, overrides: [ { - "files": [ - "packages/docs/build/**" - ], - "env": { - "browser": false, - "node": true + files: ['packages/docs/build/**'], + env: { + browser: false, + node: true, }, - "parserOptions": { - "sourceType": "script" + parserOptions: { + sourceType: 'script', + }, + rules: { + '@typescript-eslint/no-var-requires': 'off', + 'no-console': 'off', + 'unicorn/prefer-module': 'off', + 'unicorn/prefer-top-level-await': 'off', }, - "rules": { - "@typescript-eslint/no-var-requires": "off", - "no-console": "off", - "unicorn/prefer-module": "off", - "unicorn/prefer-top-level-await": "off" - } }, - ] + ], } diff --git a/packages/coreui-react/src/components/accordion/index.ts b/packages/coreui-react/src/components/accordion/index.ts index aef81e77..e1cc95ee 100644 --- a/packages/coreui-react/src/components/accordion/index.ts +++ b/packages/coreui-react/src/components/accordion/index.ts @@ -4,10 +4,4 @@ import { CAccordionButton } from './CAccordionButton' import { CAccordionHeader } from './CAccordionHeader' import { CAccordionItem } from './CAccordionItem' -export { - CAccordion, - CAccordionBody, - CAccordionButton, - CAccordionHeader, - CAccordionItem, -} +export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem } From 76126f99d2ceb06dbb14dfd04f7ca3d79e174927 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 6 Jun 2023 14:17:21 +0200 Subject: [PATCH 144/465] chore: add comments --- packages/coreui-react/src/components/progress/CProgress.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/coreui-react/src/components/progress/CProgress.tsx b/packages/coreui-react/src/components/progress/CProgress.tsx index 2be506cc..9e49ad8f 100644 --- a/packages/coreui-react/src/components/progress/CProgress.tsx +++ b/packages/coreui-react/src/components/progress/CProgress.tsx @@ -29,6 +29,7 @@ export interface CProgressProps white?: boolean } +// TODO: update markup and add '.progress-stacked' in v5 export const CProgress = forwardRef( ({ children, className, height, thin, value = 0, white, ...rest }, ref) => { return ( From eaab23654a7d910c25d93c9171162b1fbf0cc532 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 7 Jun 2023 00:18:01 +0200 Subject: [PATCH 145/465] docs: update SCSS docs --- .../docs/content/components/accordion.mdx | 59 +---- packages/docs/content/components/alert.mdx | 24 +-- packages/docs/content/components/badge.mdx | 22 +- .../docs/content/components/breadcrumb.mdx | 26 +-- packages/docs/content/components/button.mdx | 87 +------- packages/docs/content/components/callout.mdx | 34 +-- packages/docs/content/components/card.mdx | 40 +--- packages/docs/content/components/carousel.mdx | 34 +-- packages/docs/content/components/dropdown.mdx | 87 +------- packages/docs/content/components/footer.mdx | 20 +- packages/docs/content/components/header.mdx | 69 +----- .../docs/content/components/list-group.mdx | 59 +---- packages/docs/content/components/modal.mdx | 73 +------ packages/docs/content/components/navbar.mdx | 87 ++------ .../docs/content/components/navs-tabs.mdx | 55 +---- .../docs/content/components/offcanvas.mdx | 28 +-- .../docs/content/components/pagination.mdx | 63 +----- .../docs/content/components/placeholder.mdx | 6 + packages/docs/content/components/popover.mdx | 133 +++++++----- packages/docs/content/components/progress.mdx | 26 +-- packages/docs/content/components/sidebar.mdx | 203 +----------------- packages/docs/content/components/spinner.mdx | 35 +-- packages/docs/content/components/toast.mdx | 35 +-- packages/docs/content/components/tooltip.mdx | 72 ++++--- packages/docs/gatsby-config.js | 7 + packages/docs/gatsby-node.js | 43 ++-- packages/docs/src/components/ScssDocs.tsx | 69 ++++-- packages/docs/src/templates/MdxLayout.tsx | 3 +- 28 files changed, 292 insertions(+), 1207 deletions(-) diff --git a/packages/docs/content/components/accordion.mdx b/packages/docs/content/components/accordion.mdx index 951d9523..3dd6c723 100644 --- a/packages/docs/content/components/accordion.mdx +++ b/packages/docs/content/components/accordion.mdx @@ -150,30 +150,7 @@ Add `alwaysOpen` property to make react accordion items stay open when another i React accordions use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-accordion-color: #{color-contrast($accordion-bg)}; ---cui-accordion-bg: #{$accordion-bg}; ---cui-accordion-transition: #{$accordion-transition}; ---cui-accordion-border-color: #{$accordion-border-color}; ---cui-accordion-border-width: #{$accordion-border-width}; ---cui-accordion-border-radius: #{$accordion-border-radius}; ---cui-accordion-inner-border-radius: #{$accordion-inner-border-radius}; ---cui-accordion-btn-padding-x: #{$accordion-button-padding-x}; ---cui-accordion-btn-padding-y: #{$accordion-button-padding-y}; ---cui-accordion-btn-color: #{$accordion-color}; ---cui-accordion-btn-bg: #{$accordion-button-bg}; ---cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)}; ---cui-accordion-btn-icon-width: #{$accordion-icon-width}; ---cui-accordion-btn-icon-transform: #{$accordion-icon-transform}; ---cui-accordion-btn-icon-transition: #{$accordion-icon-transition}; ---cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; ---cui-accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; ---cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; ---cui-accordion-body-padding-x: #{$accordion-body-padding-x}; ---cui-accordion-body-padding-y: #{$accordion-body-padding-y}; ---cui-accordion-active-color: #{$accordion-button-active-color}; ---cui-accordion-active-bg: #{$accordion-button-active-bg}; -``` + #### How to use CSS variables @@ -187,39 +164,7 @@ return ... ### SASS variables -```sass -$accordion-padding-y: 1rem; -$accordion-padding-x: 1.25rem; -$accordion-color: var(--cui-body-color); -$accordion-bg: $body-bg; -$accordion-border-width: $border-width; -$accordion-border-color: var(--cui-border-color); -$accordion-border-radius: $border-radius; -$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width); - -$accordion-body-padding-y: $accordion-padding-y; -$accordion-body-padding-x: $accordion-padding-x; - -$accordion-button-padding-y: $accordion-padding-y; -$accordion-button-padding-x: $accordion-padding-x; -$accordion-button-color: $accordion-color; -$accordion-button-bg: var(--cui-accordion-bg); -$accordion-transition: $btn-transition, border-radius .15s ease; -$accordion-button-active-bg: tint-color($component-active-bg, 90%); -$accordion-button-active-color: shade-color($primary, 10%); - -$accordion-button-focus-border-color: $input-focus-border-color; -$accordion-button-focus-box-shadow: $btn-focus-box-shadow; - -$accordion-icon-width: 1.25rem; -$accordion-icon-color: $accordion-button-color; -$accordion-icon-active-color: $accordion-button-active-color; -$accordion-icon-transition: transform .2s ease-in-out; -$accordion-icon-transform: rotate(-180deg); - -$accordion-button-icon: url("data:image/svg+xml,"); -$accordion-button-active-icon: url("data:image/svg+xml,"); -``` + ## API diff --git a/packages/docs/content/components/alert.mdx b/packages/docs/content/components/alert.mdx index 68971f76..dee0b432 100644 --- a/packages/docs/content/components/alert.mdx +++ b/packages/docs/content/components/alert.mdx @@ -231,16 +231,7 @@ React Alert component can also be easily dismissed. Just add the `dismissible` p React alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-alert-bg: transparent; ---cui-alert-padding-x: #{$alert-padding-x}; ---cui-alert-padding-y: #{$alert-padding-y}; ---cui-alert-margin-bottom: #{$alert-margin-bottom}; ---cui-alert-color: inherit; ---cui-alert-border-color: transparent; ---cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color); ---cui-alert-border-radius: #{$alert-border-radius}; -``` + #### How to use CSS variables @@ -254,18 +245,7 @@ return ... ### SASS variables -```sass -$alert-padding-y: $spacer; -$alert-padding-x: $spacer; -$alert-margin-bottom: 1rem; -$alert-border-radius: $border-radius; -$alert-link-font-weight: $font-weight-bold; -$alert-border-width: $border-width; -$alert-bg-scale: -80%; -$alert-border-scale: -70%; -$alert-color-scale: 40%; -$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side -``` + ## API diff --git a/packages/docs/content/components/badge.mdx b/packages/docs/content/components/badge.mdx index 894a7959..e7efa268 100644 --- a/packages/docs/content/components/badge.mdx +++ b/packages/docs/content/components/badge.mdx @@ -123,14 +123,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded. React badges use local CSS variables on `.badges` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-badge-padding-x: #{$badge-padding-x}; ---cui-badge-padding-y: #{$badge-padding-y}; ---cui-badge-font-size: #{$badge-font-size}; ---cui-badge-font-weight: #{$badge-font-weight}; ---cui-badge-color: #{$badge-color}; ---cui-badge-border-radius: #{$badge-border-radius}; -``` + #### How to use CSS variables @@ -144,18 +137,7 @@ return ... ### SASS variables -```sass -$badge-font-size: .75em; -$badge-font-weight: $font-weight-bold; -$badge-color: $high-emphasis-inverse; -$badge-padding-y: .35em; -$badge-padding-x: .65em; -$badge-border-radius: $border-radius; - -$badge-font-size-sm: .65em; -$badge-padding-y-sm: .3em; -$badge-padding-x-sm: .5em; -``` + ## API diff --git a/packages/docs/content/components/breadcrumb.mdx b/packages/docs/content/components/breadcrumb.mdx index 6c27a8a6..96c0d6df 100644 --- a/packages/docs/content/components/breadcrumb.mdx +++ b/packages/docs/content/components/breadcrumb.mdx @@ -86,17 +86,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p React breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-breadcrumb-padding-x: #{$breadcrumb-padding-x}; ---cui-breadcrumb-padding-y: #{$breadcrumb-padding-y}; ---cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; ---cui-breadcrumb-font-size: #{$breadcrumb-font-size}; ---cui-breadcrumb-bg: #{$breadcrumb-bg}; ---cui-breadcrumb-border-radius: #{$breadcrumb-border-radius}; ---cui-breadcrumb-divider-color: #{$breadcrumb-divider-color}; ---cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; ---cui-breadcrumb-item-active-color: #{$breadcrumb-active-color}; -``` + #### How to use CSS variables @@ -110,19 +100,7 @@ return ... ### SASS variables -```sass -$breadcrumb-font-size: null; -$breadcrumb-padding-y: 0; -$breadcrumb-padding-x: 0; -$breadcrumb-item-padding-x: .5rem; -$breadcrumb-margin-bottom: 1rem; -$breadcrumb-bg: unset; -$breadcrumb-divider-color: $gray-600; -$breadcrumb-active-color: $gray-600; -$breadcrumb-divider: quote("/"); -$breadcrumb-divider-flipped: $breadcrumb-divider; -$breadcrumb-border-radius: null; -``` + ## API diff --git a/packages/docs/content/components/button.mdx b/packages/docs/content/components/button.mdx index 75ef6ecb..4543fb55 100644 --- a/packages/docs/content/components/button.mdx +++ b/packages/docs/content/components/button.mdx @@ -193,22 +193,7 @@ Additional utilities can be used to adjust the alignment of buttons when horizon React buttons use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-btn-padding-x: #{$btn-padding-x}; ---cui-btn-padding-y: #{$btn-padding-y}; ---cui-btn-font-family: #{$btn-font-family}; ---cui-btn-font-size: #{$btn-font-size}; ---cui-btn-font-weight: #{$btn-font-weight}; ---cui-btn-line-height: #{$btn-line-height}; ---cui-btn-color: #{$body-color}; ---cui-btn-bg: transparent; ---cui-btn-border-width: #{$btn-border-width}; ---cui-btn-border-color: transparent; ---cui-btn-border-radius: #{$btn-border-radius}; ---cui-btn-box-shadow: #{$btn-box-shadow}; ---cui-btn-disabled-opacity: #{$btn-disabled-opacity}; ---cui-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--cui-btn-focus-shadow-rgb), .5); -``` + #### How to use CSS variables @@ -222,75 +207,7 @@ return ... ### SASS variables -```sass -$btn-padding-y: $input-btn-padding-y; -$btn-padding-x: $input-btn-padding-x; -$btn-font-family: $input-btn-font-family; -$btn-font-size: $input-btn-font-size; -$btn-line-height: $input-btn-line-height; -$btn-white-space: null; // Set to `nowrap` to prevent text wrapping - -$btn-padding-y-sm: $input-btn-padding-y-sm; -$btn-padding-x-sm: $input-btn-padding-x-sm; -$btn-font-size-sm: $input-btn-font-size-sm; - -$btn-padding-y-lg: $input-btn-padding-y-lg; -$btn-padding-x-lg: $input-btn-padding-x-lg; -$btn-font-size-lg: $input-btn-font-size-lg; - -$btn-border-width: $input-btn-border-width; - -$btn-font-weight: $font-weight-normal; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); -$btn-focus-width: $input-btn-focus-width; -$btn-focus-box-shadow: $input-btn-focus-box-shadow; -$btn-disabled-opacity: .65; -$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); - -$btn-link-color: var(--cui-link-color); -$btn-link-hover-color: var(--cui-link-hover-color); -$btn-link-disabled-color: $gray-600; - -// Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius; -$btn-border-radius-sm: $border-radius-sm; -$btn-border-radius-lg: $border-radius-lg; - -$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; - -$btn-hover-bg-shade-amount: 15%; -$btn-hover-bg-tint-amount: 15%; -$btn-hover-border-shade-amount: 20%; -$btn-hover-border-tint-amount: 10%; -$btn-active-bg-shade-amount: 20%; -$btn-active-bg-tint-amount: 20%; -$btn-active-border-shade-amount: 25%; -$btn-active-border-tint-amount: 10%; - -// scss-docs-start button-variants -$button-variants: ( - "primary": btn-color-map($primary, $primary), - "secondary": btn-color-map($secondary, $secondary), - "success": btn-color-map($success, $success), - "danger": btn-color-map($danger, $danger), - "warning": btn-color-map($warning, $warning), - "info": btn-color-map($info, $info), - "light": btn-color-map($light, $light), - "dark": btn-color-map($dark, $dark) -); - -$button-outline-ghost-variants: ( - "primary": btn-outline-color-map($primary), - "secondary": btn-outline-color-map($secondary), - "success": btn-outline-color-map($success), - "danger": btn-outline-color-map($danger), - "warning": btn-outline-color-map($warning), - "info": btn-outline-color-map($info), - "light": btn-outline-color-map($light), - "dark": btn-outline-color-map($dark) -); -// scss-docs-end button-variants -``` + ## API diff --git a/packages/docs/content/components/callout.mdx b/packages/docs/content/components/callout.mdx index f40b8428..71ef0099 100644 --- a/packages/docs/content/components/callout.mdx +++ b/packages/docs/content/components/callout.mdx @@ -61,16 +61,7 @@ Callout component is prepared for any length of text, as well as an optional ele React callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-callout-padding-x: #{$callout-padding-x}; ---cui-callout-padding-y: #{$callout-padding-y}; ---cui-callout-margin-x: #{$callout-margin-x}; ---cui-callout-margin-y: #{$callout-margin-y}; ---cui-callout-border-width: #{$callout-border-width}; ---cui-callout-border-color: #{$callout-border-color}; ---cui-callout-border-left-width: #{$callout-border-left-width}; ---cui-callout-border-radius: #{$callout-border-radius}; -``` + #### How to use CSS variables @@ -84,28 +75,7 @@ return ... ### SASS variables -```sass -$callout-padding-y: $spacer; -$callout-padding-x: $spacer; -$callout-margin-y: $spacer; -$callout-margin-x: 0; -$callout-border-radius: $border-radius; -$callout-border-width: $border-width; -$callout-border-color: $border-color; -$callout-border-left-width: (4 * $callout-border-width); - -$callout-variants: ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "danger": $danger, - "warning": $warning, - "info": $info, - "light": $light, - "dark": $dark -); -``` - + ## API diff --git a/packages/docs/content/components/card.mdx b/packages/docs/content/components/card.mdx index 59c55761..fc44c610 100644 --- a/packages/docs/content/components/card.mdx +++ b/packages/docs/content/components/card.mdx @@ -972,25 +972,7 @@ Just like with card groups, card footers will automatically line up. React cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-card-spacer-y: #{$card-spacer-y}; ---cui-card-spacer-x: #{$card-spacer-x}; ---cui-card-title-spacer-y: #{$card-title-spacer-y}; ---cui-card-border-width: #{$card-border-width}; ---cui-card-border-color: #{$card-border-color}; ---cui-card-border-radius: #{$card-border-radius}; ---cui-card-box-shadow: #{$card-box-shadow}; ---cui-card-inner-border-radius: #{$card-inner-border-radius}; ---cui-card-cap-padding-y: #{$card-cap-padding-y}; ---cui-card-cap-padding-x: #{$card-cap-padding-x}; ---cui-card-cap-bg: #{$card-cap-bg}; ---cui-card-cap-color: #{$card-cap-color}; ---cui-card-height: #{$card-height}; ---cui-card-color: #{$card-color}; ---cui-card-bg: #{$card-bg}; ---cui-card-img-overlay-padding: #{$card-img-overlay-padding}; ---cui-card-group-margin: #{$card-group-margin}; -``` + #### How to use CSS variables @@ -1004,25 +986,7 @@ return ... ### SASS variables -```sass -$card-spacer-y: $spacer; -$card-spacer-x: $spacer; -$card-title-spacer-y: $spacer * .5; -$card-border-width: $border-width; -$card-border-color: var(--cui-border-color-translucent); -$card-border-radius: $border-radius; -$card-box-shadow: null; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width); -$card-cap-padding-y: $card-spacer-y * .5; -$card-cap-padding-x: $card-spacer-x; -$card-cap-bg: rgba($black, .03); -$card-cap-color: unset; -$card-height: null; -$card-color: unset; -$card-bg: $white; -$card-img-overlay-padding: $spacer; -$card-group-margin: $grid-gutter-width * .5; -``` + ## API diff --git a/packages/docs/content/components/carousel.mdx b/packages/docs/content/components/carousel.mdx index 8d90f360..a79a0ed2 100644 --- a/packages/docs/content/components/carousel.mdx +++ b/packages/docs/content/components/carousel.mdx @@ -215,39 +215,7 @@ Add `dark` property to the `CCarousel` for darker controls, indicators, and capt ### SASS variables -```sass -$carousel-control-color: $high-emphasis-inverse; -$carousel-control-width: 15%; -$carousel-control-opacity: .5; -$carousel-control-hover-opacity: .9; -$carousel-control-transition: opacity .15s ease; - -$carousel-indicator-width: 30px; -$carousel-indicator-height: 3px; -$carousel-indicator-hit-area-height: 10px; -$carousel-indicator-spacer: 3px; -$carousel-indicator-opacity: .5; -$carousel-indicator-active-bg: $white; -$carousel-indicator-active-opacity: 1; -$carousel-indicator-transition: opacity .6s ease; - -$carousel-caption-width: 70%; -$carousel-caption-color: $high-emphasis-inverse; -$carousel-caption-padding-y: 1.25rem; -$carousel-caption-spacer: 1.25rem; - -$carousel-control-icon-width: 2rem; - -$carousel-control-prev-icon-bg: url("data:image/svg+xml,"); -$carousel-control-next-icon-bg: url("data:image/svg+xml,"); - -$carousel-transition-duration: .6s; -$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) - -$carousel-dark-indicator-active-bg: $black; -$carousel-dark-caption-color: $high-emphasis; -$carousel-dark-control-icon-filter: invert(1) grayscale(100); -``` + ## API diff --git a/packages/docs/content/components/dropdown.mdx b/packages/docs/content/components/dropdown.mdx index 5e7a3c57..88299603 100644 --- a/packages/docs/content/components/dropdown.mdx +++ b/packages/docs/content/components/dropdown.mdx @@ -578,50 +578,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu. React dropdowns use local CSS variables on `.dropdown` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-dropdown-min-width: #{$dropdown-min-width}; ---cui-dropdown-padding-x: #{$dropdown-padding-x}; ---cui-dropdown-padding-y: #{$dropdown-padding-y}; ---cui-dropdown-spacer: #{$dropdown-spacer}; ---cui-dropdown-font-size: #{$dropdown-font-size}; ---cui-dropdown-color: #{$dropdown-color}; ---cui-dropdown-bg: #{$dropdown-bg}; ---cui-dropdown-border-color: #{$dropdown-border-color}; ---cui-dropdown-border-radius: #{$dropdown-border-radius}; ---cui-dropdown-border-width: #{$dropdown-border-width}; ---cui-dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; ---cui-dropdown-divider-bg: #{$dropdown-divider-bg}; ---cui-dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; ---cui-dropdown-box-shadow: #{$dropdown-box-shadow}; ---cui-dropdown-link-color: #{$dropdown-link-color}; ---cui-dropdown-link-hover-color: #{$dropdown-link-hover-color}; ---cui-dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; ---cui-dropdown-link-active-color: #{$dropdown-link-active-color}; ---cui-dropdown-link-active-bg: #{$dropdown-link-active-bg}; ---cui-dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; ---cui-dropdown-item-padding-x: #{$dropdown-item-padding-x}; ---cui-dropdown-item-padding-y: #{$dropdown-item-padding-y}; ---cui-dropdown-header-color: #{$dropdown-header-color}; ---cui-dropdown-header-padding-x: #{$dropdown-header-padding-x}; ---cui-dropdown-header-padding-y: #{$dropdown-header-padding-y}; -``` + Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. -```sass ---cui-dropdown-color: #{$dropdown-dark-color}; ---cui-dropdown-bg: #{$dropdown-dark-bg}; ---cui-dropdown-border-color: #{$dropdown-dark-border-color}; ---cui-dropdown-box-shadow: #{$dropdown-dark-box-shadow}; ---cui-dropdown-link-color: #{$dropdown-dark-link-color}; ---cui-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; ---cui-dropdown-divider-bg: #{$dropdown-dark-divider-bg}; ---cui-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; ---cui-dropdown-link-active-color: #{$dropdown-dark-link-active-color}; ---cui-dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; ---cui-dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; ---cui-dropdown-header-color: #{$dropdown-dark-header-color}; -``` + #### How to use CSS variables @@ -635,41 +596,15 @@ return ... ### SASS variables -```sass -$dropdown-min-width: 10rem; -$dropdown-padding-x: 0; -$dropdown-padding-y: .5rem; -$dropdown-spacer: .125rem; -$dropdown-font-size: $font-size-base; -$dropdown-color: $body-color; -$dropdown-bg: $white; -$dropdown-border-color: var(--cui-border-color-translucent); -$dropdown-border-radius: $border-radius; -$dropdown-border-width: $border-width; -$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width); -$dropdown-divider-bg: $dropdown-border-color; -$dropdown-divider-margin-y: $spacer * .5; -$dropdown-box-shadow: $box-shadow; - -$dropdown-link-color: $gray-900; -$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%); -$dropdown-link-hover-bg: $gray-200; - -$dropdown-link-active-color: $component-active-color; -$dropdown-link-active-bg: $component-active-bg; - -$dropdown-link-disabled-color: $gray-500; - -$dropdown-item-padding-y: $spacer * .25; -$dropdown-item-padding-x: $spacer; - -$dropdown-header-color: $gray-600; -$dropdown-header-padding-x: $dropdown-item-padding-x; -$dropdown-header-padding-y: $dropdown-padding-y; -// fusv-disable -$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v4.2.0 -// fusv-enable -``` + + +Variables for the dark dropdown: + + + +Variables for the CSS-based carets that indicate a dropdown's interactivity: + + ## API diff --git a/packages/docs/content/components/footer.mdx b/packages/docs/content/components/footer.mdx index 01a25590..a1b380c8 100644 --- a/packages/docs/content/components/footer.mdx +++ b/packages/docs/content/components/footer.mdx @@ -30,15 +30,7 @@ import { CFooter, CLink } from '@coreui/react/src/index' React footers use local CSS variables on `.footer` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-footer-min-height: #{$footer-min-height}; ---cui-footer-padding-x: #{$footer-padding-x}; ---cui-footer-padding-y: #{$footer-padding-y}; ---cui-footer-color: #{$footer-color}; ---cui-footer-bg: #{$footer-bg}; ---cui-footer-border-color: #{$footer-border-color}; ---cui-footer-border: #{$footer-border-width} solid var(--cui-footer-border-color); -``` + #### How to use CSS variables @@ -52,15 +44,7 @@ return ... ### SASS variables -```sass -$footer-min-height: 3rem; -$footer-padding-y: $spacer * .5; -$footer-padding-x: $spacer; -$footer-bg: $gray-100; -$footer-color: $body-color; -$footer-border-width: 1px; -$footer-border-color: $border-color; -``` + ## API diff --git a/packages/docs/content/components/header.mdx b/packages/docs/content/components/header.mdx index dc97f09b..d19e7c7b 100644 --- a/packages/docs/content/components/header.mdx +++ b/packages/docs/content/components/header.mdx @@ -150,34 +150,7 @@ return ( React headers use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-header-min-height: #{$header-min-height}; ---cui-header-padding-x: #{$header-padding-x}; ---cui-header-padding-y: #{$header-padding-y}; ---cui-header-bg: #{$header-bg}; ---cui-header-color: #{$header-color}; ---cui-header-border-color: #{$header-border-color}; ---cui-header-border: #{$header-border-width} solid var(--cui-header-border-color); ---cui-header-hover-color: #{$header-hover-color}; ---cui-header-disabled-color: #{$header-disabled-color}; ---cui-header-active-color: #{$header-active-color}; ---cui-header-brand-padding-y: #{$header-brand-padding-y}; ---cui-header-brand-color: #{$header-brand-color}; ---cui-header-brand-hover-color: #{$header-brand-hover-color}; ---cui-header-toggler-padding-x: #{$header-toggler-padding-x}; ---cui-header-toggler-padding-y: #{$header-toggler-padding-y}; ---cui-header-toggler-bg: #{$header-toggler-bg}; ---cui-header-toggler-color: #{$header-toggler-color}; ---cui-header-toggler-border-radius: #{$header-toggler-border-radius}; ---cui-header-toggler-hover-color: #{$header-toggler-hover-color}; ---cui-header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)}; ---cui-header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)}; ---cui-header-nav-link-padding-x: #{$header-nav-link-padding-x}; ---cui-header-nav-link-padding-y: #{$header-nav-link-padding-y}; ---cui-header-divider-border-color: #{$header-divider-border-color}; ---cui-header-divider-border: #{$header-divider-border-width} solid var(--cui-header-divider-border-color); ---cui-subheader-min-height: #{$subheader-min-height}; -``` + #### How to use CSS variables @@ -191,45 +164,7 @@ return ... ### SASS variables -```sass -$header-min-height: 4rem; -$header-padding-y: $spacer * .5; -$header-padding-x: $spacer * .5; -$header-brand-font-size: $font-size-lg; -$header-color: $medium-emphasis; -$header-bg: $white; -$header-border-color: $border-color; -$header-border-width: 1px; -$header-hover-color: $high-emphasis; -$header-active-color: $high-emphasis; -$header-disabled-color: $disabled; - -// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link -$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2; -$header-brand-height: $header-brand-font-size * $line-height-base; -$header-brand-padding-y: ($nav-link-height - $header-brand-height) * .5; -$header-brand-margin-end: 1rem; -$header-brand-font-size: $font-size-lg; -$header-brand-color: $gray-900; -$header-brand-hover-color: shade-color($gray-900, 10%); - -$header-toggler-padding-y: .25rem; -$header-toggler-padding-x: .75rem; -$header-toggler-font-size: $font-size-lg; -$header-toggler-color: $header-color; -$header-toggler-bg: transparent; -$header-toggler-border-radius: $btn-border-radius; -$header-toggler-hover-color: $header-active-color; - -$header-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); -$header-toggler-hover-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); - -$header-nav-link-padding-x: .5rem; -$header-nav-link-padding-y: .5rem; - -$header-divider-border-width: 1px; -$header-divider-border-color: $header-border-color; -``` + ## API diff --git a/packages/docs/content/components/list-group.mdx b/packages/docs/content/components/list-group.mdx index 021966f3..5127f7c0 100644 --- a/packages/docs/content/components/list-group.mdx +++ b/packages/docs/content/components/list-group.mdx @@ -318,25 +318,7 @@ And if you want `