update demo-react-profile-dashboard-ui,
This commit is contained in:
louiscklaw
@@ -18,7 +18,7 @@ import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
|
|||||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||||
|
|
||||||
function Tab1() {
|
function Tab1(): React.JSX.Element {
|
||||||
const router = useIonRouter();
|
const router = useIonRouter();
|
||||||
|
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
const [currentWeather, setCurrentWeather] = useState(false);
|
||||||
@@ -12,9 +12,9 @@ import {
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||||
|
|
||||||
function Tab2() {
|
function Tab2(): React.JSX.Element {
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
const [currentWeather, setCurrentWeather] = useState<any>(false);
|
||||||
|
|
||||||
const performSearch = async () => {
|
const performSearch = async () => {
|
||||||
getAddress(search);
|
getAddress(search);
|
||||||
@@ -1,38 +1,27 @@
|
|||||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
import { IonRouterOutlet, IonTabs } from '@ionic/react';
|
||||||
|
|
||||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
|
||||||
import { Route, Redirect } from 'react-router';
|
import { Route, Redirect } from 'react-router';
|
||||||
|
|
||||||
import Tab1 from './AppPages/Tab1';
|
// import Tab1 from './AppPages/Tab1';
|
||||||
import Tab2 from './AppPages/Tab2';
|
// import Tab2 from './AppPages/Tab2';
|
||||||
|
|
||||||
import './style.scss';
|
// import './style.scss';
|
||||||
|
import Home from './pages/Home';
|
||||||
|
|
||||||
function DemoReactProfileDashboardUi() {
|
function DemoReactProfileDashboardUi() {
|
||||||
return (
|
return (
|
||||||
<IonTabs>
|
<IonTabs className="demo-react-profile-dashboard-ui">
|
||||||
<IonRouterOutlet>
|
<IonRouterOutlet>
|
||||||
<Route exact path="/demo-react-profile-dashboard-ui/tab1">
|
<Route exact path="/demo-react-profile-dashboard-ui/home">
|
||||||
<Tab1 />
|
<Home />
|
||||||
</Route>
|
|
||||||
<Route exact path="/demo-react-profile-dashboard-ui/tab2">
|
|
||||||
<Tab2 />
|
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Redirect exact path="/demo-react-profile-dashboard-ui" to="/demo-react-profile-dashboard-ui/tab1" />
|
<Redirect
|
||||||
|
exact
|
||||||
|
path="/demo-react-profile-dashboard-ui"
|
||||||
|
to="/demo-react-profile-dashboard-ui/home"
|
||||||
|
/>
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
|
|
||||||
{/* */}
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="tab1" href="/demo-react-profile-dashboard-ui/tab1">
|
|
||||||
<IonIcon icon={cloudOutline} />
|
|
||||||
<IonLabel>Dashboard</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="tab2" href="/demo-react-profile-dashboard-ui/tab2">
|
|
||||||
<IonIcon icon={searchOutline} />
|
|
||||||
<IonLabel>Search</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
</IonTabs>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,105 @@
|
|||||||
|
.home {
|
||||||
|
ion-header {
|
||||||
|
&.header-md:after {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-header,
|
||||||
|
ion-toolbar {
|
||||||
|
border: none !important;
|
||||||
|
--border-style: none !important;
|
||||||
|
border-color: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toolbar {
|
||||||
|
background-color: #5893fa;
|
||||||
|
--background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topHeader {
|
||||||
|
height: 8rem;
|
||||||
|
margin-bottom: -8rem;
|
||||||
|
border-end-start-radius: 60px !important;
|
||||||
|
|
||||||
|
background-color: #5893fa;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileStats {
|
||||||
|
background-color: rgb(245, 245, 245);
|
||||||
|
border-radius: 10px !important;
|
||||||
|
padding: 0.2rem;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileStat {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
ion-card-title {
|
||||||
|
color: rgb(68, 68, 68);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-card-subtitle {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileInfo {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: -0.2rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileName {
|
||||||
|
color: rgb(59, 59, 59) !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileCard {
|
||||||
|
ion-icon {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: #5893fa;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileStatusContainer {
|
||||||
|
margin-top: -2rem;
|
||||||
|
margin-bottom: -2rem;
|
||||||
|
|
||||||
|
ion-card-content {
|
||||||
|
margin-top: -1rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileActionContainer {
|
||||||
|
margin-top: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileStatus {
|
||||||
|
ion-card-subtitle {
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileActionCard {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
|
||||||
|
ion-icon {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: #5893fa;
|
||||||
|
margin-top: -0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
import {
|
||||||
|
IonButton,
|
||||||
|
IonButtons,
|
||||||
|
IonCard,
|
||||||
|
IonCardContent,
|
||||||
|
IonCardHeader,
|
||||||
|
IonCardSubtitle,
|
||||||
|
IonCardTitle,
|
||||||
|
IonCol,
|
||||||
|
IonContent,
|
||||||
|
IonGrid,
|
||||||
|
IonHeader,
|
||||||
|
IonIcon,
|
||||||
|
IonPage,
|
||||||
|
IonRow,
|
||||||
|
IonText,
|
||||||
|
IonToolbar,
|
||||||
|
useIonRouter,
|
||||||
|
} from '@ionic/react';
|
||||||
|
import styles from './Home.module.scss';
|
||||||
|
|
||||||
|
import {
|
||||||
|
arrowBackOutline,
|
||||||
|
arrowForward,
|
||||||
|
bookmarkOutline,
|
||||||
|
chatboxEllipsesOutline,
|
||||||
|
chevronBackOutline,
|
||||||
|
ellipsisHorizontal,
|
||||||
|
imageOutline,
|
||||||
|
personAddOutline,
|
||||||
|
} from 'ionicons/icons';
|
||||||
|
|
||||||
|
const Home = (): React.JSX.Element => {
|
||||||
|
const router = useIonRouter();
|
||||||
|
|
||||||
|
function handleBackClick() {
|
||||||
|
router.goBack();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage className={styles.home}>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonButton onClick={() => handleBackClick()} color="light">
|
||||||
|
<IonIcon icon={arrowBackOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton color="light">
|
||||||
|
<IonIcon icon={ellipsisHorizontal} />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent>
|
||||||
|
<div className={styles.topHeader}></div>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
<IonRow className="ion-justify-content-center">
|
||||||
|
<IonCol
|
||||||
|
size="12"
|
||||||
|
className="ion-justify-content-center ion-align-items-center ion-text-center"
|
||||||
|
>
|
||||||
|
<IonCard className={styles.profileHeader}>
|
||||||
|
<IonCardContent>
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="4">
|
||||||
|
<img
|
||||||
|
src="/assets/DemoReactProfileDashboardUi/alan.jpg"
|
||||||
|
alt="avatar"
|
||||||
|
className={styles.avatar}
|
||||||
|
/>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="8">
|
||||||
|
<IonRow className={styles.profileInfo}>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonText color="dark" className={styles.profileName}>
|
||||||
|
<p>Alan Montgomery</p>
|
||||||
|
</IonText>
|
||||||
|
<IonText color="medium">
|
||||||
|
<p>Mobile Team Lead</p>
|
||||||
|
</IonText>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className={styles.profileStats}>
|
||||||
|
<IonCol className={styles.profileStat}>
|
||||||
|
<IonCardTitle>109</IonCardTitle>
|
||||||
|
<IonCardSubtitle>Followinig</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol className={styles.profileStat}>
|
||||||
|
<IonCardTitle>1.2k</IonCardTitle>
|
||||||
|
<IonCardSubtitle>Followers</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton fill="outline" expand="block">
|
||||||
|
Message
|
||||||
|
</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton color="primary" expand="block">
|
||||||
|
<IonIcon icon={personAddOutline} size="small" />
|
||||||
|
Follow
|
||||||
|
</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className={styles.profileStatusContainer}>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCard className={styles.profileCard}>
|
||||||
|
<IonCardHeader>
|
||||||
|
<IonRow className={styles.profileStatus}>
|
||||||
|
<IonIcon icon={chatboxEllipsesOutline} />
|
||||||
|
<IonCardSubtitle>Status</IonCardSubtitle>
|
||||||
|
</IonRow>
|
||||||
|
</IonCardHeader>
|
||||||
|
<IonCardContent>
|
||||||
|
<IonText>
|
||||||
|
<p>
|
||||||
|
I love posting content related to Ionic React! Make sure to check out the
|
||||||
|
Ionic React Hub!
|
||||||
|
</p>
|
||||||
|
</IonText>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonCard className={styles.profileCard}>
|
||||||
|
<IonCardContent>
|
||||||
|
<IonIcon icon={imageOutline} />
|
||||||
|
<IonCardTitle>147</IonCardTitle>
|
||||||
|
<IonCardSubtitle>Photos</IonCardSubtitle>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonCard className={styles.profileCard}>
|
||||||
|
<IonCardContent>
|
||||||
|
<IonIcon icon={bookmarkOutline} />
|
||||||
|
<IonCardTitle>63</IonCardTitle>
|
||||||
|
<IonCardSubtitle>Bookmarks</IonCardSubtitle>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className={styles.profileActionContainer}>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCard className={styles.profileActionCard}>
|
||||||
|
<IonCardContent>
|
||||||
|
<IonRow className="ion-justify-content-between">
|
||||||
|
<IonCardSubtitle>View latest project</IonCardSubtitle>
|
||||||
|
<IonIcon icon={arrowForward} />
|
||||||
|
</IonRow>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
#about-page {
|
|
||||||
ion-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
--background: transparent;
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-toolbar ion-back-button,
|
|
||||||
ion-toolbar ion-button,
|
|
||||||
ion-toolbar ion-menu-button {
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .about-image {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition: opacity 500ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .madison {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .austin {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .chicago {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .seattle {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info {
|
|
||||||
position: relative;
|
|
||||||
margin-top: -10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--ion-background-color, #fff);
|
|
||||||
z-index: 2; // display rounded border above header image
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-list {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info p {
|
|
||||||
line-height: 130%;
|
|
||||||
|
|
||||||
color: var(--ion-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-icon {
|
|
||||||
margin-inline-end: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* iOS Only
|
|
||||||
*/
|
|
||||||
|
|
||||||
.ios .about-info {
|
|
||||||
--ion-padding: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ios .about-info h3 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#date-input-popover {
|
|
||||||
--offset-y: -var(--ion-safe-area-bottom);
|
|
||||||
|
|
||||||
--max-width: 90%;
|
|
||||||
--width: 336px;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,88 @@
|
|||||||
|
.demo-react-profile-dashboard-ui {
|
||||||
|
/* Ionic Variables and Theming. For more info, please see:
|
||||||
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
|
/** Ionic CSS Variables **/
|
||||||
|
:root {
|
||||||
|
/** primary **/
|
||||||
|
--ion-color-primary: #3880ff;
|
||||||
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-primary-shade: #3171e0;
|
||||||
|
--ion-color-primary-tint: #4c8dff;
|
||||||
|
|
||||||
|
/** secondary **/
|
||||||
|
--ion-color-secondary: #3dc2ff;
|
||||||
|
--ion-color-secondary-rgb: 61, 194, 255;
|
||||||
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-secondary-shade: #36abe0;
|
||||||
|
--ion-color-secondary-tint: #50c8ff;
|
||||||
|
|
||||||
|
/** tertiary **/
|
||||||
|
--ion-color-tertiary: #5260ff;
|
||||||
|
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||||
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-tertiary-shade: #4854e0;
|
||||||
|
--ion-color-tertiary-tint: #6370ff;
|
||||||
|
|
||||||
|
/** success **/
|
||||||
|
--ion-color-success: #2dd36f;
|
||||||
|
--ion-color-success-rgb: 45, 211, 111;
|
||||||
|
--ion-color-success-contrast: #ffffff;
|
||||||
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-success-shade: #28ba62;
|
||||||
|
--ion-color-success-tint: #42d77d;
|
||||||
|
|
||||||
|
/** warning **/
|
||||||
|
--ion-color-warning: #ffc409;
|
||||||
|
--ion-color-warning-rgb: 255, 196, 9;
|
||||||
|
--ion-color-warning-contrast: #000000;
|
||||||
|
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-warning-shade: #e0ac08;
|
||||||
|
--ion-color-warning-tint: #ffca22;
|
||||||
|
|
||||||
|
/** danger **/
|
||||||
|
--ion-color-danger: #eb445a;
|
||||||
|
--ion-color-danger-rgb: 235, 68, 90;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #cf3c4f;
|
||||||
|
--ion-color-danger-tint: #ed576b;
|
||||||
|
|
||||||
|
/** dark **/
|
||||||
|
--ion-color-dark: #222428;
|
||||||
|
--ion-color-dark-rgb: 34, 36, 40;
|
||||||
|
--ion-color-dark-contrast: #ffffff;
|
||||||
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-dark-shade: #1e2023;
|
||||||
|
--ion-color-dark-tint: #383a3e;
|
||||||
|
|
||||||
|
/** medium **/
|
||||||
|
--ion-color-medium: #92949c;
|
||||||
|
--ion-color-medium-rgb: 146, 148, 156;
|
||||||
|
--ion-color-medium-contrast: #ffffff;
|
||||||
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-medium-shade: #808289;
|
||||||
|
--ion-color-medium-tint: #9d9fa6;
|
||||||
|
|
||||||
|
/** light **/
|
||||||
|
--ion-color-light: #f4f5f8;
|
||||||
|
--ion-color-light-rgb: 244, 245, 248;
|
||||||
|
--ion-color-light-contrast: #000000;
|
||||||
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-light-shade: #d7d8da;
|
||||||
|
--ion-color-light-tint: #f5f6f9;
|
||||||
|
|
||||||
|
--ion-background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-item,
|
||||||
|
ion-toolbar,
|
||||||
|
ion-header {
|
||||||
|
--background: var(--ion-background-color);
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user