| @mixin base-colorpicker($name : v-colorpicker) { |
| |
| .#{$name} { |
| text-align: center; |
| } |
| |
| .#{$name}-button-color { |
| border: 1px solid silver; |
| float: left; |
| width: 10px; |
| height: 10px; |
| margin-top: 2px; |
| margin-right: 5px; |
| } |
| |
| .#{$name}-area { |
| border: 1px solid silver; |
| margin: 1px auto; |
| } |
| |
| .#{$name}.v-default-caption-width { |
| width: 100px; |
| } |
| |
| /***************** COLOR HISTORY COMPONENT *****************************/ |
| .#{$name}-history { |
| margin: 5px; |
| } |
| |
| .#{$name}-history td { |
| border: 1px solid silver !important; |
| } |
| |
| .#{$name}-history td { |
| line-height: 15px; |
| } |
| /***********************************************************************/ |
| |
| |
| /**************** COLOR POPUP COMPONENT ********************************/ |
| .#{$name}-popup { |
| width: 244px; |
| } |
| |
| .#{$name}-popup .v-scrollable { |
| background-color: #dddddd; |
| } |
| |
| .#{$name}-popup .v-tabsheet-content .v-scrollable { |
| background-color: #eaeaea; |
| } |
| |
| .#{$name}-popup .v-tabsheet-content .v-tabsheet-tabsheetpanel { |
| background: transparent; |
| } |
| |
| .#{$name}-popup .resize-button { |
| border: 0px solid silver; |
| background: url(images/resizebg.png); |
| margin-top: 5px; |
| } |
| |
| .#{$name}-popup .resize-button-caption { |
| display: none; |
| } |
| |
| .#{$name}-popup .resize-button:hover { |
| background: url(images/resizebg-selected.png); |
| } |
| |
| .#{$name}-popup .resize-button:focus { |
| outline: none; |
| } |
| |
| /***********************************************************************/ |
| |
| |
| /*********************** COLOR GRADIENT *******************************/ |
| .#{$name}-gradient { |
| width: 220px; |
| height: 220px; |
| padding-left: 10px; |
| margin-top: 0px; |
| } |
| |
| .#{$name}-gradient .#{$name}-gradient-clicklayer { |
| background-color: white; |
| filter: alpha(opacity = 0); |
| opacity: 0; |
| } |
| |
| .#{$name}-popup .rgb-gradient .#{$name}-gradient-background { |
| width: 220px; |
| height: 220px; |
| background: url(images/gradient2.png); |
| } |
| |
| .#{$name}-popup .hsv-gradient .#{$name}-gradient-foreground { |
| background: url(images/gradient.png); |
| } |
| |
| .#{$name}-popup .#{$name}-gradient-lowerbox { |
| border-right: 1px solid white; |
| border-top: 1px solid white; |
| } |
| |
| .#{$name}-popup .#{$name}-gradient-higherbox { |
| border-left: 1px solid white; |
| border-bottom: 1px solid white; |
| } |
| /**********************************************************************/ |
| |
| |
| /************************ COLOR SLIDER ********************************/ |
| .#{$name}-popup .rgb-sliders { |
| width: 227px; |
| padding-left: 10px; |
| color: #444444; |
| text-shadow: 0 1px 0 #FFFFFF; |
| } |
| |
| .#{$name}-popup .rgb-sliders .red .v-slider-base { |
| background-color: red; |
| } |
| |
| .#{$name}-popup .rgb-sliders .green .v-slider-base { |
| background-color: green; |
| } |
| |
| .#{$name}-popup .rgb-sliders .blue .v-slider-base { |
| background-color: blue; |
| } |
| |
| .#{$name}-popup .hsv-sliders { |
| padding-left: 10px; |
| color: #444444; |
| text-shadow: 0 1px 0 #FFFFFF; |
| } |
| |
| .#{$name}-popup .hue-slider { |
| height: 10px; |
| border: 0px solid silver; |
| background-image: url(images/slider_hue_bg.png); |
| background-color: transparent; |
| background-repeat: no-repeat; |
| background-position: 0 3px; |
| margin-top: 0px; |
| } |
| |
| .#{$name}-popup .hue-slider .v-slider-handle { |
| margin-top: -2px; |
| } |
| |
| .#{$name}-popup .hue-slider .v-slider-base { |
| border: 0px none; |
| height: 0px; |
| background-color: transparent; |
| } |
| /****************************************************************/ |
| |
| |
| /****************** COLOR PREVIEW *******************************/ |
| .#{$name}-popup .#{$name}-preview { |
| margin-top: 5px; |
| padding-left: 11px; |
| padding-right: 10px; |
| margin-bottom: 0px; |
| } |
| |
| .#{$name}-popup .v-absolutelayout-wrapper { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .#{$name}-popup .#{$name}-preview-textfield { |
| background: none; |
| overflow: hidden; |
| overflow-y: hidden; |
| overflow-x: hidden; |
| } |
| |
| .#{$name}-popup .v-textfield-dark { |
| color: #FFFFFF; |
| } |
| |
| .#{$name}-popup .v-textfield-light { |
| color: #000000; |
| } |
| /****************************************************************/ |
| |
| |
| /*************** COLOR SELECT ***********************************/ |
| .#{$name}-popup .colorselect { |
| margin-top: 5px; |
| padding-left: 10px; |
| padding-right: 10px; |
| } |
| |
| .#{$name}-popup .v-tabsheet .#{$name}-grid { |
| height: 319px; |
| } |
| |
| .#{$name}-popup .colorselect td { |
| line-height: 15px; |
| } |
| |
| .#{$name}-popup .v-filterselect { |
| padding-right: 16px; |
| } |
| /****************************************************************/ |
| |
| } |