Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-10 16:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

DropdownStyle: Added new dropdown sass style

Browse Source
This commit is contained in:
Cesar 2016-04-25 15:41:08 -04:00
parent 6b4f1b564e
commit 594d8539a5
2 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -16,7 +16,7 @@
frameborder="0" scrolling="0" width="130px" height="30px"></iframe> frameborder="0" scrolling="0" width="130px" height="30px"></iframe>
</nav> </nav>
<redoc scroll-y-offset="body > nav" spec-url='http://rebilly.github.io/SwaggerTemplateRepo/swagger.yaml'></redoc> <redoc scroll-y-offset="body > nav" spec-url='http://rebilly.github.io:80/SwaggerTemplateRepo/swagger.yaml'></redoc>
<!-- ReDoc built file with all dependencies included --> <!-- ReDoc built file with all dependencies included -->
<script src="main.js"> </script> <script src="main.js"> </script>

46
lib/common/components/DropDown/dropdown.scss
View File

@ -1,13 +1,12 @@
@import '../../styles/variables'; @import '../../styles/variables';
$silver: #666D71;
$background-silver: #EEEFEF;
$border: darken($background-silver, 2%);
:host { :host {
.dk-select { .dk-select {
max-width: 100%; max-width: 100%;
font-family: $headers-font; font-family: $headers-font, $headers-font-family;
font-size: .929em;
min-width: 100px;
width: auto;
} }
.dk-selected:after { .dk-selected:after {
@ -15,16 +14,11 @@ $border: darken($background-silver, 2%);
} }
// button // button
.dk-selected { .dk-selected {
color: $silver; color: $secondary-color;
border-color: $silver; border-color: rgba($secondary-color, .5);
padding: 0.4em 0.9em 0.4em 0.4em; padding: 0.15em 0.6em 0.2em 0.5em;
border-radius: 0.4rem; border-radius: $border-radius;
}
.dk-select-open-down .dk-selected {
border-radius: 0.4rem;
} }
.dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover { .dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover {
@ -34,37 +28,45 @@ $border: darken($background-silver, 2%);
// tick // tick
.dk-selected:before { .dk-selected:before {
border-top-color: $silver; border-top-color: $secondary-color;
border-width: .35em .35em 0; border-width: .35em .35em 0;
} }
.dk-select-open-down .dk-selected:before, .dk-select-open-down .dk-selected:before,
.dk-select-open-up .dk-selected:before { .dk-select-open-up .dk-selected:before {
border-bottom-color: $primary-color; border-bottom-color: $primary-color;
border-width: 0 .35em .35em;
} }
// items // items
.dk-select-multi:focus .dk-select-options, .dk-select-multi:focus .dk-select-options,
.dk-select-open-down .dk-select-options, .dk-select-open-down .dk-select-options,
.dk-select-open-up .dk-select-options { .dk-select-open-up .dk-select-options {
border-color: $silver; border-color: rgba($secondary-color, .2);
}
.dk-select-options .dk-option-highlight {
background: #ffffff;
} }
.dk-select-options { .dk-select-options {
margin-top: 0.2em; margin-top: 0.2em;
border-radius: 0.4em; padding: 0;
border-radius: $border-radius;
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08) !important
} }
.dk-option { .dk-option {
color: $black; color: $secondary-color;
padding: 0.4em 0.4em; padding: 0.16em 0.6em 0.2em 0.5em;
&:hover { &:hover {
background-color: $background-silver; background-color: rgba($secondary-color, .12);
}
&:focus {
background-color: rgba($secondary-color, .12);
} }
} }
.dk-option-selected { .dk-option-selected {
background-color: $background-silver; background-color: rgba(0, 0, 0, 0.05)!important;
} }
} }