kj
/
webtrigon-job-portal
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

created jobs card component

develop
Ajay_S 3 vuotta sitten
vanhempi
e17b8f00ac
commit
aa72053a2d
16 muutettua tiedostoa jossa 2793 lisäystä ja 118 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2524
    -28
      package-lock.json
  2. +3
    -0
      package.json
  3. +4
    -4
      src/App.tsx
  4. +23
    -0
      src/assets/icons/Developer.svg
  5. +6
    -0
      src/assets/icons/infinite.svg
  6. +3
    -0
      src/assets/icons/officechair.svg
  7. +3
    -0
      src/assets/icons/pin.svg
  8. +3
    -0
      src/assets/icons/share.svg
  9. +0
    -24
      src/components/ExploreContainer.css
  10. +0
    -14
      src/components/ExploreContainer.tsx
  11. +116
    -0
      src/components/JobsCard.scss
  12. +51
    -0
      src/components/JobsCard.tsx
  13. +0
    -25
      src/pages/Home.tsx
  14. +0
    -0
      src/pages/WorkWithUs.scss
  15. +24
    -0
      src/pages/WorkWithUs.tsx
  16. +33
    -23
      src/theme/variables.css

+ 2524
- 28
package-lock.json
File diff suppressed because it is too large
Näytä tiedosto


+ 3
- 0
package.json Näytä tiedosto

@@ -20,11 +20,14 @@
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"ionicons": "^5.4.0",
"node": "^17.7.2",
"node-sass": "^7.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"sass": "^1.50.0",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",


+ 4
- 4
src/App.tsx Näytä tiedosto

@@ -1,7 +1,7 @@
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import WorkWithUs from './pages/WorkWithUs';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
@@ -28,11 +28,11 @@ const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/home">
<Home />
<Route exact path="/WorkWithUs">
<WorkWithUs />
</Route>
<Route exact path="/">
<Redirect to="/home" />
<Redirect to="/WorkWithUs" />
</Route>
</IonRouterOutlet>
</IonReactRouter>


+ 23
- 0
src/assets/icons/Developer.svg Näytä tiedosto

@@ -0,0 +1,23 @@
<svg id="Developer" xmlns="http://www.w3.org/2000/svg" width="26.562" height="26.585" viewBox="0 0 26.562 26.585">
<path id="Path_4" data-name="Path 4" d="M270.939,38.414H260.875a1.516,1.516,0,0,0-1.516,1.516v5.693a1.515,1.515,0,0,0,1.516,1.516h3.58l-.579,2.335a.331.331,0,0,0,.523.343l3.486-2.678h3.053a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,270.939,38.414Zm0,0" transform="translate(-245.892 -36.419)" fill="#88dbfd"/>
<path id="Path_5" data-name="Path 5" d="M346.606,206.962l-.448,1.806a.331.331,0,0,0,.523.343l3.486-2.678h-2.873Zm0,0" transform="translate(-328.174 -195.715)" fill="#5abfe9"/>
<path id="Path_6" data-name="Path 6" d="M429.9,38.414h-2.873a1.516,1.516,0,0,1,1.516,1.516v5.693a1.516,1.516,0,0,1-1.516,1.516H429.9a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,429.9,38.414Zm0,0" transform="translate(-404.858 -36.419)" fill="#5abfe9"/>
<g id="Group_2" data-name="Group 2" transform="translate(17.592 4.165)">
<path id="Path_7" data-name="Path 7" d="M338.958,106.729l1.259-.817a.149.149,0,0,1,.094-.025.375.375,0,0,1,.337.362.227.227,0,0,1-.089.193l-.872.565.872.565a.227.227,0,0,1,.089.193.375.375,0,0,1-.337.362.15.15,0,0,1-.094-.025l-1.259-.817a.327.327,0,0,1,0-.555Zm0,0" transform="translate(-338.805 -104.554)" fill="#f2f2f2"/>
<path id="Path_8" data-name="Path 8" d="M386.585,80.481a.215.215,0,0,1-.02.094l-1.744,3.572a.248.248,0,0,1-.223.124.274.274,0,0,1-.277-.263.223.223,0,0,1,.025-.094l1.739-3.572a.218.218,0,0,1,.208-.124A.284.284,0,0,1,386.585,80.481Zm0,0" transform="translate(-381.957 -80.219)" fill="#f2f2f2"/>
<path id="Path_9" data-name="Path 9" d="M439.635,107.284l-1.258.817a.15.15,0,0,1-.094.025.375.375,0,0,1-.337-.362.227.227,0,0,1,.089-.193l.872-.565-.872-.565a.227.227,0,0,1-.089-.193.375.375,0,0,1,.337-.362.149.149,0,0,1,.094.025l1.258.817a.327.327,0,0,1,0,.555Zm0,0" transform="translate(-432.798 -104.554)" fill="#f2f2f2"/>
</g>
<path id="Path_10" data-name="Path 10" d="M21.136,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316h-4.4v2.316a.826.826,0,0,1-.675.812A49.874,49.874,0,0,0,2.2,239.2a3.444,3.444,0,0,0-2.107,2.9L0,247.627a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(0.002 -222.157)" fill="#fcc18b"/>
<path id="Path_11" data-name="Path 11" d="M202.7,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316H191.5v3.7a.826.826,0,0,0,.675.812,49.873,49.873,0,0,1,5.539,1.75,3.444,3.444,0,0,1,2.107,2.9l.087,5.247h1.776a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(-181.56 -222.157)" fill="#eaab65"/>
<path id="Path_12" data-name="Path 12" d="M89.59,121.426h-.578a.893.893,0,0,0-.88,1.076l.227,1.25c.176.927,1.233.5,1.233.5Zm0,0" transform="translate(-83.54 -115.121)" fill="#eaab65"/>
<path id="Path_13" data-name="Path 13" d="M292.333,121.426h.578a.893.893,0,0,1,.88,1.076l-.227,1.25c-.176.927-1.233.5-1.233.5Zm0,0" transform="translate(-277.153 -115.121)" fill="#fcc18b"/>
<path id="Path_14" data-name="Path 14" d="M122.126,5.846a4.553,4.553,0,0,0-6.409,0,4.848,4.848,0,0,0-1.478,3.562v4.738c0,2.24,2.911,4.56,4.682,4.56s4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,122.126,5.846Zm0,0" transform="translate(-108.307 -4.292)" fill="#fcc18b"/>
<path id="Path_15" data-name="Path 15" d="M181.4,5.846a4.729,4.729,0,0,0-3.2-1.319,4.6,4.6,0,0,0-1.437.244,4.981,4.981,0,0,1,1.768,1.075,4.848,4.848,0,0,1,1.478,3.562v4.738c0,1.695-1.667,3.435-3.245,4.182a3.482,3.482,0,0,0,1.437.378c1.77,0,4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,181.4,5.846Zm0,0" transform="translate(-167.583 -4.292)" fill="#eaab65"/>
<path id="Path_16" data-name="Path 16" d="M105.145,0H99.352a2.7,2.7,0,0,0-2.7,2.7V6.424a1.864,1.864,0,0,1,1.221.456.158.158,0,0,0,.268-.113V3.847a1.193,1.193,0,0,1,1.193-1.193h1.084a1.233,1.233,0,0,1,.78.278l.106.087a1.49,1.49,0,0,0,1.886,0l.106-.087a1.233,1.233,0,0,1,.78-.278h1.084a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.863,1.863,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,105.145,0Zm0,0" transform="translate(-91.634)" fill="#426175"/>
<path id="Path_17" data-name="Path 17" d="M241.92,0h-1a4.071,4.071,0,0,1,.829,2.654h.19a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.864,1.864,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,241.92,0Zm0,0" transform="translate(-228.409)" fill="#2c4456"/>
<path id="Path_18" data-name="Path 18" d="M19.029,304.531a32.729,32.729,0,0,0-3.9-1.3l-.281.106a11.963,11.963,0,0,1-8.475,0l-.281-.106a32.724,32.724,0,0,0-3.9,1.3,3.443,3.443,0,0,0-2.107,2.9L0,312.955a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115l-.091-5.521A3.444,3.444,0,0,0,19.029,304.531Zm0,0" transform="translate(0.002 -287.486)" fill="#33bca5"/>
<path id="Path_19" data-name="Path 19" d="M59.432,312.683H45.722a.8.8,0,0,1-.793-.738l-.561-7.867a.8.8,0,0,1,.793-.851H59.993a.8.8,0,0,1,.793.851l-.561,7.868A.8.8,0,0,1,59.432,312.683Zm0,0" transform="translate(-42.063 -287.482)" fill="#f2f2f2"/>
<path id="Path_20" data-name="Path 20" d="M292.465,303.23H289.57a.8.8,0,0,1,.793.851l-.613,8.605H291.9a.8.8,0,0,0,.793-.738l.561-7.867A.8.8,0,0,0,292.465,303.23Zm0,0" transform="translate(-274.535 -287.486)" fill="#cdd6df"/>
<path id="Path_21" data-name="Path 21" d="M58.257,486.743H42.781a.692.692,0,0,1,0-1.383H58.257a.692.692,0,0,1,0,1.383Zm0,0" transform="translate(-39.904 -460.158)" fill="#cdd6df"/>
<path id="Path_22" data-name="Path 22" d="M185.323,380.193a1.107,1.107,0,1,1-1.107-1.107A1.107,1.107,0,0,1,185.323,380.193Zm0,0" transform="translate(-173.602 -359.402)" fill="#fff"/>
</svg>

+ 6
- 0
src/assets/icons/infinite.svg Näytä tiedosto

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.591" height="11.042" viewBox="0 0 22.591 11.042">
<g id="infinite" transform="translate(-1.06 -10.06)" opacity="0.6">
<path id="Path_3356" data-name="Path 3356" d="M12.356,15.581S10.19,11.25,6.671,11.25a4.332,4.332,0,1,0,0,8.662,5.359,5.359,0,0,0,3.519-1.444" transform="translate(0 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
<path id="Path_3357" data-name="Path 3357" d="M18,15.581s2.165,4.331,5.684,4.331a4.332,4.332,0,1,0,0-8.662,5.531,5.531,0,0,0-3.519,1.444" transform="translate(-5.644 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
</g>
</svg>

+ 3
- 0
src/assets/icons/officechair.svg Näytä tiedosto

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.25" height="19" viewBox="0 0 14.25 19">
<path id="officechair" d="M13.657,11.875H11.875a1.2,1.2,0,0,1-1.188,1.188H8.313v2.375h2.969a.594.594,0,0,1,0,1.188H2.969a.594.594,0,0,1,0-1.188H5.938V13.063H3.563a1.133,1.133,0,0,1-.844-.353,1.154,1.154,0,0,1-.343-.835H.594A.571.571,0,0,1,.176,11.7.571.571,0,0,1,0,11.282V6.531a.571.571,0,0,1,.176-.417.571.571,0,0,1,.417-.176.571.571,0,0,1,.417.176.571.571,0,0,1,.176.417v4.156h4.75V9.482a10.463,10.463,0,0,1-1.169-.055A4.894,4.894,0,0,1,3.8,9.213a2.207,2.207,0,0,1-.77-.408,1.874,1.874,0,0,1-.473-.668,2.493,2.493,0,0,1-.186-1.011A8.916,8.916,0,0,1,3.711,1.856a4.068,4.068,0,0,1,6.829,0,8.92,8.92,0,0,1,1.336,5.269,2.479,2.479,0,0,1-.186,1.011,1.889,1.889,0,0,1-.473.668,2.189,2.189,0,0,1-.77.408,4.956,4.956,0,0,1-.965.213,10.288,10.288,0,0,1-1.169.055v1.206h4.75V6.531a.594.594,0,0,1,1.188,0v4.75a.6.6,0,0,1-.594.594ZM11.875,17.8a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353A1.168,1.168,0,0,1,9.5,17.8a1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,11.875,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,8.313,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,4.75,17.8Z" fill="#50decb" opacity="0.9"/>
</svg>

+ 3
- 0
src/assets/icons/pin.svg Näytä tiedosto

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.584" height="16.504" viewBox="0 0 11.584 16.504">
<path id="pin" d="M5.773.25A5.629,5.629,0,0,1,9.879,1.935a5.536,5.536,0,0,1,1.7,4.087,7.9,7.9,0,0,1-.6,2.77A16.08,16.08,0,0,1,9.53,11.7q-.852,1.337-1.7,2.518T6.392,16.1l-.62.659q-.232-.232-.62-.7t-1.375-1.8q-.988-1.337-1.763-2.6A17.7,17.7,0,0,1,.62,8.812,7.83,7.83,0,0,1,0,6.023,5.566,5.566,0,0,1,1.685,1.935,5.566,5.566,0,0,1,5.773.25Zm0,7.825a2.044,2.044,0,0,0,1.472-.6,2.013,2.013,0,0,0,0-2.906,2.041,2.041,0,0,0-1.472-.6A2.051,2.051,0,0,0,3.719,6.023,2.05,2.05,0,0,0,5.773,8.075Z" transform="translate(0 -0.25)" fill="#eb3e19" opacity="0.6"/>
</svg>

+ 3
- 0
src/assets/icons/share.svg Näytä tiedosto

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.386" height="15.495" viewBox="0 0 14.386 15.495">
<path id="share" d="M13.843,12.181a2.764,2.764,0,0,0-2.15,1.045L7.652,10.7a2.466,2.466,0,0,0,0-1.459l4.041-2.526A2.764,2.764,0,1,0,11.079,5a2.648,2.648,0,0,0,.111.73L7.149,8.251a2.764,2.764,0,1,0,0,3.438l4.041,2.526a2.648,2.648,0,0,0-.111.73,2.764,2.764,0,1,0,2.764-2.764Zm0-8.844A1.658,1.658,0,1,1,12.185,5a1.658,1.658,0,0,1,1.658-1.658ZM5,11.628A1.658,1.658,0,1,1,6.657,9.97,1.658,1.658,0,0,1,5,11.628ZM13.843,16.6A1.658,1.658,0,1,1,15.5,14.945,1.658,1.658,0,0,1,13.843,16.6Z" transform="translate(-2.221 -2.214)"/>
</svg>

+ 0
- 24
src/components/ExploreContainer.css Näytä tiedosto

@@ -1,24 +0,0 @@
.container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}

.container strong {
font-size: 20px;
line-height: 26px;
}

.container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}

.container a {
text-decoration: none;
}

+ 0
- 14
src/components/ExploreContainer.tsx Näytä tiedosto

@@ -1,14 +0,0 @@
import './ExploreContainer.css';

interface ContainerProps { }

const ExploreContainer: React.FC<ContainerProps> = () => {
return (
<div className="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
);
};

export default ExploreContainer;

+ 116
- 0
src/components/JobsCard.scss Näytä tiedosto

@@ -0,0 +1,116 @@
.jobsCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #FFFFFF;
box-shadow: 0rem 0rem 0.6rem #00000029;
width: 34rem;
height: 32rem;
border-radius: 2.5rem;
margin-left: 1.5rem;
margin-top: 5rem;
.jobsCardHeader {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 90%;
border-bottom: 0.1rem solid #EFEFEF;
height: 8rem;

.developerIcon {
background-color: #F2F2F2;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;

svg {
margin-left: 1.5rem;
margin-top: 1.2rem;
width: 2.5rem;
height: 2.5rem;
}
}
.jobRole {
text-align: left;
width: 20rem;
h3 {
font-size: 2.1rem;
color: #5C5A5A;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 600;
letter-spacing: 0.1rem;
margin-bottom: 0.4rem;
}
div {
color: #C1C1C1;
font-size: 1.2rem;
text-transform: uppercase;
}
}

.shareIcon {
svg {
width: 1.5rem;
height: 1.5rem;
}
}
}

.jobsCardDetails {
width: 90%;
font-size: 1.3rem;
color: #868686;
height: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
// margin-left: 4rem;

.openPosition {
display: flex;
align-items: center;
margin-left: 2rem;

span {
margin-left: 2.5rem;
}
}

.experience {
display: flex;
align-items: center;
margin-left: 2rem;
span {
margin-left: 1.4rem;
}
}

.location {
display: flex;
align-items: center;
margin-left: 2rem;
span {
margin-left: 2.5rem;
}
}

button {
width: 30rem;
height: 4.5rem;
border: 0.1rem solid #2CC38C;
color: #2CC38C;
background-color: transparent;
border-radius: 2.7rem;
font-size: 1.4rem;
font-weight: 600;
}
}
}

+ 51
- 0
src/components/JobsCard.tsx Näytä tiedosto

@@ -0,0 +1,51 @@
import './JobsCard.scss';

import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
import { ReactComponent as ChairIcon } from '../assets/icons/officechair.svg';
import { ReactComponent as InfiniteIcon } from '../assets/icons/infinite.svg';
import { ReactComponent as PinIcon } from '../assets/icons/pin.svg';

interface Props {
role: string;
team: string;
openPosition: string;
experience: string;
location: string;
icon: JSX.Element,

}
const JobsCard: React.FC<Props> = (props: Props) => {
return (
<div className='jobsCard'>
<header className='jobsCardHeader'>
<div className='developerIcon'>
{props.icon}
</div>
<div className='jobRole'>
<h3>{props.role}</h3>
<div>{props.team}</div>
</div>
<div className='shareIcon'>
<ShareIcon />
</div>
</header>
<section className='jobsCardDetails'>
<div className='openPosition'>
<ChairIcon />
<span>{props.openPosition}</span>
</div>
<div className='experience'>
<InfiniteIcon />
<span>{props.experience}</span>
</div>
<div className="location">
<PinIcon />
<span>{props.location}</span>
</div>
<button>Show more details</button>
</section>
</div>
);
}

export default JobsCard;

+ 0
- 25
src/pages/Home.tsx Näytä tiedosto

@@ -1,25 +0,0 @@
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';

const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer />
</IonContent>
</IonPage>
);
};

export default Home;

src/pages/Home.css → src/pages/WorkWithUs.scss Näytä tiedosto


+ 24
- 0
src/pages/WorkWithUs.tsx Näytä tiedosto

@@ -0,0 +1,24 @@
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import JobsCard from '../components/JobsCard';
import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';

import './WorkWithUs.scss';

const WorkWithUs: React.FC = () => {
return (
<IonPage>
<IonContent fullscreen className='content'>
<JobsCard
role='Software Developer'
team='engineering'
openPosition='4 Open Position'
experience='Minimum 3 years Experience'
location='Montreal, Canada'
icon={<DeveloperIcon />} />

</IonContent>
</IonPage>
);
};

export default WorkWithUs;

+ 33
- 23
src/theme/variables.css Näytä tiedosto

@@ -2,7 +2,17 @@
http://ionicframework.com/docs/theming/ */

/** Ionic CSS Variables **/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:wght@100&display=swap');

:root {

/* font size */
font-size: 62.5%;
font-family: 'Poppins', sans-serif;
/* box-sizing */
box-sizing: border-box;

/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
@@ -84,65 +94,65 @@ http://ionicframework.com/docs/theming/ */

body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;

--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-rgb: 80, 200, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;

--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-rgb: 106, 100, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;

--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-rgb: 47, 223, 117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;

--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-rgb: 255, 213, 52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;

--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-rgb: 255, 73, 97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;

--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-rgb: 244, 245, 248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-contrast-rgb: 0, 0, 0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;

--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;

--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-rgb: 34, 36, 40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
@@ -154,10 +164,10 @@ http://ionicframework.com/docs/theming/ */

.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-background-color-rgb: 0, 0, 0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color-rgb: 255, 255, 255;

--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
@@ -198,10 +208,10 @@ http://ionicframework.com/docs/theming/ */

.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-background-color-rgb: 18, 18, 18;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color-rgb: 255, 255, 255;

--ion-border-color: #222222;

@@ -233,4 +243,4 @@ http://ionicframework.com/docs/theming/ */

--ion-card-background: #1e1e1e;
}
}
}

Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna