Skip to content

Commit

Permalink
Edit border styling and fix size property
Browse files Browse the repository at this point in the history
  • Loading branch information
donovanroubos committed Jul 23, 2020
1 parent cd6bae0 commit 8363b0f
Show file tree
Hide file tree
Showing 5 changed files with 9,730 additions and 84 deletions.
4 changes: 2 additions & 2 deletions projects/angular-flagpack/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Use in your template:
code="nl"
size="m"
gradient="top-down"
[hasDropshadow]="true"
[hasDropShadow]="true"
[hasBorder]="true"
[hasBorderRadius]="true">
</lib-angular-flagpack>
Expand All @@ -45,7 +45,7 @@ Or use with defaults
| country code | String | true | none | see all codes |
| size | String | false | l | 's', 'm' or 'l' |
| className | String | false | - | - |
| hasDropshadow | boolean | false | false | - |
| hasDropShadow | boolean | false | false | - |
| hasBorder | boolean | false | true | - |
| hasBorderRadius | boolean | false | true | - |
| gradient | String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
Expand Down
4 changes: 2 additions & 2 deletions projects/angular-flagpack/src/lib/angular-flagpack.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import { isoToCountryCode, imageUrl } from 'flagpack-core';
export class AngularFlagpackComponent {
@Input() code = '528';
@Input() size = 'm';
@Input() hasDropshadow = false;
@Input() hasDropShadow = false;
@Input() hasBorder = true;
@Input() hasBorderRadius = true ;
@Input() hasBorderRadius = true;
@Input() gradient: string;
@Input() className: string;

Expand Down
163 changes: 88 additions & 75 deletions projects/angular-flagpack/src/lib/angular-flagpack.style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,114 @@
@mixin before-styling {
content: '';
width: 100%;
height: 100%;
position: absolute;
display: block;
mix-blend-mode: overlay;
box-sizing: border-box;
}

.flag {
display: inline-block;
overflow: hidden;
position: relative;
box-sizing: border-box;

&.size {
&-s {
width: 16px;
height: 12px;
// Shared styles
@mixin before-styling {
content: '';
width: 100%;
height: 100%;
position: absolute;
display: block;
mix-blend-mode: overlay;
box-sizing: border-box;
}

// Flag
.flag {
display: inline-block;
overflow: hidden;
position: relative;
box-sizing: border-box;

&.size {
&-s {
width: 16px;
height: 12px;

&.drop-shadow {
box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);
}

&.drop-shadow {
box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.10);
}
&.border-radius {
border-radius: 1px;

&.border-radius {
border-radius: 1px;
&.border {
&::before {
border-radius: 1px;
}
}
}
}

&-m {
width: 20px;
height: 15px;

&.drop-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
}
&-m {
width: 20px;
height: 15px;

&.border-radius {
border-radius: 1.5px;
}
&.drop-shadow {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
}

&-l {
width: 32px;
height: 24px;

&.drop-shadow {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}
&.border-radius {
border-radius: 1.5px;

&.border-radius {
border-radius: 2px;
&.border {
&::before {
border-radius: 1.5px;
}
}
}
}

&.border {
&::before {
@include before-styling();
border: 1px solid rgba(0, 0, 0, .5);
mix-blend-mode: overlay;
&-l {
width: 32px;
height: 24px;

&.drop-shadow {
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);
}
}

&.border-radius {
&::before {
@include before-styling();
border-radius: 1px;
&.border-radius {
border-radius: 2px;

&.border {
&::before {
border-radius: 2px;
}
}
}
}
}

&.top-down {
&::before {
@include before-styling();
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 2%, rgba(255, 255, 255, 0.70) 100%);
}
&.border {
&::before {
@include before-styling();
border: 1px solid rgba(0, 0, 0, .5);
mix-blend-mode: overlay;
}
}

&.real-linear {
&::before {
@include before-styling();
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.20) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.30) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.30) 100%);
}
&.top-down {
&::before {
@include before-styling();
background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);
}
}

&.real-circular {
&::before {
@include before-styling();
background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0.00) 37%) center calc(50% - 8px) / 600% 600%,
radial-gradient(50% 123%, rgba(255, 255, 255, 0.30) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.30) 100%) center calc(50% - 8px) / 600% 600%;
}
&.real-linear {
&::before {
@include before-styling();
background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);
}
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
&.real-circular {
&::before {
@include before-styling();
background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,
radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;
}
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
10 changes: 5 additions & 5 deletions projects/angular-flagpack/src/lib/angular-flagpack.template.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div
[ngClass]="[
'flag',
size,
hasBorder ? 'border' : '',
'size-' + size,
hasBorderRadius ? 'border-radius' : '',
hasDropshadow ? 'dropshadow' : '',
code,
gradient
hasBorder ? 'border' : '',
hasDropShadow ? 'drop-shadow' : '',
gradient,
className
]"
>
<img [src]="src">
Expand Down
Loading

0 comments on commit 8363b0f

Please sign in to comment.