refactor: update text color classNames
This commit is contained in:
parent
b922dada46
commit
9842172b67
@ -115,7 +115,7 @@ const Cards = () => {
|
|||||||
<CCard style={{ width: '18rem' }}>
|
<CCard style={{ width: '18rem' }}>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCardTitle>Card title</CCardTitle>
|
<CCardTitle>Card title</CCardTitle>
|
||||||
<CCardSubtitle className="mb-2 text-muted">Card subtitle</CCardSubtitle>
|
<CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
Some quick example text to build on the card title and make up the bulk of the
|
Some quick example text to build on the card title and make up the bulk of the
|
||||||
card's content.
|
card's content.
|
||||||
@ -329,7 +329,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
<CButton href="#">Go somewhere</CButton>
|
<CButton href="#">Go somewhere</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter className="text-muted">2 days ago</CCardFooter>
|
<CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</Example>
|
</Example>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@ -572,7 +572,7 @@ const Cards = () => {
|
|||||||
additional content. This content is a little bit longer.
|
additional content. This content is a little bit longer.
|
||||||
</CCardText>
|
</CCardText>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@ -586,7 +586,7 @@ const Cards = () => {
|
|||||||
additional content. This content is a little bit longer.
|
additional content. This content is a little bit longer.
|
||||||
</CCardText>
|
</CCardText>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardImage
|
<CCardImage
|
||||||
@ -777,7 +777,7 @@ const Cards = () => {
|
|||||||
additional content. This content is a little bit longer.
|
additional content. This content is a little bit longer.
|
||||||
</CCardText>
|
</CCardText>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@ -807,7 +807,7 @@ const Cards = () => {
|
|||||||
content.
|
content.
|
||||||
</CCardText>
|
</CCardText>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@ -838,7 +838,7 @@ const Cards = () => {
|
|||||||
that equal height action.
|
that equal height action.
|
||||||
</CCardText>
|
</CCardText>
|
||||||
<CCardText>
|
<CCardText>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@ -876,7 +876,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@ -906,7 +906,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@ -937,7 +937,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
@ -989,7 +989,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1021,7 +1021,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1053,7 +1053,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1085,7 +1085,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1125,7 +1125,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1157,7 +1157,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1189,7 +1189,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@ -1221,7 +1221,7 @@ const Cards = () => {
|
|||||||
</CCardText>
|
</CCardText>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<small className="text-muted">Last updated 3 mins ago</small>
|
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
@ -283,24 +283,24 @@ const ListGroups = () => {
|
|||||||
<CListGroupItem component="a" href="#">
|
<CListGroupItem component="a" href="#">
|
||||||
<div className="d-flex w-100 justify-content-between">
|
<div className="d-flex w-100 justify-content-between">
|
||||||
<h5 className="mb-1">List group item heading</h5>
|
<h5 className="mb-1">List group item heading</h5>
|
||||||
<small className="text-muted">3 days ago</small>
|
<small className="text-medium-emphasis">3 days ago</small>
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
||||||
varius blandit.
|
varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small className="text-muted">Donec id elit non mi porta.</small>
|
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem component="a" href="#">
|
<CListGroupItem component="a" href="#">
|
||||||
<div className="d-flex w-100 justify-content-between">
|
<div className="d-flex w-100 justify-content-between">
|
||||||
<h5 className="mb-1">List group item heading</h5>
|
<h5 className="mb-1">List group item heading</h5>
|
||||||
<small className="text-muted">3 days ago</small>
|
<small className="text-medium-emphasis">3 days ago</small>
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
||||||
varius blandit.
|
varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small className="text-muted">Donec id elit non mi porta.</small>
|
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</Example>
|
</Example>
|
||||||
|
@ -17,7 +17,7 @@ import CIcon from '@coreui/icons-react'
|
|||||||
|
|
||||||
const Login = () => {
|
const Login = () => {
|
||||||
return (
|
return (
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
|
||||||
<CContainer>
|
<CContainer>
|
||||||
<CRow className="justify-content-center">
|
<CRow className="justify-content-center">
|
||||||
<CCol md="8">
|
<CCol md="8">
|
||||||
@ -26,7 +26,7 @@ const Login = () => {
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<p className="text-muted">Sign In to your account</p>
|
<p className="text-medium-emphasis">Sign In to your account</p>
|
||||||
<CInputGroup className="mb-3">
|
<CInputGroup className="mb-3">
|
||||||
<CInputGroupText>
|
<CInputGroupText>
|
||||||
<CIcon name="cil-user" />
|
<CIcon name="cil-user" />
|
||||||
@ -58,7 +58,7 @@ const Login = () => {
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
|
<CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
|
||||||
<CCardBody className="text-center">
|
<CCardBody className="text-center">
|
||||||
<div>
|
<div>
|
||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
|
@ -12,14 +12,16 @@ import CIcon from '@coreui/icons-react'
|
|||||||
|
|
||||||
const Page404 = () => {
|
const Page404 = () => {
|
||||||
return (
|
return (
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
|
||||||
<CContainer>
|
<CContainer>
|
||||||
<CRow className="justify-content-center">
|
<CRow className="justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<div className="clearfix">
|
<div className="clearfix">
|
||||||
<h1 className="float-start display-3 me-4">404</h1>
|
<h1 className="float-start display-3 me-4">404</h1>
|
||||||
<h4 className="pt-3">Oops! You{"'"}re lost.</h4>
|
<h4 className="pt-3">Oops! You{"'"}re lost.</h4>
|
||||||
<p className="text-muted float-start">The page you are looking for was not found.</p>
|
<p className="text-medium-emphasis float-start">
|
||||||
|
The page you are looking for was not found.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<CInputGroup className="input-prepend">
|
<CInputGroup className="input-prepend">
|
||||||
<CInputGroupText>
|
<CInputGroupText>
|
||||||
|
@ -12,14 +12,14 @@ import CIcon from '@coreui/icons-react'
|
|||||||
|
|
||||||
const Page500 = () => {
|
const Page500 = () => {
|
||||||
return (
|
return (
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
|
||||||
<CContainer>
|
<CContainer>
|
||||||
<CRow className="justify-content-center">
|
<CRow className="justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<span className="clearfix">
|
<span className="clearfix">
|
||||||
<h1 className="float-start display-3 me-4">500</h1>
|
<h1 className="float-start display-3 me-4">500</h1>
|
||||||
<h4 className="pt-3">Houston, we have a problem!</h4>
|
<h4 className="pt-3">Houston, we have a problem!</h4>
|
||||||
<p className="text-muted float-start">
|
<p className="text-medium-emphasis float-start">
|
||||||
The page you are looking for is temporarily unavailable.
|
The page you are looking for is temporarily unavailable.
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
|
@ -16,7 +16,7 @@ import CIcon from '@coreui/icons-react'
|
|||||||
|
|
||||||
const Register = () => {
|
const Register = () => {
|
||||||
return (
|
return (
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
|
||||||
<CContainer>
|
<CContainer>
|
||||||
<CRow className="justify-content-center">
|
<CRow className="justify-content-center">
|
||||||
<CCol md="9" lg="7" xl="6">
|
<CCol md="9" lg="7" xl="6">
|
||||||
@ -24,7 +24,7 @@ const Register = () => {
|
|||||||
<CCardBody className="p-4">
|
<CCardBody className="p-4">
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
<p className="text-muted">Create your account</p>
|
<p className="text-medium-emphasis">Create your account</p>
|
||||||
<CInputGroup className="mb-3">
|
<CInputGroup className="mb-3">
|
||||||
<CInputGroupText>
|
<CInputGroupText>
|
||||||
<CIcon name="cil-user" />
|
<CIcon name="cil-user" />
|
||||||
|
@ -18,11 +18,11 @@ const ThemeView = () => {
|
|||||||
<table className="table w-100" ref={ref}>
|
<table className="table w-100" ref={ref}>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="text-muted">HEX:</td>
|
<td className="text-medium-emphasis">HEX:</td>
|
||||||
<td className="font-weight-bold">{rgbToHex(color)}</td>
|
<td className="font-weight-bold">{rgbToHex(color)}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="text-muted">RGB:</td>
|
<td className="text-medium-emphasis">RGB:</td>
|
||||||
<td className="font-weight-bold">{color}</td>
|
<td className="font-weight-bold">{color}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -168,7 +168,7 @@ const Widgets = () => {
|
|||||||
color="primary"
|
color="primary"
|
||||||
footer={
|
footer={
|
||||||
<CLink
|
<CLink
|
||||||
className="font-weight-bold font-xs btn-block text-muted"
|
className="font-weight-bold font-xs btn-block text-medium-emphasis"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
rel="noopener norefferer"
|
rel="noopener norefferer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@ -189,7 +189,7 @@ const Widgets = () => {
|
|||||||
color="info"
|
color="info"
|
||||||
footer={
|
footer={
|
||||||
<CLink
|
<CLink
|
||||||
className="font-weight-bold font-xs btn-block text-muted"
|
className="font-weight-bold font-xs btn-block text-medium-emphasis"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
rel="noopener norefferer"
|
rel="noopener norefferer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@ -210,7 +210,7 @@ const Widgets = () => {
|
|||||||
color="warning"
|
color="warning"
|
||||||
footer={
|
footer={
|
||||||
<CLink
|
<CLink
|
||||||
className="font-weight-bold font-xs btn-block text-muted"
|
className="font-weight-bold font-xs btn-block text-medium-emphasis"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
rel="noopener norefferer"
|
rel="noopener norefferer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@ -231,7 +231,7 @@ const Widgets = () => {
|
|||||||
color="danger"
|
color="danger"
|
||||||
footer={
|
footer={
|
||||||
<CLink
|
<CLink
|
||||||
className="font-weight-bold font-xs btn-block text-muted"
|
className="font-weight-bold font-xs btn-block text-medium-emphasis"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
rel="noopener norefferer"
|
rel="noopener norefferer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
Loading…
Reference in New Issue
Block a user