123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- @mixin runo-select($primaryStyleName : v-filterselect) {
-
- $select-button-width: 25px;
- $select-button-negative-width: -25px;
-
- .v-select-select {
- font-size: 13px;
- }
- /* Twincol style */
- .v-select-twincol-options,
- .v-select-twincol-selections {
- font-size: 13px;
- }
- .v-select-twincol-buttons {
- padding: 2px; /* does not work in first render in FF ? */
- }
-
- /** Filterselect aka ComboBox styles */
-
- .#{$primaryStyleName} {
- height: 23px;
- background: transparent url(img/bg-left-filter.png) no-repeat;
- padding-left: 4px;
- padding-right: $select-button-width; /* Space for the button */
- }
- &.v-app .#{$primaryStyleName} .#{$primaryStyleName}-input,
- .v-window .#{$primaryStyleName} .#{$primaryStyleName}-input,
- .v-popupview-popup .#{$primaryStyleName} .#{$primaryStyleName}-input {
- background: transparent url(img/bg-center-filter.png) no-repeat 1px 0;
- border: none;
- height: 23px;
- margin: 0;
- padding: 2px 0 1px 2px;
- font-size: 13px;
- }
- .#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
- font-style: normal;
- }
- .#{$primaryStyleName}-input:focus {
- /* remove safari/mac outline from this element */
- outline: none;
- }
- .#{$primaryStyleName}-focus {
- outline: 1px solid #5daee8;
- outline-offset: -1px;
- }
- .v-sa & .#{$primaryStyleName}-focus {
- /* place safari focus outline around the whole thing */
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -4px;
- }
- .v-ch & .#{$primaryStyleName}-focus {
- /* remove safari focus outline offset for chrome (evaluates also as safari) */
- outline-offset: 0;
- }
- .#{$primaryStyleName}-button {
- width: $select-button-width;
- margin-right: $select-button-negative-width;
- height: 23px;
- background: transparent url(img/bg-right-filter.png);
- }
- .#{$primaryStyleName}-button:hover {
- background-position: bottom left;
- }
- .v-disabled .#{$primaryStyleName}-button:hover,
- .v-readonly .#{$primaryStyleName}-button:hover {
- background-position: top left;
- }
- .#{$primaryStyleName}.v-readonly .#{$primaryStyleName}-input {
- background: transparent;
- }
- .#{$primaryStyleName}-suggestpopup {
- background: #f6f7f7;
- border: 1px solid #b6bbbc;
- font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
- color: #464f52;
- font-size: 12px;
- line-height: 18px;
- margin-top: -1px;
- }
- .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
- padding: 1px 6px;
- cursor: pointer;
- min-height: 21px;
- }
- .#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
- margin-right: 3px;
- }
- .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
- background: #5daee8;
- color: #fff;
- }
- .#{$primaryStyleName}-nextpage,
- .#{$primaryStyleName}-nextpage-off,
- .#{$primaryStyleName}-prevpage-off,
- .#{$primaryStyleName}-prevpage {
- height: 11px;
- width:100%;
- background: transparent url(img/button-bg.png) no-repeat 50% 0;
- margin: 2px 0 0 0;
- }
- .#{$primaryStyleName}-prevpage,
- .#{$primaryStyleName}-prevpage-off {
- background-position: 50% -1px;
- margin: 0 0 2px 0;
- }
- .#{$primaryStyleName}-prevpage:hover {
- background-position: 50% bottom;
- }
- .#{$primaryStyleName}-nextpage:hover {
- background-position: 50% -12px;
- }
- .#{$primaryStyleName}-nextpage span,
- .#{$primaryStyleName}-nextpage-off span,
- .#{$primaryStyleName}-prevpage-off span,
- .#{$primaryStyleName}-prevpage span {
- display: block;
- height: 12px;
- width:100%;
- background: transparent url(img/arrow-up.png) no-repeat 50% 40%;
- text-indent: -90000px;
- cursor: pointer;
- overflow: hidden;
- }
- .#{$primaryStyleName}-nextpage span,
- .#{$primaryStyleName}-nextpage-off span {
- background: transparent url(img/arrow-down.png) no-repeat 50% 60%;
- }
- .#{$primaryStyleName}-status {
- font-size: 11px;
- line-height: 11px;
- width: 100%;
- padding: 4px 0px;
- height: 11px;
- border-top: 1px solid #b6bbbc;
- }
-
-
- /* Error styles (disabled by default)
- ----------------------------------
-
- .#{$primaryStyleName}-error {
- background-image: url(img/bg-left-filter-error.png);
- }
- .#{$primaryStyleName}-error .#{$primaryStyleName}-input {
- background-image: url(img/bg-center-filter-error.png);
- }
- .#{$primaryStyleName}-error .#{$primaryStyleName}-button {
- background-image: url(img/bg-right-filter-error.png);
- }
- .v-select-error .v-select-option,
- .v-select-error .v-select-select,
- .v-select-error .v-select-twincol-selections,
- .v-select-error .v-select-twincol-options {
- background: #FFE0E0;
- }
- */
-
- /* Required field styles (disabled by default)
- --------------------------------------------
-
- .v-select-required .v-select-option,
- .v-select-required .v-select-select,
- .v-select-required .v-select-twincol-selections,
- .v-select-required .v-select-twincol-options {
- background: #FFE0E0;
- }
- */
- }
|