Skip to content

Commit

Permalink
Task/custom dropdown options (#37)
Browse files Browse the repository at this point in the history 
* audit fixes

* custom options support in dropdown

* distribution generation

* not found option fix

* removed custom prop

Co-authored-by: abhaygawadefynd <abhaygawade@gofynd.com>
  • Loading branch information
@pnutmath
pnutmath and pnutmath committed Jun 2, 2020
1 parent 57ac6fc commit b6fad0f
Show file tree
Hide file tree
Showing 12 changed files with 711 additions and 468 deletions.
64 changes: 35 additions & 29 deletions dist/nitrozen.common.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nitrozen.common.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nitrozen.css
View file

Large diffs are not rendered by default.

64 changes: 35 additions & 29 deletions dist/nitrozen.umd.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nitrozen.umd.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nitrozen.umd.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nitrozen.umd.min.js.map
View file

Large diffs are not rendered by default.

646 changes: 425 additions & 221 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gofynd/nitrozen-vue",
"version": "0.0.9",
"version": "0.0.10",
"description": "Fynd Design Library for Vue",
"homepage": "https://github.com/gofynd/nitrozen-vue#readme",
"author": "Aayush Jain<aayushjain3011@gmail.com>",
Expand Down Expand Up @@ -43,4 +43,4 @@
"vue-template-compiler": "^2.6.11",
"webpack-merge": "^4.2.2"
}
}
}
320 changes: 160 additions & 160 deletions src/components/NDropdown/NDropdown.less
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,178 @@
@import './../../base/base.less';
@import './../NCheckbox/NCheckbox.less';
@import "./../../base/base.less";
@import "./../NCheckbox/NCheckbox.less";

.nitrozen-dropdown-container {
font-family: @PrimaryFont;
font-family: @PrimaryFont;
display: flex;
padding: 0;
flex-direction: column;
width: 100%;

.nitrozen-select-wrapper {
position: relative;
user-select: none;
width: 100%;
}
.nitrozen-select {
box-sizing: border-box;
border: 1px solid @InputBorderColor;
border-radius: 3px;
background-color: #ffffff;

position: relative;
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
}
.nitrozen-select:focus-within {
border-color: @SecondaryColor;
}
.nitrozen-select__trigger {
color: @TypographyPrimaryColor;
border-radius: 3px;
font-size: 14px;
line-height: 22px;
min-height: 22px;
padding: 8px 14px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
cursor: pointer;
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
input[type="search"]::-webkit-search-cancel-button {
position: relative;
right: 10px;
font-size: @BaseFontSize + 4px;
cursor: pointer;
}
}
.nitrozen-options {
position: absolute;
display: block;
transform: translate3d(0px, 42px, 0px);
left: 0;
right: 0;
border: 1px solid @InputBorderColor;
border-radius: 3px;
box-shadow: 0 4px 8px 0 rgba(229, 229, 229, 0.2),
0 6px 20px 0 rgba(229, 229, 229, 0.19);
background: #fff;
transition: all 0.5s;
opacity: 0;
max-height: 200px; // 48vh
overflow-y: auto;
visibility: hidden;
pointer-events: none;
z-index: 2;

.nitrozen-select-wrapper {
position: relative;
user-select: none;
width: 100%;
.nitrozen-menu-scrollbar;
}
.nitrozen-select.nitrozen-dropdown-open .nitrozen-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.nitrozen-dropup {
transform: translate3d(0px, 0px, 0px);
bottom: 42px;
z-index: 10;
}
.nitrozen-option {
position: relative;
display: block;
font-size: 14px;
color: @TypographyPrimaryColor;
line-height: 22px;
cursor: pointer;
transition: all 0.5s;
.nitrozen-checkbox-container {
pointer-events: none;
margin-top: 2px;
height: 20px;
.nitrozen-checkbox {
margin-top: 2px;
}
}
&.nitrozen-option-group-label {
pointer-events: none;
font-size: 14px;
font-weight: 600;
}
.nitrozen-select {
box-sizing: border-box;
border: 1px solid @InputBorderColor;
border-radius: 3px;
background-color: #ffffff;

position: relative;
display: flex;
flex-direction: column;
.nitrozen-option-container {
padding: 9px 14px;
}
.nitrozen-select:focus-within {
border-color: @SecondaryColor;
}
.nitrozen-select__trigger {
color: @TypographyPrimaryColor;
border-radius: 3px;
font-size: 14px;
line-height: 22px;
min-height: 22px;
padding: 8px 14px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
cursor: pointer;
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
input[type='search']::-webkit-search-cancel-button {
position: relative;
right: 10px;
font-size: @BaseFontSize + 4px;
cursor: pointer;
}
}
.nitrozen-options {
position: absolute;
display: block;
transform: translate3d(0px, 42px, 0px);
left: 0;
right: 0;
border: 1px solid @InputBorderColor;
border-radius: 3px;
box-shadow: 0 4px 8px 0 rgba(229, 229, 229, 0.2),
0 6px 20px 0 rgba(229, 229, 229, 0.19);
background: #fff;
transition: all 0.5s;
opacity: 0;
max-height: 200px; // 48vh
overflow-y: auto;
visibility: hidden;
pointer-events: none;
z-index: 2;

.nitrozen-menu-scrollbar;
}
.nitrozen-select.nitrozen-dropdown-open .nitrozen-options {
opacity: 1;
visibility: visible;
pointer-events: all;
.nitrozen-option-child-label {
padding-left: 24px;
display: flex;
align-items: center;
}
.nitrozen-dropup {
transform: translate3d(0px, 0px, 0px);
bottom: 42px;
z-index: 10;
}
.nitrozen-option {
position: relative;
display: block;
padding: 9px 14px;
font-size: 14px;
color: @TypographyPrimaryColor;
line-height: 22px;
cursor: pointer;
transition: all 0.5s;
.nitrozen-checkbox-container {
pointer-events: none;
margin-top: 2px;
height: 20px;
.nitrozen-checkbox {
margin-top: 2px;
}
}
&.nitrozen-option-group-label {
pointer-events: none;
height: 24px;
font-size: 14px;
font-weight: 600;
}

.nitrozen-option-child-label {
padding-left: 24px;
display: flex;
align-items: center;
}

.nitrozen-option-logo {
height: 24px;
width: auto;
padding-right: 8px;
}

.nitrozen-dropdown-multicheckbox-selected {
color: @SecondaryColor;
font-weight: bold;
}
}
.nitrozen-option:hover {
cursor: pointer;
background-color: @HoverColor;
}
.nitrozen-option.selected {
color: #ffffff;
background-color: @SecondaryColor;
}
// Disabled
.nitrozen-select.disabled {
background-color: @InputBorderColor;
}
.nitrozen-select.disabled .nitrozen-select__trigger {
color: @DisabledColor;
background-color: @InputBorderColor;
cursor: not-allowed;
}
.nitrozen-select.disabled
.nitrozen-select__trigger
.nitrozen-dropdown-arrow {
color: @DisabledColor;
.nitrozen-option-logo {
height: 24px;
width: auto;
padding-right: 8px;
}

// Arrow
.nitrozen-dropdown-multicheckbox-selected {
color: @SecondaryColor;
font-weight: bold;
}
}
.nitrozen-option:hover {
cursor: pointer;
background-color: @HoverColor;
}
.nitrozen-option.selected {
color: #ffffff;
background-color: @SecondaryColor;
}
// Disabled
.nitrozen-select.disabled {
background-color: @InputBorderColor;
}
.nitrozen-select.disabled .nitrozen-select__trigger {
color: @DisabledColor;
background-color: @InputBorderColor;
cursor: not-allowed;
}
.nitrozen-select.disabled .nitrozen-select__trigger .nitrozen-dropdown-arrow {
color: @DisabledColor;
}

.nitrozen-dropdown-arrow {
position: relative;
top: -4px;
height: 15px;
width: 15px;
color: @SecondaryColor;
}
.nitrozen-dropdown-arrow::after {
// content: '▼';
position: absolute;
bottom: 0px;
height: 100%;
}
.nitrozen-dropdown-open .nitrozen-dropdown-arrow {
left: 9px;
right: 0px;
transform: rotate(180deg);
top: 3px;
}
// Arrow

.nitrozen-dropdown-arrow {
position: relative;
top: -4px;
height: 15px;
width: 15px;
color: @SecondaryColor;
}
.nitrozen-dropdown-arrow::after {
// content: '▼';
position: absolute;
bottom: 0px;
height: 100%;
}
.nitrozen-dropdown-open .nitrozen-dropdown-arrow {
left: 9px;
right: 0px;
transform: rotate(180deg);
top: 3px;
}
}

.nitrozen-dropdown-label {
color: @LabelColor;
font-family: @PrimaryFont;
font-size: 12px;
font-weight: 500;
line-height: 21px;
color: @LabelColor;
font-family: @PrimaryFont;
font-size: 12px;
font-weight: 500;
line-height: 21px;
}
Loading

0 comments on commit b6fad0f

Please sign in to comment.