diff options
Diffstat (limited to 'js/dojo/dojox/mobile/themes/custom/variables.less')
| -rw-r--r-- | js/dojo/dojox/mobile/themes/custom/variables.less | 921 |
1 files changed, 921 insertions, 0 deletions
diff --git a/js/dojo/dojox/mobile/themes/custom/variables.less b/js/dojo/dojox/mobile/themes/custom/variables.less new file mode 100644 index 0000000..9c22efc --- /dev/null +++ b/js/dojo/dojox/mobile/themes/custom/variables.less @@ -0,0 +1,921 @@ +//---------------------------------------------------------------- +// 1. Variables for quick setting +//---------------------------------------------------------------- + +// Default state variables +@theme-default-margin: 8px; +@theme-default-padding: 8px; +@theme-default-font-size: 14px; +@theme-default-font-family: Helvetica; +@theme-default-font-weight: normal; +@theme-default-text-shadow: none; +@theme-default-color: #131313; // numerical color value +@theme-default-border-color: #B5BCC7; // numerical color value +@theme-default-border-radius: 5px; +@theme-default-background-color: lighten(@theme-default-border-color, 20%); + +// Highlighting state variables +@theme-highlight-font-size: 18px; +@theme-highlight-font-family: @theme-default-font-family; +@theme-highlight-font-weight: bold; +@theme-highlight-text-shadow: rgba(0,0,0,0.2) 0px 1px 2px; +@theme-highlight-color: #000000; // numerical color value +@theme-highlight-border-color: #769DC0; // numerical color value +@theme-highlight-background-color: #5CB0FF; // numerical color value + +//---------------------------------------------------------------- +// 2. Variables for typical style setting +//---------------------------------------------------------------- + +// Color +@theme-heading-color: @theme-default-color; +@theme-heading-border-color: @theme-highlight-border-color; +@theme-heading-background-color: @theme-highlight-background-color; +@theme-dom-button-background-color: @theme-highlight-background-color; +@theme-tabbar-color: @theme-default-color; +@theme-round-rect-border-color: @theme-default-border-color; +@theme-round-rect-background-color: #FFFFFF; +@theme-round-rect-box-shadow: 5px 5px 5px @theme-round-rect-border-color; +@theme-category-color: @theme-highlight-color; +@theme-list-item-color: @theme-default-color; +@theme-list-item-border-color: @theme-default-border-color; +@theme-list-item-background-color: #FFFFFF; +@theme-ui-widget-color: @theme-default-color; +@theme-ui-widget-selected-color: @theme-highlight-color; +@theme-ui-widget-border-color: @theme-default-border-color; +@theme-ui-widget-selected-border-color: @theme-highlight-border-color; +@theme-ui-widget-background-color: @theme-highlight-background-color; +@theme-ui-widget-selected-background-color: darken(@theme-ui-widget-background-color, 30%); +@theme-ui-widget-checked-background-color: darken(@theme-ui-widget-background-color, 20%); +@theme-ui-widget-disabled-background-color: lighten(@theme-ui-widget-background-color, 10%); + +// Font +@theme-heading-font-size: @theme-highlight-font-size; +@theme-heading-font-family: @theme-highlight-font-family; +@theme-heading-font-weight: @theme-default-font-weight; +@theme-heading-text-shadow: @theme-highlight-text-shadow; +@theme-tabbar-font-size: @theme-default-font-size - 3; +@theme-tabbar-font-family: @theme-default-font-family; +@theme-tabbar-font-weight: @theme-default-font-weight; +@theme-category-font-size: @theme-highlight-font-size; +@theme-category-font-family: @theme-highlight-font-family; +@theme-category-font-weight: @theme-default-font-weight; +@theme-category-text-shadow: @theme-highlight-text-shadow; +@theme-list-item-font-size: @theme-highlight-font-size; +@theme-list-item-font-family: @theme-default-font-family; +@theme-list-item-font-weight: @theme-default-font-weight; +@theme-list-item-text-shadow: none; +@theme-ui-widget-font-size: @theme-default-font-size; +@theme-ui-widget-font-family: @theme-default-font-family; +@theme-ui-widget-font-weight: @theme-default-font-weight; +@theme-ui-widget-text-shadow: none; + +// Size +@theme-heading-height: 40px; +@theme-tabbar-height: 50px; +@theme-category-height: 30px; +@theme-list-item-height: 50px; +@theme-icon-item-height: 65px; +@theme-icon-item-width: 65px; +@theme-ui-widget-height: 30px; +@theme-ui-widget-width: 90px; + +@theme-ui-widget-border-radius: 2px; // square style +//@theme-ui-widget-border-radius: @theme-default-border-radius; // round style +//@theme-ui-widget-border-radius: @theme-ui-widget-height * 0.5; // oval style + +// background-image gradation +._background-image-gradient-mask-heading () { + @delta: 1% / @theme-heading-height * 100; + // claro gradation + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 1)), color-stop(@delta * 1, rgba(255, 255, 255, 1)), color-stop(@delta * 1, rgba(255, 255, 255, 0.14)), color-stop(@delta * 2, rgba(255, 255, 255, 0.14)), color-stop(@delta * 2, rgba(255, 255, 255, 0.52)), color-stop(@delta * 3, rgba(255, 255, 255, 0.52)), color-stop(@delta * 3, rgba(255, 255, 255, 0.68)), color-stop(@delta * 4, rgba(255, 255, 255, 0.68)), color-stop(1, rgba(255, 255, 255, 0))); +} +._background-image-gradient-mask-ui-widget () { + @delta: 1% / @theme-ui-widget-height * 100; + // claro gradation + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 1)), color-stop(@delta * 1, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); +} +._background-image-gradient-mask-ui-widget-r () { // for .mblArrowButtonHead-styles + @delta: 1% / @theme-ui-widget-height * 100; + // claro gradation + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 1)), color-stop(@delta * 1, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); +} + +// dojox.mobile fixed variables +@mbl-dom-button-size: 29px; +@mbl-switch-height: 27px; + +// Application's customizable variables +@appl-list-item-icon-size: 29px; // size of ListItemIcon + +//---------------------------------------------------------------- +// 3. Variables for dojox.mobile Widgets +//---------------------------------------------------------------- + +//---------------------------------------------------------------- +// common.less +//---------------------------------------------------------------- +// .mobile body +.mobile-body-styles () { + background-color: @theme-default-background-color; + font-family: @theme-default-font-family; + font-size: @theme-default-font-size; +} +// .mblView +.mblView-styles () { + color: @theme-default-color; +} +// .mblColorBlue +.mblColorBlue-styles () { + background-color: #366EDF; + ._background-image-gradient-mask-ui-widget; +} +// .mblColorDefault +.mblColorDefault-styles () { + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + &.mblDomButton { + background-color: @theme-dom-button-background-color; + } +} +// .mblColorDefaultSel +.mblColorDefaultSel-styles () { + background-color: @theme-ui-widget-selected-background-color; + &.mblDomButton { + background-color: @theme-ui-widget-selected-background-color; + } +} + +//---------------------------------------------------------------- +// Heading.less +//---------------------------------------------------------------- +@_heading-inner-margin: (@theme-heading-height - @theme-ui-widget-height) * 0.5; +.mblHeading-styles () { + padding: 0; + height: @theme-heading-height; + background-color: @theme-heading-background-color; + ._background-image-gradient-mask-heading(); + border-bottom: 1px solid @theme-heading-border-color; + color: @theme-heading-color; + font-size: @theme-heading-font-size; + font-family: @theme-heading-font-family; + font-weight: @theme-heading-font-weight; + text-shadow: @theme-heading-text-shadow; + text-align: center; + line-height: @theme-heading-height + 2; +} +.mblArrowButton-styles () { + height: @theme-ui-widget-height; + margin: 0px @theme-default-margin; +} +.mblArrowButtonHead-styles () { + top: @_heading-inner-margin; + left: @_heading-inner-margin + @theme-ui-widget-height * 0.4; // = 0.5 * 0.9 + width: @theme-ui-widget-height * 0.7; + height: @theme-ui-widget-height * 0.7; + border: 1px solid @theme-ui-widget-border-color; + -webkit-transform-origin: left top; + -webkit-transform: scale(0.9,0.99) rotate(45deg); + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget-r; +} +.mblArrowButtonHeadChrome-styles () { + border-style: inset; +} +.mblArrowButtonBody-styles () { + top: @_heading-inner-margin; + left: @_heading-inner-margin + @theme-ui-widget-height * 0.4; + padding: 0px 10px 0px 3px; + height: @theme-ui-widget-height; + border-width: 1px 1px 1px 0px; + border-style: inset; + border-color: @theme-ui-widget-border-color; + font-size: @theme-ui-widget-font-size; + font-family: @theme-ui-widget-font-family; + font-weight: @theme-ui-widget-font-weight; + text-shadow: @theme-ui-widget-text-shadow; + color: @theme-ui-widget-color; + line-height: @theme-ui-widget-height; + -webkit-border-top-right-radius: @theme-ui-widget-border-radius; + -webkit-border-bottom-right-radius: @theme-ui-widget-border-radius; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; +} +.mblArrowButtonSelected-styles () { + background-color: @theme-ui-widget-selected-background-color; +} +.mblArrowButtonHeadSelected-styles () { +} +.mblArrowButtonBodySelected-styles () { +} + +//---------------------------------------------------------------- +// ToolBarButton.less +//---------------------------------------------------------------- +.mblToolBarButton-styles () { + margin: @theme-default-margin; + height: @theme-ui-widget-height; + border: 1px inset @theme-ui-widget-border-color; + -webkit-border-radius: @theme-ui-widget-border-radius; + font-size: @theme-ui-widget-font-size; + font-family: @theme-ui-widget-font-family; + font-weight: @theme-ui-widget-font-weight; + text-shadow: @theme-ui-widget-text-shadow; + color: @theme-ui-widget-color; + line-height: @theme-ui-widget-height; + text-align: center; + &.mblArrowButtonText { + margin: ((@theme-heading-height + 2 - @theme-ui-widget-height) * 0.5) @theme-default-margin; + } +} +.mblToolBarButtonDomButton-styles () { +} +.mblToolBarButtonIcon-styles () { + top: 2px; +} + +//---------------------------------------------------------------- +// RoundRect.less +//---------------------------------------------------------------- +.mblRoundRect-styles () { + margin: @theme-default-margin @theme-default-margin (@theme-default-margin * 1.5); + padding: @theme-default-padding; + border: 1px solid @theme-round-rect-border-color; + -webkit-border-radius: @theme-default-border-radius; + background-color: @theme-round-rect-background-color; + font-size: @theme-list-item-font-size; + font-family: @theme-list-item-font-family; + font-weight: @theme-list-item-font-weight; + text-shadow: @theme-list-item-text-shadow; +} +.mblRoundRectShadowBox-styles () { + -webkit-box-shadow: @theme-round-rect-box-shadow; +} + +//---------------------------------------------------------------- +// EdgeToEdgeCategory.less +//---------------------------------------------------------------- +.mblEdgeToEdgeCategory-styles () { + margin: 0; + padding: 0 @theme-default-padding; + height: @theme-category-height; + border-bottom: 1px solid @theme-default-border-color; + background-color: @theme-highlight-background-color; + ._background-image-gradient-mask-heading(); + font-size: @theme-category-font-size; + font-family: @theme-category-font-family; + font-weight: @theme-category-font-weight; + text-shadow: @theme-category-text-shadow; + color: @theme-category-color; + line-height: @theme-category-height + 2; +} + +//---------------------------------------------------------------- +// RoundRectCategory.less +//---------------------------------------------------------------- +.mblRoundRectCategory-styles () { + margin: 0; + padding: @theme-default-margin @theme-default-margin 0; + font-size: @theme-category-font-size; + font-family: @theme-category-font-family; + font-weight: @theme-category-font-weight; + text-shadow: @theme-category-text-shadow; + color: @theme-category-color; + line-height: @theme-category-height; +} + +//---------------------------------------------------------------- +// RoundRectList.less +//---------------------------------------------------------------- +.mblRoundRectList-styles () { + margin: @theme-default-margin @theme-default-margin (@theme-default-margin * 1.5); + padding: 0; + border: 1px solid @theme-default-border-color; + -webkit-border-radius: @theme-default-border-radius; + background-color: @theme-list-item-background-color; + -webkit-box-shadow: @theme-round-rect-box-shadow; +} +.mblRoundRectList-withCategory-styles () { +} +.mblRoundRectList-FirstListItem-styles () { + -webkit-border-top-left-radius: @theme-default-border-radius; + -webkit-border-top-right-radius: @theme-default-border-radius; +} +.mblRoundRectList-withCategory-FirstListItem-styles () { +} +.mblRoundRectList-LastListItem-styles () { + border-bottom-width: 0px; + -webkit-border-bottom-left-radius: @theme-default-border-radius; + -webkit-border-bottom-right-radius: @theme-default-border-radius; +} + +//---------------------------------------------------------------- +// EdgeToEdgeList.less +//---------------------------------------------------------------- +.mblEdgeToEdgeList-styles () { + margin: 0; + padding: 0; + background-color: @theme-list-item-background-color; +} +.mblEdgeToEdgeList-LastListItem-styles () { + border-bottom-color: @theme-list-item-border-color; +} + +//---------------------------------------------------------------- +// ListItem.less +//---------------------------------------------------------------- +.mblListItem-styles () { + padding: 0 0 0 @theme-default-margin; + height: @theme-list-item-height; + border-bottom: 1px solid @theme-list-item-border-color; + font-size: @theme-list-item-font-size; + font-family: @theme-list-item-font-family; + font-weight: @theme-list-item-font-weight; + text-shadow: @theme-list-item-text-shadow; + color: @theme-list-item-color; + line-height: @theme-list-item-height; +} +.mblListItem-mblVariableHeight-styles () { + padding: 11px 0px 10px 6px; + line-height: normal; +} +.mblListItem-mblListItemAnchor-styles () { + background-position: 9px 7px; + text-decoration: none; + padding-right: 7px; +} +.mblItemSelected-styles () { + background-color: @theme-highlight-background-color; + ._background-image-gradient-mask-ui-widget; +} +.mblItemSelected-mblListItemAnchor-styles () { + color: @theme-highlight-color; +} +.mblItemSelected-mblDomButton-Div-styles () { + border-color: white; +} +.mblItemSelected-mblListItemSubText-styles () { +} +.mblListItemTextBoxSelected-styles () { + background-color: @theme-highlight-background-color; +} +.mblListItemChecked-styles () { + color: @theme-highlight-color; +} +.mblListItemIcon-styles () { + margin-top: (@theme-list-item-height - @appl-list-item-icon-size) * 0.5; + margin-right: 11px; +} +.mblListItemSpriteIcon-styles () { + margin-top: (@theme-list-item-height - @appl-list-item-icon-size) * 0.5; + margin-left: 8px; +} +.mblListItemRightIcon-styles () { + margin-top: (@theme-list-item-height - @appl-list-item-icon-size) * 0.5; +} +.mblListItemRightText-styles () { + color: @theme-default-color; + margin: ((@theme-list-item-height - (@theme-list-item-font-size + 4)) * 0.5) 4px 0 0; +} +.mblListItemTextBox-styles () { +} +.mblListItemAnchorNoIcon-mblListItemTextBox-styles () { +} +.mblListItemSubText-styles () { +} + +//---------------------------------------------------------------- +// Switch.less +//---------------------------------------------------------------- +.mblItemSwitch-styles () { + top: (@theme-list-item-height - @mbl-switch-height + 1) * 0.5; +} +.mblSwitchBg-styles () { + border-color: @theme-ui-widget-border-color; + -webkit-border-radius: @theme-ui-widget-border-radius; + ._background-image-gradient-mask-ui-widget; +} +.mblSwitchBgLeft-styles () { + background-color: @theme-ui-widget-checked-background-color; + color: @theme-ui-widget-color; +} +.mblSwitchBgRight-styles () { + background-color: @theme-ui-widget-disabled-background-color; +} +.mblSwitchKnob-styles () { + border-color: darken(@theme-ui-widget-border-color, 20%); + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; +} + +//---------------------------------------------------------------- +// Button.less +//---------------------------------------------------------------- +.mblButton-styles () { + padding: 0 @theme-default-padding; + height: @theme-ui-widget-height; + border: 1px outset @theme-ui-widget-border-color; + color: @theme-ui-widget-color; + font-size: @theme-ui-widget-font-size; + font-family: @theme-ui-widget-font-family; + font-weight: @theme-ui-widget-font-weight; + line-height: @theme-ui-widget-height; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; +} +.mblButton-mblBlueButton-styles () { + color: @theme-ui-widget-color; + background-color: #0000FF; +} +.mblButton-mblBlueButtonSelected-styles () { + color: @theme-ui-widget-selected-color; + border-color: @theme-ui-widget-selected-border-color; + background-color: darken(#0000FF, 30%); +} +.mblButton-mblRedButton-styles () { + color: @theme-ui-widget-color; + background-color: #FF0000; +} +.mblButton-mblRedButtonSelected-styles () { + color: @theme-ui-widget-selected-color; + border-color: @theme-ui-widget-selected-border-color; + background-color: darken(#FF0000, 30%); +} +.mblButtonSelected-styles () { + color: @theme-ui-widget-selected-color; + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblButtonDisabled-styles () { + color: grey; + border-color: grey; + background-color: @theme-ui-widget-disabled-background-color; +} + +//---------------------------------------------------------------- +// CheckBox.less +//---------------------------------------------------------------- +.mblCheckBox-styles () { + margin: -0.5em 3px 0.3em 4px; + width: 1em; + height: 1em; + font-size: @theme-highlight-font-size; + border: 1px outset @theme-ui-widget-border-color; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; + -webkit-transform: translateY(0.45em); +} +.mblCheckBoxSelected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblCheckBoxChecked-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-checked-background-color; +} +.mblCheckBoxChecked-after-styles () { + content: ""; + width: 0.3em; + height: 0.6em; + position: absolute; + top: 0; + left: 0.3em; + border-color: @theme-ui-widget-selected-color; + border-width: 0.15em; + border-style: none solid solid none; + -webkit-transform: rotate(45deg); + -webkit-transform-origin: 50% 50%; +} +.mblCheckBoxChecked-mblCheckBoxSelected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblCheckBoxChecked-mblCheckBoxSelected-after-styles () { + border-color: @theme-ui-widget-selected-color; +} + +//---------------------------------------------------------------- +// ComboBox.less +//---------------------------------------------------------------- +.dijitPopup-styles () { + -webkit-box-shadow: 0px 0px 50px black; + -webkit-border-radius: @theme-default-border-radius; +} +.mblComboBoxMenu-styles () { + border: 1px solid black; + background-color: @theme-default-background-color; + -webkit-border-radius: @theme-default-border-radius; +} +.mblComboBoxMenuItem-styles () { + text-align: left; + padding: .1em .2em; + color: @theme-default-color; + border-width: 1px 0 1px 0; + border-style: solid; + border-color: @theme-default-background-color; +} +.mblComboBoxMenuItemSelected-styles () { + color: @theme-highlight-color; + background-color: @theme-highlight-background-color; + ._background-image-gradient-mask-ui-widget; +} +.mblComboBoxMenuPreviousButton-styles () { + font-style: italic; + overflow: hidden; +} + +//---------------------------------------------------------------- +// IconContainer.less +//---------------------------------------------------------------- +.mblIconContainer-styles () { + margin: @theme-default-margin 0 @theme-default-margin @theme-default-margin; + padding: @theme-default-padding 0 @theme-default-padding; + background-color: @theme-default-background-color; +} + +//---------------------------------------------------------------- +// IconItem.less +//---------------------------------------------------------------- +.mblIconItemTerminator-styles () { + height: @theme-default-margin; +} +.mblIconItemSub-styles () { + margin-left: -@theme-default-margin; + background-color: white; + color: @theme-default-color; +} +.mblIconArea-styles () { + height: @theme-icon-item-height + @theme-default-font-size + @theme-default-margin; + width: @theme-icon-item-width + @theme-default-margin; + text-align: center; + font-family: @theme-default-font-family; + font-weight: @theme-default-font-weight; + font-size: @theme-default-font-size; +} +.mblContent-styles () { + padding-bottom: @theme-default-margin; +} +.mblIconContentHeading-styles () { + margin-top: 0px; + padding-left: @mbl-dom-button-size + @theme-default-margin; + height: @mbl-dom-button-size - 4; + border-top: 1px solid lighten(@theme-heading-border-color, 30%); + border-bottom: 1px solid @theme-heading-border-color; + background-color: @theme-heading-background-color; + ._background-image-gradient-mask-heading(); + color: @theme-heading-color; + font-size: @theme-default-font-size; + font-family: @theme-heading-font-family; + font-weight: @theme-heading-font-weight; + text-shadow: @theme-heading-text-shadow; + line-height: @mbl-dom-button-size - 3; +} + +//---------------------------------------------------------------- +// RadioButton.less +//---------------------------------------------------------------- +.mblRadioButton-styles () { + margin: -0.5em 3px 0.3em 4px; + width: 1em; + height: 1em; + font-size: @theme-highlight-font-size; + border: 1px outset @theme-ui-widget-border-color; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: 0.5em; + -webkit-transform: translateY(0.45em); +} +.mblRadioButtonChecked-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-checked-background-color; +} +.mblRadioButtonChecked-after-styles () { + content: ""; + width: 0.3em; + height: 0.6em; + top: 0; + left: 0.25em; + border-color: @theme-ui-widget-selected-color; + border-width: 0.15em; + border-style: none solid solid none; + -webkit-transform: rotate(45deg); + -webkit-transform-origin: 50% 50%; +} +.mblRadioButtonChecked-Selected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblRadioButtonChecked-Selected-after-styles () { + border-color: @theme-ui-widget-selected-color; +} + +//---------------------------------------------------------------- +// Slider.less +//---------------------------------------------------------------- +.mblSlider-styles () { + margin: 15px; /* 1/2 handle width for hanging off the ends of the bar */ + border: 1px outset @theme-ui-widget-border-color; + background-color: @theme-ui-widget-disabled-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; +} +.mblSliderProgressBar-styles () { + -webkit-border-radius: @theme-ui-widget-border-radius; + background-color: @theme-ui-widget-selected-background-color; + ._background-image-gradient-mask-ui-widget; +} +.mblSliderHandle-styles () { + margin: -10px 0 0 -10px; + width: 18px; + height: 18px; + border: 1px outset @theme-ui-widget-border-color; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; +} + +//---------------------------------------------------------------- +// TabBar.less +//---------------------------------------------------------------- +.mblTabBar-styles () { + margin: 0; + padding: 0; + height: @theme-tabbar-height; + background-color: @theme-heading-background-color; + ._background-image-gradient-mask-ui-widget; + border-bottom: 1px solid @theme-heading-border-color; + color: @theme-heading-color; + text-align: center; +} +.mblTabBar-TabBarButton-styles () { + padding: ((@theme-tabbar-height - @mbl-dom-button-size - @theme-tabbar-font-size) * 0.5) 0; +} +.mblTabBar-TabBarButton-Selected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-ui-widget-border-radius; +} +.mblTabBarButtonDiv-styles () { + height: @mbl-dom-button-size; + width: @mbl-dom-button-size; +} +.mblTabBarButtonIcon-styles () { + left: 0; + top: 0; +} +.mblTabBarButtonTextBox-styles () { + color: @theme-tabbar-color; + font-family: @theme-tabbar-font-family; + font-size: @theme-tabbar-font-size; + font-weight: @theme-tabbar-font-weight; +} +.mblTabBarNoIcons-TabBarButtonTextBox-styles () { + line-height: @theme-tabbar-height - @theme-tabbar-font-size; + font-size: @theme-tabbar-font-size + 6; +} +.mblTabButton-styles () { + width: @theme-ui-widget-width; + height: @theme-ui-widget-height; + border-width: 1px 1px 1px 0px; + border-style: inset; + border-color: @theme-default-border-color; + border-right-color: @theme-ui-widget-border-color; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + font-family: @theme-default-font-family; + font-size: @theme-default-font-size; + font-weight: @theme-default-font-weight; + color: @theme-default-color; + text-align: center; + line-height: @theme-ui-widget-height; +} +.mblTabButton-TabBarButtonAnchor-styles () { + height: @theme-ui-widget-height; +} +.mblTabBarTop-TabButton-TabBarButtonDiv-styles () { + display: none; +} +.mblTabBarHead-TabButton-TabBarButtonDiv-styles () { +} +.mblTabButton-FirstTabButtom-styles () { + -webkit-border-top-left-radius: @theme-ui-widget-border-radius; + -webkit-border-bottom-left-radius: @theme-ui-widget-border-radius; + border-left-width: 1px; +} +.mblTabButton-LastTabButton-styles () { + -webkit-border-top-right-radius: @theme-ui-widget-border-radius; + -webkit-border-bottom-right-radius: @theme-ui-widget-border-radius; + border-right-color: @theme-ui-widget-border-color; +} +.mblTabButton-img-styles () { +} +.mblTabBarButtonTextBoxSelected-styles () { + color: @theme-ui-widget-selected-color; +} +.mblTabButtonSelected-styles () { + background-color: @theme-ui-widget-selected-background-color; +} +.mblTabButtonHighlighted-styles () { + background-color: @theme-ui-widget-checked-background-color; +} +.mblTabButtonImgDiv-styles () { + display: none; +} +.mblTabPanelHeader-styles () { + margin: 0; + padding: 0; + height: @theme-heading-height; + background-color: @theme-heading-background-color; + ._background-image-gradient-mask-heading(); + border-bottom: 1px solid @theme-heading-border-color; + color: @theme-heading-color; + font-size: @theme-heading-font-size; + font-family: @theme-heading-font-family; + font-weight: @theme-heading-font-weight; + text-shadow: @theme-heading-text-shadow; + text-align: center; + line-height: @theme-heading-height + 2; +} +.mblTabPanelHeader-TabButton-styles () { + margin-top: (@theme-heading-height - @theme-ui-widget-height - 2) * 0.5; +} +.mblTabPanelHeader-TabButtonSelected-styles () { + background-color: @theme-ui-widget-selected-background-color; +} +.mblTabPanelHeader-TabButtonDomButton-styles () { + width: 43px; +} +.mblTabPanelHeader-TabButtonDomButtonClass-styles () { + left: 8px; +} +.mblTabPanelHeader-DomButton-styles () { +} +.mblTabPanelHeader-inHeading-styles () { +} +.mblTabPanelHeader-TabButton-inHeading-styles () { + margin-top: (@theme-heading-height - @theme-ui-widget-height) * 0.5; +} +.mblTabPanelHeader-TabButton-FirstTabButtom-inHeading-styles () { + -webkit-border-top-left-radius: @theme-ui-widget-border-radius; + -webkit-border-bottom-left-radius: @theme-ui-widget-border-radius; + border-left-width: 1px; +} +.mblTabPanelHeader-TabButton-LastTabButtom-inHeading-styles () { + -webkit-border-top-right-radius: @theme-ui-widget-border-radius; + -webkit-border-bottom-right-radius: @theme-ui-widget-border-radius; +} +.mblTabPanelHeader-TabButtonSelected-inHeading-styles () { +} + +//---------------------------------------------------------------- +// TextArea.less +//---------------------------------------------------------------- +.mblTextArea-styles () { + padding: 4px 1px; + border: @theme-default-border-color 1px inset; + font-family: @theme-default-font-family; + font-size: @theme-default-font-size; + -webkit-border-radius: @theme-default-border-radius; +} +.mblExpandingTextArea-styles () { + margin: 2px; +} + +//---------------------------------------------------------------- +// TextBox.less +//---------------------------------------------------------------- +.mblTextBox-styles () { + height: @theme-ui-widget-height; + border: @theme-default-border-color 1px inset; + font-family: @theme-default-font-family; + font-size: @theme-default-font-size; + -webkit-border-radius: @theme-default-border-radius; +} + +//---------------------------------------------------------------- +// ToggleButton.less +//---------------------------------------------------------------- +.mblToggleButton-styles () { + padding: 0 @theme-default-padding 0 (@theme-default-padding + 15px); + height: @theme-ui-widget-height; + border: 1px outset @theme-ui-widget-border-color; + -webkit-border-radius: @theme-ui-widget-border-radius; + background-color: @theme-ui-widget-background-color; + ._background-image-gradient-mask-ui-widget; + font-family: @theme-ui-widget-font-family; + font-weight: @theme-ui-widget-font-weight; + line-height: @theme-ui-widget-height; + color: @theme-ui-widget-color; + line-height: @theme-ui-widget-height; +} +.mblToggleButtonSelected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblToggleButtonChecked-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-checked-background-color; +} +.mblToggleButtonChecked-after-styles () { + content: ""; + top: (@theme-ui-widget-height - 15) * 0.5; + left: 7px; + width: 5px; + height: 10px; + border-color: @theme-ui-widget-selected-color; + border-width: 0.15em; + border-style: none solid solid none; + -webkit-transform: rotate(45deg) skew(10deg); + -webkit-transform-origin: 50% 50%; +} +.mblToggleButtonCheckedSelected-styles () { + border-color: @theme-ui-widget-selected-border-color; + background-color: @theme-ui-widget-selected-background-color; +} +.mblToggleButtonCheckedSelected-after-styles () { + border-color: @theme-ui-widget-selected-color; +} +.mblToggleButtonDisabled-styles () { + color: grey; + border-color: grey; + background-color: @theme-ui-widget-disabled-background-color; +} + +// Overlay.less +.mblOverlay-styles () { + background-color: @theme-default-background-color; + ._background-image-gradient-mask-ui-widget; +} + +// Tooltip.less +.mblTooltip-styles () { + padding: @theme-default-padding; + border: @theme-heading-border-color 1px solid; + background-color: @theme-heading-background-color; + ._background-image-gradient-mask-ui-widget; + -webkit-border-radius: @theme-default-border-radius; + opacity: .97; +} +.mblTooltipBubble-styles () { + background-color: @theme-heading-background-color; + background-image: none; +} +.mblTooltipInnerArrow-Bubble-Above-styles () { + border-bottom-color: @theme-heading-background-color; +} +.mblTooltipInnerArrow-Bubble-Below-styles () { + border-top-color: @theme-heading-background-color; +} +.mblTooltipInnerArrow-Bubble-After-styles () { + border-left-color: @theme-heading-background-color; +} +.mblTooltipInnerArrow-Bubble-Before-styles () { + border-right-color: @theme-heading-background-color; +} +.mblTooltipArrow-styles () { + border: 11px solid transparent; +} +.mblTooltipArrow-Before-styles () { + border-left-width: 0; + border-right-color: @theme-heading-border-color; +} +.mblTooltipArrow-After-styles () { + border-right-width: 0; + border-left-color: @theme-heading-border-color; +} +.mblTooltipArrow-Above-styles () { + border-top-width: 0; + border-bottom-color: @theme-heading-border-color; +} +.mblTooltipArrow-Below-styles () { + border-bottom-width: 0; + border-top-color: @theme-heading-border-color; +} +.mblTooltipInnerArrow-Before-styles () { + border-left-width: 0; + border-right-color: @theme-heading-background-color * 0.2 + #ffffff * 0.8; +} +.mblTooltipInnerArrow-After-styles () { + border-right-width: 0; + border-left-color: @theme-heading-background-color * 0.2 + #ffffff * 0.8; +} +.mblTooltipInnerArrow-Above-styles () { + border-top-width: 0; + border-bottom-color: @theme-heading-background-color * 0.0 + #ffffff * 1.0; +} +.mblTooltipInnerArrow-Below-styles () { + border-bottom-width: 0; + border-top-color: @theme-heading-background-color * 0.5 + #ffffff * 0.5; +} +.mblTooltip-Heading-styles () { + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + background-color: transparent; + background-image: none; +} +.mblTooltip-Heading-ToolbarButton-styles () { +} |