feat(avatar): sizes, shapes and colors to avatar

telerik · Oct 16, 2020 · 4010ff8 · 4010ff8
1 parent 0fe5d5b
commit 4010ff8
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 52 deletions.
diff --git a/packages/bootstrap/scss/avatar/_variables.scss b/packages/bootstrap/scss/avatar/_variables.scss
@@ -1,6 +1,21 @@
 // Avatar
-$avatar-size: map-get( $spacing, 8) !default;
+$avatar-border-width: 1px !default;
 $avatar-border-radius: map-get( $spacing, 1 ) !default;
 
-$avatar-bg: $primary !default;
-$avatar-text: contrast-wcag( $avatar-bg ) !default;
+$avatar-font-family: $font-family !default;
+$avatar-font-size: $font-size !default;
+$avatar-line-height: $line-height !default;
+
+
+$avatar-sizes: () !default;
+// sass-lint:disable indentation
+$avatar-sizes: map-merge((
+    sm: map-get( $spacing, 4 ),
+    md: map-get( $spacing, 8 ),
+    lg: map-get( $spacing, 16 )
+), $avatar-sizes);
+// sass-lint:enable indentation
+
+
+$avatar-theme-colors: () !default;
+$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );
diff --git a/packages/classic/scss/avatar/_variables.scss b/packages/classic/scss/avatar/_variables.scss
@@ -1,6 +1,21 @@
 // Avatar
-$avatar-size: map-get( $spacing, 8) !default;
+$avatar-border-width: 1px !default;
 $avatar-border-radius: map-get( $spacing, 1 ) !default;
 
-$avatar-bg: $primary !default;
-$avatar-text: contrast-wcag( $avatar-bg ) !default;
+$avatar-font-family: $font-family !default;
+$avatar-font-size: $font-size !default;
+$avatar-line-height: $line-height !default;
+
+
+$avatar-sizes: () !default;
+// sass-lint:disable indentation
+$avatar-sizes: map-merge((
+    sm: map-get( $spacing, 4 ),
+    md: map-get( $spacing, 8 ),
+    lg: map-get( $spacing, 16 )
+), $avatar-sizes);
+// sass-lint:enable indentation
+
+
+$avatar-theme-colors: () !default;
+$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );
diff --git a/packages/default/scss/avatar/_layout.scss b/packages/default/scss/avatar/_layout.scss
@@ -1,47 +1,62 @@
-@include exports("avatar/layout") {
+@include exports( "avatar/layout" ) {
 
+    // Avatar
     .k-avatar {
-        width: $avatar-size;
-        height: $avatar-size;
-        display: flex;
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        flex-shrink: 0 0 auto;
+        display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
+        overflow: hidden;
     }
 
 
-    // Shapes
-    .k-avatar-circle {
-        @include border-radius( 50% );
+    // Avatar initials
+    .k-avatar-initials {}
+
+
+    // Avatar icon
+    .k-avatar-icon {}
+
+
+    // Avatar image
+    .k-avatar-image {
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
 
-        &.k-avatar-image {
-            > * {
-                @include border-radius( 50% );
-            }
+    // Sizes
+    @each $name, $size in $avatar-sizes {
+        .k-avatar-#{$name} {
+            width: $size;
+            height: $size;
+            flex-basis: $size;
         }
     }
 
+
+    // Shapes
+    .k-avatar-square {}
     .k-avatar-rounded {
         @include border-radius( $avatar-border-radius );
-
-        &.k-avatar-image {
-            > * {
-                @include border-radius( $avatar-border-radius );
-            }
-        }
+    }
+    .k-avatar-circle {
+        border-radius: 50%;
     }
 
 
-    // Avatar content
-    .k-avatar-image {
-        > * {
-            width: $avatar-size;
-            height: $avatar-size;
-            background-position: center;
-            background-size: cover;
-            background-repeat: no-repeat;
-        }
+    // Bordered
+    .k-avatar-bordered {
+        border-width: $avatar-border-width;
     }
 
+
 }
 
diff --git a/packages/default/scss/avatar/_theme.scss b/packages/default/scss/avatar/_theme.scss
@@ -1,11 +1,23 @@
-@include exports("avatar/theme") {
-
-    .k-avatar-icon,
-    .k-avatar-initials {
-        @include fill (
-            $avatar-text,
-            $avatar-bg
-        );
+@include exports( "avatar/theme" ) {
+
+    // Solid Avatars
+    @each $name, $color in $avatar-theme-colors {
+        .k-avatar-solid.k-avatar-#{$name} {
+            border-color: $color;
+            color: contrast-wcag( $color );
+            background-color: $color;
+        }
+    }
+
+    // Outline avatars
+    .k-avatar-outline {
+        border-color: currentColor;
+    }
+
+    @each $name, $color in $avatar-theme-colors {
+        .k-avatar-outline.k-avatar-#{$name} {
+            color: $color;
+        }
     }
 
 }
diff --git a/packages/default/scss/avatar/_variables.scss b/packages/default/scss/avatar/_variables.scss
@@ -1,6 +1,21 @@
 // Avatar
-$avatar-size: map-get( $spacing, 8) !default;
+$avatar-border-width: 1px !default;
 $avatar-border-radius: map-get( $spacing, 1 ) !default;
 
-$avatar-bg: $primary !default;
-$avatar-text: contrast-wcag( $avatar-bg ) !default;
+$avatar-font-family: $font-family !default;
+$avatar-font-size: $font-size !default;
+$avatar-line-height: $line-height !default;
+
+
+$avatar-sizes: () !default;
+// sass-lint:disable indentation
+$avatar-sizes: map-merge((
+    sm: map-get( $spacing, 4 ),
+    md: map-get( $spacing, 8 ),
+    lg: map-get( $spacing, 16 )
+), $avatar-sizes);
+// sass-lint:enable indentation
+
+
+$avatar-theme-colors: () !default;
+$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );
diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss
@@ -95,14 +95,10 @@
     // Card avatar
     .k-card-avatar,
     .k-card .k-avatar {
+        margin-right: $card-avatar-spacing;
         width: $card-avatar-size;
         height: $card-avatar-size;
-        margin-right: $card-avatar-spacing;
-
-        &.k-avatar-image > * {
-            width: $card-avatar-size;
-            height: $card-avatar-size;
-        }
+        flex-basis: $card-avatar-size;
     }
 
 

diff --git a/packages/material/scss/avatar/_variables.scss b/packages/material/scss/avatar/_variables.scss
@@ -1,6 +1,21 @@
 // Avatar
-$avatar-size: map-get( $spacing, 8) !default;
+$avatar-border-width: 1px !default;
 $avatar-border-radius: map-get( $spacing, 1 ) !default;
 
-$avatar-bg: $primary !default;
-$avatar-text: contrast-wcag( $avatar-bg ) !default;
+$avatar-font-family: $font-family !default;
+$avatar-font-size: $font-size !default;
+$avatar-line-height: $line-height !default;
+
+
+$avatar-sizes: () !default;
+// sass-lint:disable indentation
+$avatar-sizes: map-merge((
+    sm: map-get( $spacing, 4 ),
+    md: map-get( $spacing, 8 ),
+    lg: map-get( $spacing, 16 )
+), $avatar-sizes);
+// sass-lint:enable indentation
+
+
+$avatar-theme-colors: () !default;
+$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );