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(input): Eva style #1343

Merged
merged 66 commits into from
Apr 4, 2019
Merged

feat(input): Eva style #1343

Show file tree
Hide file tree
Changes from 63 commits
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
93e29ef
refactor(theme): remove use of scss functions (#1256)
nnixaa Mar 21, 2019
2cbb668
feat(theme): css variables support (#1257)
nnixaa Mar 21, 2019
f12f9db
chore: disable e2e on next branch (#1328)
yggg Mar 28, 2019
b9661ad
feat(icons): new `nb-icon` component, icons library, and @nebular/eva…
nnixaa Mar 29, 2019
3f064e1
feat(theme): add eva palette
yggg Mar 21, 2019
d6a9cac
feat(theme): add file for helper classes
yggg Mar 21, 2019
1cbfd0b
refactor(checkbox): add new mapping properties
yggg Mar 21, 2019
d5ed559
feat(checkbox): add primary, info and white statuses
yggg Mar 21, 2019
749a9f9
feat(checkbox): add indeterminate input
yggg Mar 21, 2019
660dd9c
feat(checkbox): add change output
yggg Mar 21, 2019
b91f294
test(checkbox): add checks for indeterminate and change events
yggg Mar 21, 2019
4d37a4c
refactor(checkbox): use updated component properties for styles
yggg Mar 21, 2019
2e626d5
refactor(theme): separate new theme tokens from old ones
yggg Mar 21, 2019
b5d89c1
refactor(theme): simplify font variables naming
yggg Mar 22, 2019
49f491d
docs(checkbox): add new properties
yggg Mar 22, 2019
b695f7b
docs(checkbox): add indeterminate example
yggg Mar 22, 2019
5648de1
docs(checkbox): add indeterminate and checked disable examples
yggg Mar 22, 2019
e01a338
docs(checkbox): add examples with new statuses
yggg Mar 22, 2019
9c48227
docs(checkbox): make reset button visible
yggg Mar 22, 2019
9145150
fix(theme): use proper values for typography settings
yggg Mar 23, 2019
80c08b1
refactor(theme): move global styles to proper directory
yggg Mar 23, 2019
33d77b8
fix(checkbox): use updated class names in tests and select
yggg Mar 25, 2019
d4f3625
refactor(theme): add statuses function
yggg Mar 25, 2019
b899234
fix(checkbox): ignore basic status
yggg Mar 25, 2019
db0a725
refactor(checkbox): extract statuses into enum
yggg Mar 25, 2019
4b66e17
feat(theme): add new Eva theme variables
yggg Mar 28, 2019
45bf9c7
refactor(checkbox): remove named inputs
yggg Mar 28, 2019
4582518
refactor(checkbox): extract component statuses in shared type
yggg Mar 28, 2019
3639476
refactor(theme): remove 'white' and 'basic' statuses
yggg Mar 30, 2019
e3f10b5
refactor(checkbox): use nb-icon
yggg Mar 30, 2019
f8987d4
test(checkbox): add icon module import
yggg Mar 30, 2019
f9c1b8d
test(checkbox): add mark touched test
yggg Mar 30, 2019
83f7994
feat(checkbox): add state transition properties
yggg Mar 30, 2019
178a0a5
feat(input): add eva input properties
yggg Mar 23, 2019
aa98c86
feat(input): add eva statuses
yggg Mar 23, 2019
f53c1af
refactor(theme): add common state animation property
yggg Mar 23, 2019
fe08fba
feat(input): add eva styling
yggg Mar 23, 2019
855b507
refactor(input): use common classes format
yggg Mar 23, 2019
7d1f6f4
fix(input): use proper color variable names
yggg Mar 23, 2019
75f5ce0
docs(input): add new statuses examples
yggg Mar 23, 2019
aff5f34
docs(input): update properties reference
yggg Mar 23, 2019
dd2679b
refactor(input): use proper typography variables
yggg Mar 30, 2019
831f224
refactor(input): remove basic status
yggg Mar 30, 2019
8ab7b50
refactor(input): add statuses loop
yggg Mar 30, 2019
03a3c39
refactor(input): move default variants into basic input styles
yggg Mar 30, 2019
e34a32b
fix(input): use existing text variable
yggg Mar 31, 2019
fe350a1
docs(input): update theme variables list
yggg Mar 31, 2019
cfa53f8
refactor(input): define size and shape types
yggg Mar 31, 2019
aa11ac3
refactor(input): remove named inputs
yggg Mar 31, 2019
e87b9db
refactor(component status): add no status value
yggg Mar 31, 2019
dc7b06a
refactor(input): remove unnecessary values from size and shape
yggg Mar 31, 2019
f972eab
test(input): use updated field styles
yggg Mar 31, 2019
23645fc
docs(input): remove basic example
yggg Mar 31, 2019
03680c4
Merge branch 'next' into feat/eva-input
yggg Apr 2, 2019
d2eb9e0
refactor: remove mixins duplicates
yggg Apr 2, 2019
33ac068
feat: add shared component shape type
yggg Apr 2, 2019
788ed6d
feat(input): use common size and shape
yggg Apr 2, 2019
d265dc3
refactor(input): move initial styling to default states
yggg Apr 2, 2019
7cdaf4a
docs(input): update theme properties list
yggg Apr 2, 2019
69c3580
feat(input): add border style theme property
yggg Apr 2, 2019
f86d70d
docs(input): add missing theme property
yggg Apr 2, 2019
c007df7
fix(bootstrap): remove bootstrap theme
yggg Apr 3, 2019
736d965
test(input): check if size and shape set to default if no value passed
yggg Apr 3, 2019
1b7213c
refactor: remove empty component status
yggg Apr 3, 2019
829e8fd
test: remove checks for old status behavior
yggg Apr 3, 2019
fc72946
docs(input): put input in card
yggg Apr 4, 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
8 changes: 0 additions & 8 deletions src/framework/bootstrap/styles/_globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,4 @@
@import 'layout';

@mixin nb-bootstrap-global() {
@include nb-b-buttons-theme();
@include nb-b-button-group-theme();
@include nb-b-dropdowns-theme();
@include nb-b-icon-buttons-theme();
@include nb-b-forms-theme();
@include nb-b-input-group-theme();
@include nb-b-modals-theme();
@include nb-b-layout-theme();
}
1 change: 1 addition & 0 deletions src/framework/theme/components/component-shape.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type NbComponentShape = 'rectangle' | 'semi-round' | 'round';
2 changes: 1 addition & 1 deletion src/framework/theme/components/component-size.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export type NbComponentSize = '' | 'tiny' | 'small' | 'medium' | 'large' | 'giant';
export type NbComponentSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so, no empty status after all?

Copy link
Contributor Author

@yggg yggg Apr 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. No more empty values for size, status or shape. Component which could has unset value, should add '' as possible value. Like this:
status: '' | NbComponentStatus;

20 changes: 0 additions & 20 deletions src/framework/theme/components/input/_input-colors.scss
View file
Open in desktop

This file was deleted.

12 changes: 4 additions & 8 deletions src/framework/theme/components/input/_input-shapes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@
*/

@mixin input-shapes() {
&.input-rectangle {
border-radius: nb-theme(form-control-border-radius);
}
&.input-semi-round {
border-radius: nb-theme(form-control-semi-round-border-radius);
}
&.input-round {
border-radius: nb-theme(form-control-round-border-radius);
@each $shape in nb-get-shapes() {
&.shape-#{$shape} {
border-radius: nb-theme(input-#{$shape}-border-radius);
}
}
}
24 changes: 13 additions & 11 deletions src/framework/theme/components/input/_input-sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
*/

@mixin input-sizes() {
&.input-sm {
font-size: nb-theme(form-control-font-size-sm);
padding: nb-theme(form-control-padding-sm);
}
&.input-md {
font-size: nb-theme(form-control-font-size);
padding: nb-theme(form-control-padding);
}
&.input-lg {
font-size: nb-theme(form-control-font-size-lg);
padding: nb-theme(form-control-padding-lg);
@each $size in nb-get-sizes() {
&.size-#{$size} {
font-size: nb-theme(input-#{$size}-text-font-size);
font-weight: nb-theme(input-#{$size}-text-font-weight);
line-height: nb-theme(input-#{$size}-text-line-height);
padding: nb-theme(input-#{$size}-padding);

&::placeholder {
font-size: nb-theme(input-#{$size}-placeholder-text-font-size);
font-weight: nb-theme(input-#{$size}-placeholder-text-font-weight);
line-height: nb-theme(input-#{$size}-placeholder-text-line-height);
}
}
}
}
19 changes: 19 additions & 0 deletions src/framework/theme/components/input/_input-statuses.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

@mixin input-statuses() {
@each $status in nb-get-statuses() {
&:enabled.status-#{$status} {
border-color: nb-theme(input-#{$status}-border-color);
&:focus {
border-color: nb-theme(input-#{$status}-hover-border-color);
}
&:hover {
border-color: nb-theme(input-#{$status}-focus-border-color);
}
}
}
}
53 changes: 32 additions & 21 deletions src/framework/theme/components/input/_input.directive.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,56 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

@import './input-colors';
@import './input-statuses';
@import './input-sizes';
@import './input-shapes';

@mixin nb-input-theme() {
$border-width: nb-theme(form-control-border-width);
$border-type: nb-theme(form-control-border-type);
$border-color: nb-theme(form-control-border-color);

[nbInput] {
background-color: nb-theme(form-control-bg);
border: $border-width $border-type $border-color;
color: nb-theme(form-control-text-primary-color);
background-color: nb-theme(input-background-color);
border-color: nb-theme(input-border-color);
border-style: nb-theme(input-border-style);
border-width: nb-theme(input-border-width);
color: nb-theme(input-text-color);
font-size: nb-theme(input-text-font-size);
font-family: nb-theme(input-text-font-family);
font-weight: nb-theme(input-text-font-weight);
line-height: nb-theme(input-text-line-height);
padding: nb-theme(input-padding);
@include nb-component-animation(border, background-color, color);

&::placeholder {
color: nb-theme(input-placeholder-text-color);
font-family: nb-theme(input-placeholder-text-font-family);
text-overflow: ellipsis;
}

&:focus {
outline: none;
background-color: nb-theme(form-control-focus-bg);
border-color: nb-theme(form-control-selected-border-color);
border-color: nb-theme(input-focus-border-color);
}

&[disabled] {
@include install-placeholder(
nb-theme(form-control-placeholder-color),
nb-theme(form-control-placeholder-font-size),
0.5
);
&:hover {
border-color: nb-theme(input-hover-border-color);
}

&:disabled {
background-color: nb-theme(input-disabled-background-color);
border-color: nb-theme(input-disabled-border-color);
color: nb-theme(input-disabled-text-color);

&::placeholder {
color: nb-theme(input-disabled-placeholder-text-color);
}
}

&.input-full-width {
width: 100%;
}

@include input-colors();
@include input-statuses();
@include input-sizes();
@include input-shapes();

@include install-placeholder(
nb-theme(form-control-placeholder-color),
nb-theme(form-control-placeholder-font-size)
);
}
}
Loading