bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00
Code Releases Activity

select2 dropdown search tweaks, cleanup

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-04-18 11:21:35 +02:00
parent 6b98f19faa
commit c93a71a867
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
4 changed files with 17 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_src/_assets/styles/bigchain/_forms.scss
View File

@ -73,6 +73,11 @@
}
}
.form-control--sm {
padding: $input-padding-x-sm $input-padding-y-sm;
font-size: $font-size-sm;
}
//
// required indicator

182
_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss
View File

@ -1,182 +0,0 @@
//
// Position basics
//
.select-select {
display: none;
pointer-events: none;
position: absolute;
opacity: 0;
}
.select-element {
position: absolute;
display: none;
*,
*:before,
*:after {
box-sizing: border-box;
}
&.select-open {
display: block;
}
}
//
// Actual theme
//
.select-theme-bigchaindb {
user-select: none;
box-shadow: none;
.select-content {
border-radius: $border-radius;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
background: $gray-dark;
color: $input-color;
font-family: inherit;
overflow: auto;
max-width: 20rem;
min-width: 20rem;
max-height: 20rem;
-webkit-overflow-scrolling: touch;
@media (max-width: 27rem), (max-height: 27rem) {
max-width: 11.25rem;
max-height: 11.25rem;
}
}
.select-options {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
margin: 0;
padding: 0;
}
.select-option {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
position: relative;
list-style: none;
margin: 0;
line-height: 1;
padding: $input-padding-x 1em $input-padding-x 2.5em;
display: block;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.select-option-selected:before {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24'><polyline fill='none' stroke-width='2' stroke='#{$input-color}' points='23.5,0.5 7,23.5 0.5,17'/></svg>");
position: absolute;
left: 1em;
top: 0;
bottom: 0.2em;
height: 1em;
width: 1em;
margin: auto;
}
&.select-option-highlight,
&:hover {
background: $component-active-bg;
color: $component-active-color;
// the checkmark
&.select-option-selected:before {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24'><polyline fill='none' stroke-width='2' stroke='#{$component-active-color}' points='23.5,0.5 7,23.5 0.5,17'/></svg>");
}
}
&:first-child {
border-radius: $border-radius $border-radius 0 0;
// assume first item is always the placeholder
color: $input-color-placeholder;
border-bottom: 1px solid $gray;
pointer-events: none;
&:before {
display: none !important;
}
&.select-option-highlight,
&:hover {
background: inherit !important;
color: inherit !important;
}
}
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
&.select-target {
display: block;
vertical-align: middle;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
position: relative;
padding: $input-padding-x 3em $input-padding-x 0;
background: transparent;
border-bottom: 2px solid $input-border-color;
cursor: pointer;
color: $input-color-placeholder;
text-decoration: none;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
&.select-target-focused,
&.select-target-focused:focus {
color: $input-color;
border-color: $input-border-focus;
outline: none;
}
// dropdown indicator
b {
position: absolute;
right: .25em;
top: 0;
bottom: 0;
margin: auto;
height: 1.25rem;
width: 2em;
&:before,
&:after {
content: "";
display: block;
position: absolute;
margin: auto;
right: 0;
height: 0;
width: 0;
border: 0.263em solid transparent;
}
&:before {
top: 0;
border-bottom-color: inherit;
}
&:after {
bottom: 0;
border-top-color: inherit;
}
}
}
+ .form-label {
//visibility: hidden;
pointer-events: none;
}
}

12
_src/_assets/styles/bigchain/_select2-bigchaindb/layout.scss
View File

@ -36,9 +36,14 @@
}
.select2-search--dropdown {
padding: 0;
.select2-search__field {
@extend .form-control;
border-bottom: 1px solid $input-border-color !important;
@extend .form-control, .form-control--sm;
padding-left: $spacer;
padding-right: $spacer;
border-bottom: none !important;
background: rgba($input-border-color, .2);
}
}
@ -64,7 +69,8 @@
.select2-results__option {
line-height: 1;
padding: $input-padding-x 1em $input-padding-x 1em;
padding: $input-padding-x $spacer $input-padding-x $spacer;
margin-bottom: 0;
display: block;
cursor: pointer;
white-space: nowrap;

3
_src/_assets/styles/bigchain/_variables.scss
View File

@ -196,6 +196,9 @@ $input-font-weight: $font-weight-normal !default;
$input-padding-x: .5rem !default;
$input-padding-y: 0 !default;
$input-padding-x-sm: .5rem !default;
$input-padding-y-sm: 0 !default;
$input-bg: transparent !default;
$input-bg-disabled: $gray-dark !default;