Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(user): Eva style #1354

Merged
merged 21 commits into from
Apr 5, 2019
Merged

feat(user): Eva style #1354

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1ce7a2a
refactor(user): remove unused property
yggg Mar 27, 2019
95902d4
refactor(user): remove inverse input
yggg Mar 27, 2019
1fcfc64
refactor(user): change initials class name to more descriptive
yggg Mar 27, 2019
ddecbe1
refactor(user): extract sizes into enum
yggg Mar 27, 2019
369358b
refactor(user): change size class names
yggg Mar 27, 2019
940b421
docs(user): use existing size
yggg Mar 27, 2019
1ad9333
fix(user): update setter type
yggg Mar 27, 2019
39dd471
feat(user): Eva theme
yggg Mar 27, 2019
8e3e942
fix(user): use proper theme variable
yggg Mar 31, 2019
bbab0d9
feat(theme): extract component sizes in type and scss function
yggg Mar 31, 2019
46e3714
feat(user): add tiny and giant sizes
yggg Mar 31, 2019
5dbe6b8
feat(user): add tiny and giant sizes
yggg Mar 31, 2019
af4ee7e
refactor(user): remove unnecessary size setter and getter
yggg Apr 4, 2019
154e4a8
Merge branch 'next' into feat/eva-user
yggg Apr 4, 2019
b9b1d20
test(user): add user component tests
yggg Apr 4, 2019
2145395
fix: import user, tabset and component variations from theme
yggg Apr 4, 2019
a628a04
docs(user): update theme properties list
yggg Apr 4, 2019
6edc47f
feat(user): add shape support
yggg Apr 4, 2019
894a991
docs(user): add shape captions
yggg Apr 4, 2019
a0ebe81
Merge branch 'next' into feat/eva-user
yggg Apr 5, 2019
33c7714
docs(user): add missing theme properties
yggg Apr 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(user): Eva theme 
BREAKING CHANGES:

Following properties were renamed:
user-font-size -> user-[size]-initials-text-font-size, user-[size]-name-text-font-size, user-[size]-title-text-font-size
user-line-height -> user-[size]-initials-text-line-height, user-[size]-name-text-line-height, user-[size]-title-text-line-height
user-bg -> user-picture-box-background-color
user-fg -> user-initials-text-color
user-fg-highlight -> user-picture-box-border-color
user-font-family-secondary -> user-name-text-font-family
user-size-small -> user-small-height, user-small-width
user-size-medium -> user-medium-height, user-medium-width
user-size-large -> user-large-height, user-large-width
user-size-xlarge -> user-xlarge-height, user-xlarge-width
  • Loading branch information
@yggg
yggg committed Apr 4, 2019
commit 39dd471a3965c7917d58a0ba3552d6d58c1f94e4
67 changes: 28 additions & 39 deletions src/framework/theme/components/user/_user.component.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,47 @@

@mixin nb-user-theme() {
nb-user {

font-size: nb-theme(user-font-size);
line-height: nb-theme(user-line-height);

.user-picture {
height: nb-theme(user-size-medium);
width: nb-theme(user-size-medium);
background: nb-theme(user-bg);
border: solid 2px nb-theme(user-fg-highlight);
background-color: nb-theme(user-picture-box-background-color);
border: nb-theme(user-picture-box-border-width) solid nb-theme(user-picture-box-border-color);
}

&.background {
color: nb-theme(user-fg);
}
.initials {
color: nb-theme(user-initials-text-color);
font-family: nb-theme(user-initials-text-font-family);
font-weight: nb-theme(user-initials-text-font-weight);
nnixaa marked this conversation as resolved.
Show resolved Hide resolved
}

.user-name {
font-family: nb-theme(user-font-family-secondary);
color: nb-theme(user-name-text-color);
font-family: nb-theme(user-name-text-font-family);
font-weight: nb-theme(user-name-text-font-weight);
}

&.inverse {
.user-picture {
background: nb-theme(user-fg);

&.background {
color: nb-theme(user-bg);
}
}
.user-title {
color: nb-theme(user-title-text-color);
font-family: nb-theme(user-title-text-font-family);
font-weight: nb-theme(user-title-text-font-weight);
}
}

&.small {
@each $size in 'small', 'medium', 'large', 'xlarge' {
nb-user.size-#{$size} {
.user-picture {
height: nb-theme(user-size-small);
width: nb-theme(user-size-small);
font-size: 80%;
height: nb-theme(user-#{$size}-height);
width: nb-theme(user-#{$size}-width);
}
}
&.medium {
.user-picture {
height: nb-theme(user-size-medium);
width: nb-theme(user-size-medium);
.initials {
font-size: nb-theme(user-#{$size}-initials-text-font-size);
line-height: nb-theme(user-#{$size}-initials-text-line-height);
}
}
&.large {
.user-picture {
height: nb-theme(user-size-large);
width: nb-theme(user-size-large);
.user-name {
font-size: nb-theme(user-#{$size}-name-text-font-size);
line-height: nb-theme(user-#{$size}-name-text-line-height);
}
}
&.xlarge {
.user-picture {
height: nb-theme(user-size-xlarge);
width: nb-theme(user-size-xlarge);
.user-title {
font-size: nb-theme(user-#{$size}-title-text-font-size);
line-height: nb-theme(user-#{$size}-title-text-line-height);
}
}
}
Expand Down
4 changes: 0 additions & 4 deletions src/framework/theme/components/user/user.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@
}
}

.user-title {
font-size: 0.75rem;
}

.user-name,
.user-title {
@include nb-rtl(text-align, right);
Expand Down
58 changes: 48 additions & 10 deletions src/framework/theme/styles/themes/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,16 +408,54 @@ $theme: (
route-tabs-selected: color-success,
route-tabs-icon-only-max-width: 576px,

user-font-size: font-size,
user-line-height: line-height,
user-bg: color-bg,
user-fg: color-fg,
user-fg-highlight: #bcc3cc,
user-font-family-secondary: font-secondary,
user-size-small: 1.5rem,
user-size-medium: 2.5rem,
user-size-large: 3.25rem,
user-size-xlarge: 4rem,
user-picture-box-background-color: transparent,
user-picture-box-border-color: color-basic,
user-picture-box-border-width: 2px,
user-initials-text-color: color-basic,
user-initials-text-font-family: text-paragraph-font-family,
user-initials-text-font-weight: text-paragraph-font-weight,
user-name-text-color: text-color,
user-name-text-font-family: text-paragraph-font-family,
user-name-text-font-weight: text-paragraph-font-weight,
user-title-text-color: text-color,
user-title-text-font-family: text-paragraph-2-font-family,
user-title-text-font-weight: text-paragraph-2-font-weight,

user-small-height: 1.5rem,
user-small-width: 1.5rem,
user-small-initials-text-font-size: text-caption-font-size,
user-small-initials-text-line-height: text-caption-line-height,
user-small-name-text-font-size: text-caption-font-size,
user-small-name-text-line-height: text-caption-line-height,
user-small-title-text-font-size: text-caption-font-size,
user-small-title-text-line-height: text-caption-line-height,

user-medium-height: 2.5rem,
user-medium-width: 2.5rem,
user-medium-initials-text-font-size: text-paragraph-font-size,
user-medium-initials-text-line-height: text-paragraph-line-height,
user-medium-name-text-font-size: text-paragraph-font-size,
user-medium-name-text-line-height: text-paragraph-line-height,
user-medium-title-text-font-size: text-caption-font-size,
user-medium-title-text-line-height: text-caption-line-height,

user-large-height: 3.25rem,
user-large-width: 3.25rem,
user-large-initials-text-font-size: text-paragraph-font-size,
user-large-initials-text-line-height: text-paragraph-line-height,
user-large-name-text-font-size: text-paragraph-font-size,
user-large-name-text-line-height: text-paragraph-line-height,
user-large-title-text-font-size: text-paragraph-2-font-size,
user-large-title-text-line-height: text-paragraph-2-line-height,

user-xlarge-height: 4rem,
user-xlarge-width: 4rem,
user-xlarge-initials-text-font-size: text-paragraph-font-size,
user-xlarge-initials-text-line-height: text-paragraph-line-height,
user-xlarge-name-text-font-size: text-paragraph-font-size,
user-xlarge-name-text-line-height: text-paragraph-line-height,
user-xlarge-title-text-font-size: text-paragraph-2-font-size,
user-xlarge-title-text-line-height: text-paragraph-2-line-height,

popover-fg: color-fg-heading,
popover-bg: color-bg,
Expand Down