maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Define svg colors in css

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-03-27 13:05:18 +03:00
parent e6d283de59
commit e9a45042e4
8 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/FieldCheckbox/FieldCheckbox.js
View file

@ -12,7 +12,6 @@ const IconCheckbox = props => {
<g transform="translate(2 2)">
<path
className={css.checked}
fill="#C0392B"
d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
/>
<path

1
src/components/Logo/IconLogo.js
View file

@ -15,7 +15,6 @@ const IconLogo = props => {
>
<path
d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
fill="#C0392B"
fillRule="evenodd"
/>
</svg>

7
src/components/Logo/Logo.css Normal file
View file

@ -0,0 +1,7 @@
@import '../../marketplace.css';
.logoMobile {
& path {
fill: var(--marketplaceColor);
}
}

7
src/components/Logo/Logo.js
View file

@ -1,18 +1,21 @@
import React from 'react';
import PropTypes from 'prop-types';
import config from '../../config';
import classNames from 'classnames';
import config from '../../config';
import IconLogo from './IconLogo';
import LogoImage from './saunatime-logo.png';
import css from './Logo.css';
const Logo = props => {
const { className, format, ...rest } = props;
const mobileClasses = classNames(css.logoMobile, className);
if (format === 'desktop') {
return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
}
return <IconLogo className={className} {...rest} />;
return <IconLogo className={mobileClasses} {...rest} />;
};
const { oneOf, string } = PropTypes;

4
src/containers/CheckoutPage/CheckoutPage.css
View file

@ -45,6 +45,10 @@
.logoMobile {
display: block;
& path {
fill: var(--marketplaceColor);
}
@media (--viewportLarge) {
display: none;
}

1
src/containers/CheckoutPage/LogoIcon.js
View file

@ -16,7 +16,6 @@ const LogoIcon = props => {
>
<path
d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
fill="#C0392B"
fillRule="evenodd"
/>
</svg>

10
src/containers/PasswordRecoveryPage/DoorIcon.css Normal file
View file

@ -0,0 +1,10 @@
@import '../../marketplace.css';
.stroke {
stroke: var(--marketplaceColor);
}
.strokeAndFill {
stroke: var(--marketplaceColor);
fill: var(--marketplaceColor);
}

10
src/containers/PasswordRecoveryPage/DoorIcon.js
View file

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import css from './DoorIcon.css';
const DoorIcon = props => {
const { className } = props;
@ -13,15 +14,14 @@ const DoorIcon = props => {
>
<g strokeWidth="2.5" fill="none" fillRule="evenodd" strokeLinejoin="round">
<path
stroke="#C0392B"
fill="#C0392B"
className={css.strokeAndFill}
strokeLinecap="round"
d="M28.182 42.364H50V26H28.182z"
/>
<path d="M39.09 38v-4.364" stroke="#FFF" strokeLinecap="round" />
<path
className={css.stroke}
d="M31.455 26v-2.455c0-4.067 3.176-7.363 7.09-7.363 3.915 0 7.09 3.296 7.09 7.363V26"
stroke="#C0392B"
strokeLinecap="round"
/>
<path
@ -29,13 +29,13 @@ const DoorIcon = props => {
stroke="#FFF"
/>
<path
stroke="#C0392B"
className={css.stroke}
strokeLinecap="round"
d="M23.818 7.455h19.637V14M43.455 47.818v4.364H23.818M2 52.798l21.818 4.838V2L2 6.838z"
/>
<path
className={css.stroke}
d="M19.455 30.91c0 2.107-1.71 3.817-3.82 3.817-2.106 0-3.817-1.71-3.817-3.818 0-2.11 1.71-3.82 3.818-3.82s3.82 1.71 3.82 3.82z"
stroke="#C0392B"
strokeLinecap="round"
/>
</g>