prehistoric-systems/security-checklist
1
0
Fork 0
mirror of https://github.com/brianlovin/security-checklist.git synced 2026-03-11 08:55:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #142 from brianlovin/center-android-icon

Browse source 
Center android icon + small style polish
This commit is contained in:
Brian Lovin 2019-02-08 15:07:58 -08:00 committed by GitHub
commit 3c8b718517
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
components/ChecklistItem/style.js
View file

@ -70,11 +70,11 @@ export const CheckboxContainer = styled.div`
width: 32px;
}
input[type="checkbox"] {
input[type='checkbox'] {
position: absolute;
}
input[type="checkbox"] + label {
input[type='checkbox'] + label {
width: 32px;
height: 32px;
border-radius: 4px;
@ -86,12 +86,12 @@ export const CheckboxContainer = styled.div`
text-indent: -1000px;
}
input[type="checkbox"] + label:hover {
input[type='checkbox'] + label:hover {
${Shadows.default};
background: ${theme.bg.default};
}
input[type="checkbox"] + label::after {
input[type='checkbox'] + label::after {
content: '';
position: absolute;
display: block;
@ -104,18 +104,18 @@ export const CheckboxContainer = styled.div`
transform: rotate(45deg);
}
input[type="checkbox"]:checked + label {
input[type='checkbox']:checked + label {
border: 1px solid ${theme.bg.default};
}
input[type="checkbox"]:checked + label::after {
input[type='checkbox']:checked + label::after {
border: solid ${theme.bg.default};
border-width: 0 2px 2px 0;
}
/* This ::before pseudo-element is used to animate the gradient
which does not support transitions. */
input[type="checkbox"] + label::before {
input[type='checkbox'] + label::before {
content: '';
position: absolute;
top: 0;
@ -125,23 +125,24 @@ export const CheckboxContainer = styled.div`
transition: opacity ${theme.animations.default};
opacity: 0;
background-image: radial-gradient(circle at top right, #a913de, #6ac9ff);
box-shadow: inset 0 0 1px rgba(0,0,0,0.4);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4);
}
input[type="checkbox"]:checked + label::before {
input[type='checkbox']:checked + label::before {
opacity: 1;
background-color: ${theme.success.default};
}
input[type="checkbox"]:active + label, input[type="checkbox"]:focus + label {
input[type='checkbox']:active + label,
input[type='checkbox']:focus + label {
box-shadow: 0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.brand.default, 0.5)};
0 0 0 3px ${props => hexa(props.theme.brand.default, 0.5)};
}
input[type="checkbox"]:active:checked + label, input[type="checkbox"]:focus:checked + label {
input[type='checkbox']:active:checked + label,
input[type='checkbox']:focus:checked + label {
box-shadow: 0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.spectrum.default, 0.5)};
0 0 0 3px ${props => hexa(props.theme.spectrum.default, 0.5)};
}
`;
export const ResourceContent = styled.div`
@ -201,12 +202,12 @@ export const AppMeta = styled.a`
display: flex;
align-items: center;
padding-right: 6px;
border-radius: 8px;
border-radius: 4px;
&:active, &:focus {
&:active,
&:focus {
box-shadow: 0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)};
background: ${theme.bg.wash};
}
`;
@ -257,17 +258,17 @@ export const AppSourcesListItem = styled.li`
align-items: center;
justify-content: center;
padding: 2px;
border-radius: 8px;
border-radius: 4px;
&:hover {
color: ${theme.text.default};
}
&:active, &:focus {
&:active,
&:focus {
color: ${theme.text.default};
box-shadow: 0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)};
background: ${theme.bg.wash};
}
}
@ -277,15 +278,14 @@ export const AppSourcesListItem = styled.li`
left: 4px;
}
@media (max-width: 768px) {
padding: 4px;
min-width: 40px;
.icon {
position: relative;
top: 5px;
left: 7px;
top: 3px;
left: 5px;
}
&:hover {
@ -329,24 +329,28 @@ export const ResourceRowContainer = styled.a`
margin-right: 8px;
}
&:hover, &:active, &:focus {
background: ${theme.bg.wash};
&:hover,
&:active,
&:focus {
color: ${theme.text.default};
}
&:active, &:focus {
&:active,
&:focus {
box-shadow: 0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)};
}
@media (max-width: 768px) {
width: calc(100% + 40px);
border-radius: 0;
border-radius: 4px;
align-items: flex-start;
margin-left: -24px;
padding-left: 24px;
&:hover, &:active, &:focus {
&:hover,
&:active,
&:focus {
background: ${theme.bg.default}!important;
}
@ -376,24 +380,20 @@ export const Divider = styled.hr`
`;
export const Content = styled.div`
transition:
max-height ${theme.animations.default},
opacity ${theme.animations.default},
visibility ${theme.animations.default};
transition: max-height ${theme.animations.default},
opacity ${theme.animations.default}, visibility ${theme.animations.default};
max-height: 2000px;
max-height: var(--maxHeight);
opacity: 1;
visibility: visible;
&[aria-hidden="true"] {
&[aria-hidden='true'] {
max-height: 0;
opacity: 0;
visibility: hidden;
}
`
`;
export const Uncollapse = styled.button`
background: ${theme.bg.wash};
@ -418,7 +418,8 @@ export const Uncollapse = styled.button`
color: ${theme.text.default};
background: ${tint(theme.bg.wash, -4)};
}
&:active, &:focus {
&:active,
&:focus {
transition: all 0.2s ease-in-out;
box-shadow: 0 0 0 1px ${theme.bg.default},
@ -459,11 +460,11 @@ export const OfferContainer = styled.a`
&:hover {
color: ${theme.text.secondary};
}
&:active, &:focus {
&:active,
&:focus {
box-shadow: inset 0 0 1px ${theme.border.active},
0 0 0 1px ${theme.bg.default},
0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)};
background: ${theme.bg.wash};
}
`;
@ -504,21 +505,17 @@ export const ExpandContainer = styled.div`
}
`;
export const ExpandContent = styled.div`
transition:
max-height ${theme.animations.default},
opacity ${theme.animations.default},
visibility ${theme.animations.default};
transition: max-height ${theme.animations.default},
opacity ${theme.animations.default}, visibility ${theme.animations.default};
max-height: 2000px;
max-height: var(--maxHeight);
opacity: 1;
visibility: visible;
&[aria-hidden="true"] {
&[aria-hidden='true'] {
max-height: 0;
opacity: 0;
visibility: hidden;
}
`
`;

2
components/Icon/index.js
View file

@ -95,7 +95,7 @@ export const Glyph = ({ glyph }: GlyphProps): any => {
);
case 'android':
return (
<g>
<g transform="translate(2 1)">
<path d="M1.98508 7.17365H1.92873C1.20629 7.17365 0.617249 7.76456 0.617249 8.48513V14.1951C0.617249 14.9185 1.20629 15.5075 1.92873 15.5075H1.98604C2.70848 15.5075 3.29752 14.9166 3.29752 14.1951V8.48508C3.29656 7.76456 2.70661 7.17365 1.98508 7.17365Z" />
<path d="M3.92507 16.399C3.92507 17.0623 4.46711 17.6024 5.13036 17.6024H6.41837V20.6866C6.41837 21.411 7.00928 22 7.72985 22H7.7862C8.5096 22 9.09956 21.41 9.09956 20.6866V17.6024H10.8996V20.6866C10.8996 21.411 11.4923 22 12.2129 22H12.2684C12.9917 22 13.5807 21.41 13.5807 20.6866V17.6024H14.8697C15.532 17.6024 16.074 17.0623 16.074 16.399V7.38312H3.92507V16.399Z" />
<path d="M13.0255 1.91553L14.0486 0.33634C14.1143 0.236737 14.0852 0.10055 13.9847 0.0357013C13.8851 -0.0300621 13.7489 -0.00279859 13.684 0.0995919L12.6234 1.73331C11.8277 1.40732 10.939 1.22414 10.0005 1.22414C9.06101 1.22414 8.17416 1.40732 7.37659 1.73331L6.31785 0.0995919C6.25304 -0.00279859 6.11585 -0.0300621 6.01534 0.0357013C5.91482 0.100506 5.88568 0.236737 5.95145 0.33634L6.97544 1.91553C5.1294 2.82023 3.88465 4.52533 3.88465 6.48125C3.88465 6.6015 3.89218 6.71987 3.9025 6.83729H16.0993C16.1097 6.71987 16.1162 6.6015 16.1162 6.48125C16.1163 4.52533 14.8706 2.82023 13.0255 1.91553ZM7.17273 4.74327C6.84861 4.74327 6.58556 4.48209 6.58556 4.15706C6.58556 3.83203 6.84861 3.57177 7.17273 3.57177C7.49871 3.57177 7.75989 3.83199 7.75989 4.15706C7.75989 4.48213 7.49684 4.74327 7.17273 4.74327ZM12.8273 4.74327C12.5032 4.74327 12.2401 4.48209 12.2401 4.15706C12.2401 3.83203 12.5032 3.57177 12.8273 3.57177C13.1523 3.57177 13.4135 3.83199 13.4135 4.15706C13.4135 4.48209 13.1523 4.74327 12.8273 4.74327Z" />