Skip to content

Commit

Permalink
Feat: Image photographer (#850)
Browse files Browse the repository at this point in the history 
* Feat: Image photographer

* Fix: Naming
  • Loading branch information
@NiclasNorin
NiclasNorin authored Nov 6, 2023
1 parent b950260 commit ead558b
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 118 deletions.
183 changes: 68 additions & 115 deletions source/sass/component/_image.scss
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,58 @@
$c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default;

// ***************************************************************
// *** Mapping for different sizes
// ***************************************************************
$radius: (
(
'name': '',
'size': $border-radius-md,
),
(
'name': &--rounded-xs,
'size': $border-radius-xs,
),
(
'name': &--rounded-sm,
'size': $border-radius-sm,
),
(
'name': &--rounded-md,
'size': $border-radius-md,
),
(
'name': &--rounded-lg,
'size': $border-radius-lg,
)
);

// ***************************************************************
// *** Placeholder
// *** Image
// ***************************************************************

.c-image--is-placeholder {
@include ratio(16, 9, true);
position: relative;
line-height: 0;
border: 1px solid $color-image-placeholder-border;
background-color: $color-image-placeholder-background;
user-select: none;
}

.c-image__placeholder {
@include cover();
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.c-image {
.c-image__caption,
.c-image__byline {
font-size: $font-size-caption;
line-height: $line-height-caption;
margin-top: map-get($spacers, '1');
}

@include mq(map_get($breakpoints-map, 'sm')) {
flex-direction: row;
.c-image__caption {
color: $color-darkest;
}

.c-icon {
color: $color-image-placeholder-icon;
.c-image__byline {
color: $color-dark;
}

.c-image__placeholder-text {
color: $color-image-placeholder-label;
font-weight: $font-weight-bold;
font-family: $font-family-bold;
.c-image__modal {
cursor: pointer;
}

.c-icon + .c-image__placeholder-text {
margin-top: map-get($spacers, '2');
.c-image__image {
border-radius: $c-image-border-radius;
max-width: 100%;
}

@include mq(map_get($breakpoints-map, 'sm')) {
margin-left: map-get($spacers, '1');
margin-top: 0;
}
/* Modifiers */
&.c-image--custom-width {
width: auto;
}
}

// ***************************************************************
// *** Image
// ***************************************************************
&.c-image--radius-xs .c-image__image {
border-radius: $border-radius-xs;
}

.c-image {
&.c-image--radius-sm .c-image__image {
border-radius: $border-radius-sm;
}

.c-image--custom-width {
width: auto;
&.c-image--radius-md .c-image__image {
border-radius: $border-radius-md;
}

.c-image__image {
border-radius: $c-image-border-radius;
max-width: 100%;
&.c-image--radius-lg .c-image__image {
border-radius: $border-radius-lg;
}

.c-image__caption {
font-size: $font-size-caption;
color: $color-dark;
line-height: $line-height-caption;
margin-top: map-get($spacers, '1');
&.c-image--radius-full .c-image__image {
border-radius: $border-radius-full;
}

.c-image--full-width .c-image__image {
Expand All @@ -98,10 +61,6 @@ $radius: (
display: block;
}

.c-image__modal {
cursor: pointer;
}

.c-modal--gallery .c-image__caption {
margin: 0 auto;
position: absolute;
Expand All @@ -125,54 +84,48 @@ $radius: (
width: auto;
}
}
}

// Rounded Images with different sizes
@each $map in $radius {
$radiusName: map-get($map, 'name');
$radiusSize: map-get($map, 'size');

&#{$radiusName}.c-image--rounded img {
border-radius: #{$radiusSize};
}

&#{$radiusName}.c-image--rounded-top-left img {
border-radius: #{$radiusSize} 0 0 0;
}

&#{$radiusName}.c-image--rounded-top-right img {
border-radius: 0 #{$radiusSize} 0 0;
}

&#{$radiusName}.c-image--rounded-bottom-left img {
border-radius: 0 0 #{$radiusSize} 0;
}
// ***************************************************************
// *** Placeholder
// ***************************************************************

&#{$radiusName}.c-image--rounded-bottom-right img {
border-radius: 0 0 0 #{$radiusSize};
}
.c-image--is-placeholder {
@include ratio(16, 9, true);
position: relative;
line-height: 0;
border: 1px solid $color-image-placeholder-border;
background-color: $color-image-placeholder-background;
user-select: none;
}

&#{$radiusName}.c-image--rounded-top-left.c-image--rounded-top-right img {
border-radius: #{$radiusSize} #{$radiusSize} 0 0;
}
.c-image__placeholder {
@include cover();
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

&#{$radiusName}.c-image--rounded-bottom-left.c-image--rounded-bottom-right img {
border-radius: 0 0 #{$radiusSize} #{$radiusSize};
}
@include mq(map_get($breakpoints-map, 'sm')) {
flex-direction: row;
}

&#{$radiusName}.c-image--rounded-top-left.c-image--rounded-bottom-left img {
border-radius: #{$radiusSize} 0 0 #{$radiusSize};
}
.c-icon {
color: $color-image-placeholder-icon;
}

&#{$radiusName}.c-image--rounded-top-left.c-image--rounded-bottom-right img {
border-radius: #{$radiusSize} 0 #{$radiusSize} 0;
}
.c-image__placeholder-text {
color: $color-image-placeholder-label;
font-weight: $font-weight-bold;
font-family: $font-family-bold;
}

&#{$radiusName}.c-image--rounded-top-right.c-image--rounded-bottom-right img {
border-radius: 0 0 #{$radiusSize} #{$radiusSize};
}
.c-icon + .c-image__placeholder-text {
margin-top: map-get($spacers, '2');

&#{$radiusName}.c-image--rounded-top-right.c-image--rounded-bottom-left img {
border-radius: #{$radiusSize} 0 0 #{$radiusSize};
@include mq(map_get($breakpoints-map, 'sm')) {
margin-left: map-get($spacers, '1');
margin-top: 0;
}
}
}
}
3 changes: 0 additions & 3 deletions views/pages/components/usage/image.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
'src'=> "https://your-url.se",
'alt' => "This is an image",
'caption' => "Your caption text",
'roundedTopLeft' => true,
'roundedBottomRight' => true,
'roundedRadius' => "md"
]
)
@endimage
Expand Down

0 comments on commit ead558b

Please sign in to comment.