gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-01 21:33:07 +02:00
parent 8828eccadb
commit f4b25703db
22 changed files with 275 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/components/base/cards/Cards.js
View File

@ -355,7 +355,7 @@ const Cards = () => {
</p>
<Example href="components/card/#sizing">
<CRow>
<CCol sm="6">
<CCol sm={6}>
<CCard>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@ -366,7 +366,7 @@ const Cards = () => {
</CCardBody>
</CCard>
</CCol>
<CCol sm="6">
<CCol sm={6}>
<CCard>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>

4
src/views/components/base/collapses/Collapses.js
View File

@ -64,7 +64,7 @@ const Collapses = () => {
Toggle both elements
</CButton>
<CRow>
<CCol xs="6">
<CCol xs={6}>
<CCollapse visible={visibleA}>
<CCard className="mt-3">
<CCardBody>
@ -75,7 +75,7 @@ const Collapses = () => {
</CCard>
</CCollapse>
</CCol>
<CCol xs="6">
<CCol xs={6}>
<CCollapse visible={visibleB}>
<CCard className="mt-3">
<CCardBody>

4
src/views/components/base/jumbotrons/Jumbotrons.js
View File

@ -21,7 +21,7 @@ const Jumbotrons = () => {
<CButton size="lg">Example button</CButton>
</CContainer>
<CRow className="align-items-md-stretch">
<CCol md="6">
<CCol md={6}>
<div className="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2>
<p>
@ -33,7 +33,7 @@ const Jumbotrons = () => {
</CButton>
</div>
</CCol>
<CCol md="6">
<CCol md={6}>
<div className="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2>
<p>

8
src/views/components/base/navbars/Navbars.js
View File

@ -8,7 +8,7 @@ import {
CDropdownMenu,
CDropdownToggle,
CForm,
CFormControl,
CFormInput,
CImage,
CNavbar,
CNavbarNav,
@ -44,7 +44,7 @@ const CNavbars = () => {
</CNavbarNav>
<CNavbarNav className="ms-auto">
<CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Search" size="sm" />
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
<CButton color="light" className="my-2 my-sm-0" type="submit">
Search
</CButton>
@ -148,7 +148,7 @@ const CNavbars = () => {
<CCardBody>
<CNavbar light color="light">
<CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Search" size="sm" />
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
<CButton color="outline-success" className="my-2 my-sm-0" type="submit">
Search
</CButton>
@ -162,7 +162,7 @@ const CNavbars = () => {
<CCardBody>
<CNavbar light color="light">
<CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Username" />
<CFormInput className="me-sm-2" placeholder="Username" />
</CForm>
</CNavbar>
</CCardBody>

6
src/views/components/buttons/button-groups/ButtonGroups.js
View File

@ -13,7 +13,7 @@ import {
CCardHeader,
CCol,
CFormCheck,
CFormControl,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
@ -220,7 +220,7 @@ const ButtonGroups = () => {
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl
<CFormInput
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
@ -248,7 +248,7 @@ const ButtonGroups = () => {
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl
<CFormInput
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"

29
src/views/components/forms/checks-radios/ChecksRadios.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
const ChecksRadios = () => {
@ -106,25 +106,18 @@ const ChecksRadios = () => {
attribute.
</p>
<Example href="forms/checks-radios#switches">
<CFormCheck
switch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormCheck
switch
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch
label="Checked switch checkbox input"
id="formSwitchCheckChecked"
defaultChecked
/>
<CFormCheck
switch
<CFormSwitch
label="Disabled switch checkbox input"
id="formSwitchCheckDisabled"
disabled
/>
<CFormCheck
switch
<CFormSwitch
label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled"
defaultChecked
@ -141,19 +134,13 @@ const ChecksRadios = () => {
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#sizes">
<CFormCheck
switch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormCheck
switch
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch
size="lg"
label="Large switch checkbox input"
id="formSwitchCheckDefaultLg"
/>
<CFormCheck
switch
<CFormSwitch
size="xl"
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"

45
src/views/components/forms/floating-labels/FloatingLabels.js
View File

@ -4,10 +4,11 @@ import {
CCardBody,
CCardHeader,
CCol,
CFormControl,
CFormInput,
CFormLabel,
CFormFloating,
CFormSelect,
CFormTextarea,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
@ -25,22 +26,21 @@ const FloatingLabels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormControl&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each{' '}
<code>&lt;CFormControl&gt;</code> as our method of CSS-only floating labels uses the{' '}
<code>:placeholder-shown</code> pseudo-element. Also note that the{' '}
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
(e.g., <code>~</code>).
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<Example href="forms/floating-labels">
<CFormFloating className="mb-3">
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormControl type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
@ -49,7 +49,7 @@ const FloatingLabels = () => {
</p>
<Example href="forms/floating-labels">
<CFormFloating>
<CFormControl
<CFormInput
type="email"
id="floatingInputValue"
placeholder="name@example.com"
@ -68,33 +68,30 @@ const FloatingLabels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be
the same height as <code>&lt;CFormControl&gt;</code>s.
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
<code>&lt;CFormInput&gt;</code>s.
</p>
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
<CFormTextarea
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormControl>
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
To set a custom height on your{' '}
<code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>, do not use the{' '}
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
<CFormTextarea
placeholder="Leave a comment here"
id="floatingTextarea2"
style={{ height: '100px' }}
></CFormControl>
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
@ -108,9 +105,9 @@ const FloatingLabels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '}
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
<code>&lt;CFormControl&gt;</code>s, they&#39;ll always show the{' '}
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
<code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
@ -144,7 +141,7 @@ const FloatingLabels = () => {
<CRow xs={{ gutter: 2 }}>
<CCol md>
<CFormFloating>
<CFormControl
<CFormInput
type="email"
id="floatingInputGrid"
placeholder="name@example.com"

43
src/views/components/forms/form-control/FormControl.js
View File

@ -6,8 +6,9 @@ import {
CCardHeader,
CCol,
CForm,
CFormControl,
CFormInput,
CFormLabel,
CFormTextarea,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
@ -28,7 +29,7 @@ const FormControl = () => {
<CForm>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
<CFormControl
<CFormInput
type="email"
id="exampleFormControlInput1"
placeholder="name@example.com"
@ -36,11 +37,7 @@ const FormControl = () => {
</div>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormControl
component="textarea"
id="exampleFormControlTextarea1"
rows="3"
></CFormControl>
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
</div>
</CForm>
</Example>
@ -58,20 +55,20 @@ const FormControl = () => {
<code>size=&#34;sm&#34;</code>.
</p>
<Example href="forms/form-control#sizing">
<CFormControl
<CFormInput
type="text"
size="lg"
placeholder="Large input"
aria-label="lg input example"
/>
<br />
<CFormControl
<CFormInput
type="text"
placeholder="Default input"
aria-label="default input example"
/>
<br />
<CFormControl
<CFormInput
type="text"
size="sm"
placeholder="Small input"
@ -92,14 +89,14 @@ const FormControl = () => {
appearance and remove pointer events.
</p>
<Example href="forms/form-control#disabled">
<CFormControl
<CFormInput
type="text"
placeholder="Disabled input"
aria-label="Disabled input example"
disabled
/>
<br />
<CFormControl
<CFormInput
type="text"
placeholder="Disabled readonly input"
aria-label="Disabled input example"
@ -123,7 +120,7 @@ const FormControl = () => {
but retain the standard cursor.
</p>
<Example href="forms/form-control#readonly">
<CFormControl
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
@ -150,7 +147,7 @@ const FormControl = () => {
Email
</CFormLabel>
<div className="col-sm-10">
<CFormControl
<CFormInput
type="text"
id="staticEmail"
defaultValue="email@example.com"
@ -164,7 +161,7 @@ const FormControl = () => {
Password
</CFormLabel>
<div className="col-sm-10">
<CFormControl type="password" id="inputPassword" />
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
@ -174,7 +171,7 @@ const FormControl = () => {
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
Email
</CFormLabel>
<CFormControl
<CFormInput
type="text"
id="staticEmail2"
defaultValue="email@example.com"
@ -186,7 +183,7 @@ const FormControl = () => {
<CFormLabel htmlFor="inputPassword2" className="visually-hidden">
Password
</CFormLabel>
<CFormControl type="password" id="inputPassword2" placeholder="Password" />
<CFormInput type="password" id="inputPassword2" placeholder="Password" />
</div>
<div className="col-auto">
<CButton type="submit" className="mb-3">
@ -207,23 +204,23 @@ const FormControl = () => {
<Example href="forms/form-control#file-input">
<div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormControl type="file" id="formFile" />
<CFormInput type="file" id="formFile" />
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
<CFormControl type="file" id="formFileMultiple" multiple />
<CFormInput type="file" id="formFileMultiple" multiple />
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
<CFormControl type="file" id="formFileDisabled" disabled />
<CFormInput type="file" id="formFileDisabled" disabled />
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
<CFormControl type="file" size="sm" id="formFileSm" />
<CFormInput type="file" size="sm" id="formFileSm" />
</div>
<div>
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
<CFormControl type="file" size="lg" id="formFileLg" />
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</CCardBody>
@ -237,7 +234,7 @@ const FormControl = () => {
<CCardBody>
<Example href="forms/form-control#color">
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormControl
<CFormInput
type="color"
id="exampleColorInput"
defaultValue="#563d7c"

67
src/views/components/forms/input-group/InputGroup.js
View File

@ -11,9 +11,10 @@ import {
CDropdownMenu,
CDropdownToggle,
CFormCheck,
CFormControl,
CFormInput,
CFormLabel,
CFormSelect,
CFormTextarea,
CInputGroup,
CInputGroupText,
CRow,
@ -40,14 +41,14 @@ const Select = () => {
<Example href="forms/input-group">
<CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormControl
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl
<CFormInput
placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2"
@ -57,21 +58,21 @@ const Select = () => {
<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
<CInputGroup className="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CFormControl id="basic-url" aria-describedby="basic-addon3" />
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText>
<CFormControl aria-label="Amount (to the nearest dollar)" />
<CFormInput aria-label="Amount (to the nearest dollar)" />
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl placeholder="Username" aria-label="Username" />
<CFormInput placeholder="Username" aria-label="Username" />
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Server" aria-label="Server" />
<CFormInput placeholder="Server" aria-label="Server" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>With textarea</CInputGroupText>
<CFormControl component="textarea" aria-label="With textarea"></CFormControl>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</CCardBody>
@ -91,7 +92,7 @@ const Select = () => {
<Example href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormControl
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
@ -118,21 +119,21 @@ const Select = () => {
<Example href="forms/input-group#sizing">
<CInputGroup size="sm" className="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormControl
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CFormControl
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</CInputGroup>
<CInputGroup size="lg">
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
<CFormControl
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg"
/>
@ -159,7 +160,7 @@ const Select = () => {
aria-label="Checkbox for following text input"
/>
</CInputGroupText>
<CFormControl aria-label="Text input with checkbox" />
<CFormInput aria-label="Text input with checkbox" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>
@ -169,7 +170,7 @@ const Select = () => {
aria-label="Radio button for following text input"
/>
</CInputGroupText>
<CFormControl aria-label="Text input with radio button" />
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</CCardBody>
@ -182,15 +183,15 @@ const Select = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
While multiple <code>&lt;CFormControl&gt;</code>s are supported visually, validation
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
styles are only available for input groups with a single{' '}
<code>&lt;CFormControl&gt;</code>.
<code>&lt;CFormInput&gt;</code>.
</p>
<Example href="forms/input-group#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormControl aria-label="First name" />
<CFormControl aria-label="Last name" />
<CFormInput aria-label="First name" />
<CFormInput aria-label="Last name" />
</CInputGroup>
</Example>
</CCardBody>
@ -210,10 +211,10 @@ const Select = () => {
<CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
</CInputGroup>
<CInputGroup>
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
@ -236,14 +237,14 @@ const Select = () => {
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
</CButton>
<CFormControl
<CFormInput
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
@ -259,10 +260,10 @@ const Select = () => {
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormControl placeholder="" aria-label="Example text with two button addons" />
<CFormInput placeholder="" aria-label="Example text with two button addons" />
</CInputGroup>
<CInputGroup>
<CFormControl
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
@ -297,10 +298,10 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormControl aria-label="Text input with dropdown button" />
<CFormInput aria-label="Text input with dropdown button" />
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl aria-label="Text input with dropdown button" />
<CFormInput aria-label="Text input with dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
@ -327,7 +328,7 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormControl aria-label="Text input with 2 dropdown buttons" />
<CFormInput aria-label="Text input with 2 dropdown buttons" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
@ -366,10 +367,10 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormControl aria-label="Text input with segmented dropdown button" />
<CFormInput aria-label="Text input with segmented dropdown button" />
</CInputGroup>
<CInputGroup>
<CFormControl aria-label="Text input with segmented dropdown button" />
<CFormInput aria-label="Text input with segmented dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
@ -454,10 +455,10 @@ const Select = () => {
<CInputGroupText component="label" htmlFor="inputGroupFile01">
Upload
</CInputGroupText>
<CFormControl type="file" id="inputGroupFile01" />
<CFormInput type="file" id="inputGroupFile01" />
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl type="file" id="inputGroupFile02" />
<CFormInput type="file" id="inputGroupFile02" />
<CInputGroupText component="label" htmlFor="inputGroupFile02">
Upload
</CInputGroupText>
@ -471,7 +472,7 @@ const Select = () => {
>
Button
</CButton>
<CFormControl
<CFormInput
type="file"
id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03"
@ -479,7 +480,7 @@ const Select = () => {
/>
</CInputGroup>
<CInputGroup>
<CFormControl
<CFormInput
type="file"
id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04"

94
src/views/components/forms/layout/Layout.js
View File

@ -7,7 +7,7 @@ import {
CCol,
CForm,
CFormCheck,
CFormControl,
CFormInput,
CFormLabel,
CFormSelect,
CInputGroup,
@ -32,10 +32,10 @@ const Layout = () => {
<Example href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormControl placeholder="First name" aria-label="First name" />
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormControl placeholder="Last name" aria-label="Last name" />
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
@ -55,10 +55,10 @@ const Layout = () => {
<Example href="forms/layout#gutters">
<CRow className="g-3">
<CCol xs>
<CFormControl placeholder="First name" aria-label="First name" />
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormControl placeholder="Last name" aria-label="Last name" />
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
@ -67,41 +67,41 @@ const Layout = () => {
</p>
<Example href="forms/layout#gutters">
<CForm className="row g-3">
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
<CFormControl type="email" id="inputEmail4" />
<CFormInput type="email" id="inputEmail4" />
</CCol>
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
<CFormControl type="password" id="inputPassword4" />
<CFormInput type="password" id="inputPassword4" />
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormLabel htmlFor="inputAddress">Address</CFormLabel>
<CFormControl id="inputAddress" placeholder="1234 Main St" />
<CFormInput id="inputAddress" placeholder="1234 Main St" />
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
<CFormControl id="inputAddress2" placeholder="Apartment, studio, or floor" />
<CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
</CCol>
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="inputCity">City</CFormLabel>
<CFormControl id="inputCity" />
<CFormInput id="inputCity" />
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="inputState">State</CFormLabel>
<CFormSelect id="inputState">
<option>Choose...</option>
<option>...</option>
</CFormSelect>
</CCol>
<CCol md="2">
<CCol md={2}>
<CFormLabel htmlFor="inputZip">Zip</CFormLabel>
<CFormControl id="inputZip" />
<CFormInput id="inputZip" />
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CButton type="submit">Sign in</CButton>
</CCol>
</CForm>
@ -133,21 +133,21 @@ const Layout = () => {
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol sm="10">
<CFormControl type="email" id="inputEmail3" />
<CCol sm={10}>
<CFormInput type="email" id="inputEmail3" />
</CCol>
</CRow>
<CRow className="mb-3">
<CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
Password
</CFormLabel>
<CCol sm="10">
<CFormControl type="password" id="inputPassword3" />
<CCol sm={10}>
<CFormInput type="password" id="inputPassword3" />
</CCol>
</CRow>
<fieldset className="row mb-3">
<legend className="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol sm="10">
<CCol sm={10}>
<CFormCheck
type="radio"
name="gridRadios"
@ -203,8 +203,8 @@ const Layout = () => {
>
Email
</CFormLabel>
<CCol sm="10">
<CFormControl
<CCol sm={10}>
<CFormInput
type="email"
className="form-control form-control-sm"
id="colFormLabelSm"
@ -216,8 +216,8 @@ const Layout = () => {
<CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol sm="10">
<CFormControl type="email" id="colFormLabel" placeholder="col-form-label" />
<CCol sm={10}>
<CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
</CCol>
</CRow>
<CRow>
@ -227,8 +227,8 @@ const Layout = () => {
>
Email
</CFormLabel>
<CCol sm="10">
<CFormControl
<CCol sm={10}>
<CFormInput
type="email"
className="form-control form-control-lg"
id="colFormLabelLg"
@ -256,14 +256,14 @@ const Layout = () => {
</p>
<Example href="forms/layout#column-sizing">
<CRow className="g-3">
<CCol sm="7">
<CFormControl placeholder="City" aria-label="City" />
<CCol sm={7}>
<CFormInput placeholder="City" aria-label="City" />
</CCol>
<CCol sm>
<CFormControl placeholder="State" aria-label="State" />
<CFormInput placeholder="State" aria-label="State" />
</CCol>
<CCol sm>
<CFormControl placeholder="Zip" aria-label="Zip" />
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
@ -288,7 +288,7 @@ const Layout = () => {
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
Name
</CFormLabel>
<CFormControl id="autoSizingInput" placeholder="Jane Doe" />
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol>
<CCol xs="auto">
<CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
@ -296,7 +296,7 @@ const Layout = () => {
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl id="autoSizingInputGroup" placeholder="Username" />
<CFormInput id="autoSizingInputGroup" placeholder="Username" />
</CInputGroup>
</CCol>
<CCol xs="auto">
@ -323,22 +323,22 @@ const Layout = () => {
</p>
<Example href="forms/layout#auto-sizing">
<CForm className="row gx-3 gy-2 align-items-center">
<CCol sm="3">
<CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
Name
</CFormLabel>
<CFormControl id="specificSizeInputName" placeholder="Jane Doe" />
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
</CCol>
<CCol sm="3">
<CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl id="specificSizeInputGroupUsername" placeholder="Username" />
<CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
</CInputGroup>
</CCol>
<CCol sm="3">
<CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
Preference
</CFormLabel>
@ -376,16 +376,16 @@ const Layout = () => {
</p>
<Example href="forms/layout#inline-forms">
<CForm className="row row-cols-lg-auto g-3 align-items-center">
<CCol xs="12">
<CCol xs={12}>
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl id="inlineFormInputGroupUsername" placeholder="Username" />
<CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
</CInputGroup>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
Preference
</CFormLabel>
@ -396,10 +396,10 @@ const Layout = () => {
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CButton type="submit">Submit</CButton>
</CCol>
</CForm>

2
src/views/components/forms/range/Range.js
View File

@ -16,7 +16,7 @@ const Range = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
<code>&lt;CFormControl&gt;</code>.
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>

114
src/views/components/forms/validation/Validation.js
View File

@ -7,10 +7,11 @@ import {
CCol,
CForm,
CFormCheck,
CFormControl,
CFormInput,
CFormFeedback,
CFormLabel,
CFormSelect,
CFormTextarea,
CInputGroup,
CInputGroupText,
CRow,
@ -34,21 +35,21 @@ const CustomStyles = () => {
validated={validated}
onSubmit={handleSubmit}
>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
<CFormControl type="text" id="validationCustom01" defaultValue="Mark" required />
<CFormInput type="text" id="validationCustom01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
<CFormControl type="text" id="validationCustom02" defaultValue="Otto" required />
<CFormInput type="text" id="validationCustom02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
<CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormControl
<CFormInput
type="text"
id="validationCustomUsername"
defaultValue=""
@ -58,12 +59,12 @@ const CustomStyles = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="validationCustom03">City</CFormLabel>
<CFormControl type="text" id="validationCustom03" required />
<CFormInput type="text" id="validationCustom03" required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04">
<option disabled>Choose...</option>
@ -71,12 +72,12 @@ const CustomStyles = () => {
</CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationCustom05">City</CFormLabel>
<CFormControl type="text" id="validationCustom05" required />
<CFormInput type="text" id="validationCustom05" required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormCheck
type="checkbox"
id="invalidCheck"
@ -85,7 +86,7 @@ const CustomStyles = () => {
/>
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CButton color="primary" type="submit">
Submit form
</CButton>
@ -106,21 +107,21 @@ const BrowserDefaults = () => {
}
return (
<CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
<CFormControl type="text" id="validationDefault01" defaultValue="Mark" required />
<CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
<CFormControl type="text" id="validationDefault02" defaultValue="Otto" required />
<CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
<CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormControl
<CFormInput
type="text"
id="validationDefaultUsername"
defaultValue=""
@ -130,12 +131,12 @@ const BrowserDefaults = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="validationDefault03">City</CFormLabel>
<CFormControl type="text" id="validationDefault03" required />
<CFormInput type="text" id="validationDefault03" required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04">
<option disabled>Choose...</option>
@ -143,12 +144,12 @@ const BrowserDefaults = () => {
</CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationDefault05">City</CFormLabel>
<CFormControl type="text" id="validationDefault05" required />
<CFormInput type="text" id="validationDefault05" required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormCheck
type="checkbox"
id="invalidCheck"
@ -157,7 +158,7 @@ const BrowserDefaults = () => {
/>
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CButton color="primary" type="submit">
Submit form
</CButton>
@ -183,25 +184,25 @@ const Tooltips = () => {
validated={validated}
onSubmit={handleSubmit}
>
<CCol md="4" className="position-relative">
<CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip01" defaultValue="Mark" required />
<CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
<CFormFeedback tooltip valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4" className="position-relative">
<CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip02" defaultValue="Otto" required />
<CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
<CFormFeedback tooltip valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4" className="position-relative">
<CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
<CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormControl
<CFormInput
type="text"
id="validationTooltipUsername"
defaultValue=""
@ -213,14 +214,14 @@ const Tooltips = () => {
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6" className="position-relative">
<CCol md={6} className="position-relative">
<CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
<CFormControl type="text" id="validationTooltip03" required />
<CFormInput type="text" id="validationTooltip03" required />
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" className="position-relative">
<CCol md={3} className="position-relative">
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required>
<option disabled defaultValue="">
@ -232,14 +233,14 @@ const Tooltips = () => {
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" className="position-relative">
<CCol md={3} className="position-relative">
<CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
<CFormControl type="text" id="validationTooltip05" required />
<CFormInput type="text" id="validationTooltip05" required />
<CFormFeedback tooltip invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12" className="position-relative">
<CCol xs={12} className="position-relative">
<CButton color="primary" type="submit">
Submit form
</CButton>
@ -316,9 +317,9 @@ const Validation = () => {
</p>
<Example href="forms/validation#server-side">
<CForm className="row g-3 needs-validation">
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormControl
<CFormInput
type="text"
id="validationServer01"
defaultValue="Mark"
@ -327,9 +328,9 @@ const Validation = () => {
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormControl
<CFormInput
type="text"
id="validationServer02"
defaultValue="Otto"
@ -338,11 +339,11 @@ const Validation = () => {
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol md="4">
<CCol md={4}>
<CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
<CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormControl
<CFormInput
type="text"
id="validationServerUsername"
defaultValue=""
@ -353,12 +354,12 @@ const Validation = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CCol md={6}>
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormControl type="text" id="validationServer03" invalid required />
<CFormInput type="text" id="validationServer03" invalid required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option>
@ -366,12 +367,12 @@ const Validation = () => {
</CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol md="3">
<CCol md={3}>
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormControl type="text" id="validationServer05" invalid required />
<CFormInput type="text" id="validationServer05" invalid required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CFormCheck
type="checkbox"
id="invalidCheck"
@ -381,7 +382,7 @@ const Validation = () => {
/>
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol xs={12}>
<CButton color="primary" type="submit">
Submit form
</CButton>
@ -402,7 +403,7 @@ const Validation = () => {
</p>
<ul>
<li>
<code>&lt;CFormControl&gt;</code>s
<code>&lt;CFormInput&gt;</code>s
</li>
<li>
<code>&lt;CFormSelect&gt;</code>s
@ -417,13 +418,12 @@ const Validation = () => {
<CFormLabel htmlFor="validationTextarea" className="form-label">
Textarea
</CFormLabel>
<CFormControl
component="textarea"
<CFormTextarea
id="validationTextarea"
placeholder="Required example textarea"
invalid
required
></CFormControl>
></CFormTextarea>
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
</div>
<CFormCheck
@ -463,7 +463,7 @@ const Validation = () => {
</div>
<div className="mb-3">
<CFormControl
<CFormInput
type="file"
id="validationTextarea"
aria-label="file example"

2
src/views/components/icons/brands/Brands.js
View File

@ -10,7 +10,7 @@ const toKebabCase = (str) => {
export const getIconsView = (iconset) => {
return Object.entries(iconset).map(([name, value]) => (
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
<CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
<CIcon content={value} size="2xl" />
<div>{toKebabCase(name)}</div>
</CCol>

76
src/views/components/widgets/Widgets.js
View File

@ -23,7 +23,7 @@ const Widgets = () => {
<>
<WidgetsDropdown />
<CRow>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
value="89.9%"
@ -33,7 +33,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
value="12.124"
@ -43,7 +43,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
value="$98.111,00"
@ -53,7 +53,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
value="2 TB"
@ -63,7 +63,7 @@ const Widgets = () => {
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
color="success"
@ -75,7 +75,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
color="info"
@ -87,7 +87,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
color="warning"
@ -99,7 +99,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim."
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetProgress
className="mb-4"
color="primary"
@ -114,7 +114,7 @@ const Widgets = () => {
</CRow>
<CRow>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-settings" size="xl" />}
@ -124,7 +124,7 @@ const Widgets = () => {
color="primary"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-user" size="xl" />}
@ -134,7 +134,7 @@ const Widgets = () => {
color="info"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-moon" size="xl" />}
@ -144,7 +144,7 @@ const Widgets = () => {
color="warning"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-bell" size="xl" />}
@ -154,7 +154,7 @@ const Widgets = () => {
color="danger"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-settings" size="xl" />}
@ -175,7 +175,7 @@ const Widgets = () => {
}
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-laptop" size="xl" />}
@ -196,7 +196,7 @@ const Widgets = () => {
}
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-moon" size="xl" />}
@ -217,7 +217,7 @@ const Widgets = () => {
}
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-bell" size="xl" />}
@ -238,7 +238,7 @@ const Widgets = () => {
}
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
padding={0}
@ -249,7 +249,7 @@ const Widgets = () => {
color="primary"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
padding={0}
@ -260,7 +260,7 @@ const Widgets = () => {
color="info"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
padding={0}
@ -271,7 +271,7 @@ const Widgets = () => {
color="warning"
/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CCol xs={12} sm={6} lg={3}>
<CWidgetIcon
className="mb-3"
padding={0}
@ -322,7 +322,7 @@ const Widgets = () => {
/>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-people" height="36" />}
value="87.500"
@ -332,7 +332,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-userFollow" height="36" />}
value="385"
@ -342,7 +342,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-basket" height="36" />}
value="1238"
@ -352,7 +352,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-chartPie" height="36" />}
value="28%"
@ -362,7 +362,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-speedometer" height="36" />}
value="5:34:11"
@ -372,7 +372,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
icon={<CIcon name="cil-speech" height="36" />}
value="972"
@ -384,7 +384,7 @@ const Widgets = () => {
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="info"
icon={<CIcon name="cil-people" height="36" />}
@ -395,7 +395,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="success"
icon={<CIcon name="cil-userFollow" height="36" />}
@ -406,7 +406,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="warning"
icon={<CIcon name="cil-basket" height="36" />}
@ -417,7 +417,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="primary"
icon={<CIcon name="cil-chartPie" height="36" />}
@ -428,7 +428,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="danger"
icon={<CIcon name="cil-speedometer" height="36" />}
@ -439,7 +439,7 @@ const Widgets = () => {
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
<CCol sm={6} md={2}>
<CWidgetProgressIcon
color="info"
icon={<CIcon name="cil-speech" height="36" />}
@ -452,7 +452,7 @@ const Widgets = () => {
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
@ -502,7 +502,7 @@ const Widgets = () => {
/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
@ -552,7 +552,7 @@ const Widgets = () => {
/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
@ -602,7 +602,7 @@ const Widgets = () => {
/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}
@ -660,7 +660,7 @@ const Widgets = () => {
/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}
@ -718,7 +718,7 @@ const Widgets = () => {
/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}

8
src/views/components/widgets/WidgetsBrand.js
View File

@ -35,7 +35,7 @@ const WidgetsBrand = ({ withCharts }) => {
return (
<CRow>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetBrand
className="mb-4"
headerChildren={
@ -73,7 +73,7 @@ const WidgetsBrand = ({ withCharts }) => {
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetBrand
className="mb-4"
headerChildren={
@ -111,7 +111,7 @@ const WidgetsBrand = ({ withCharts }) => {
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetBrand
className="mb-4"
headerChildren={
@ -149,7 +149,7 @@ const WidgetsBrand = ({ withCharts }) => {
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetBrand
className="mb-4"
color="warning"

8
src/views/components/widgets/WidgetsDropdown.js
View File

@ -15,7 +15,7 @@ import CIcon from '@coreui/icons-react'
const WidgetsDropdown = () => {
return (
<CRow>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetDropdown
className="mb-4"
color="primary"
@ -100,7 +100,7 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetDropdown
className="mb-4"
color="info"
@ -199,7 +199,7 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetDropdown
className="mb-4"
color="warning"
@ -270,7 +270,7 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CCol sm={6} lg={3}>
<CWidgetDropdown
className="mb-4"
color="danger"

16
src/views/dashboard/Dashboard.js
View File

@ -36,13 +36,13 @@ const Dashboard = () => {
<CCard className="mb-4">
<CCardBody>
<CRow>
<CCol sm="5">
<CCol sm={5}>
<h4 id="traffic" className="card-title mb-0">
Traffic
</h4>
<div className="small text-medium-emphasis">January - July 2021</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CCol sm={7} className="d-none d-md-block">
<CButton color="primary" className="float-end">
<CIcon name="cil-cloud-download" />
</CButton>
@ -184,15 +184,15 @@ const Dashboard = () => {
<CCardHeader>Traffic {' & '} Sales</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">
<CCol xs={12} md={6} xl={6}>
<CRow>
<CCol sm="6">
<CCol sm={6}>
<div className="border-start border-start-4 border-start-info py-1 px-3">
<div className="text-medium-emphasis small">New Clients</div>
<div className="fs-5 fw-semibold">9,123</div>
</div>
</CCol>
<CCol sm="6">
<CCol sm={6}>
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Recurring Clients</div>
<div className="fs-5 fw-semibold">22,643</div>
@ -267,15 +267,15 @@ const Dashboard = () => {
</div>
</CCol>
<CCol xs="12" md="6" xl="6">
<CCol xs={12} md={6} xl={6}>
<CRow>
<CCol sm="6">
<CCol sm={6}>
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Pageviews</div>
<div className="fs-5 fw-semibold">78,623</div>
</div>
</CCol>
<CCol sm="6">
<CCol sm={6}>
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Organic</div>
<div className="fs-5 fw-semibold">49,123</div>

12
src/views/pages/login/Login.js
View File

@ -8,7 +8,7 @@ import {
CCol,
CContainer,
CForm,
CFormControl,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
@ -20,7 +20,7 @@ const Login = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
<CCol md={8}>
<CCardGroup>
<CCard className="p-4">
<CCardBody>
@ -31,25 +31,25 @@ const Login = () => {
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" />
<CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl
<CFormInput
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</CInputGroup>
<CRow>
<CCol xs="6">
<CCol xs={6}>
<CButton color="primary" className="px-4">
Login
</CButton>
</CCol>
<CCol xs="6" className="text-right">
<CCol xs={6} className="text-right">
<CButton color="link" className="px-0">
Forgot password?
</CButton>

6
src/views/pages/page404/Page404.js
View File

@ -3,7 +3,7 @@ import {
CButton,
CCol,
CContainer,
CFormControl,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
@ -15,7 +15,7 @@ const Page404 = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<CCol md={6}>
<div className="clearfix">
<h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{"'"}re lost.</h4>
@ -27,7 +27,7 @@ const Page404 = () => {
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CFormInput size="16" type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>

6
src/views/pages/page500/Page500.js
View File

@ -3,7 +3,7 @@ import {
CButton,
CCol,
CContainer,
CFormControl,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
@ -15,7 +15,7 @@ const Page500 = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<CCol md={6}>
<span className="clearfix">
<h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4>
@ -27,7 +27,7 @@ const Page500 = () => {
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CFormInput size="16" type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>

12
src/views/pages/register/Register.js
View File

@ -6,7 +6,7 @@ import {
CCol,
CContainer,
CForm,
CFormControl,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
@ -18,7 +18,7 @@ const Register = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6">
<CCol md={9} lg={7} xl={6}>
<CCard className="mx-4">
<CCardBody className="p-4">
<CForm>
@ -28,17 +28,17 @@ const Register = () => {
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" />
<CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Email" autoComplete="email" />
<CFormInput placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl
<CFormInput
type="password"
placeholder="Password"
autoComplete="new-password"
@ -48,7 +48,7 @@ const Register = () => {
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl
<CFormInput
type="password"
placeholder="Repeat password"
autoComplete="new-password"

2
src/views/theme/colors/Colors.js
View File

@ -34,7 +34,7 @@ const ThemeView = () => {
const ThemeColor = ({ className, children }) => {
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
return (
<CCol xl="2" md="4" sm="6" xs="12" className="mb-4">
<CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
<div className={classes} style={{ paddingTop: '75%' }}></div>
{children}
<ThemeView />