0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add overlay form element CSS

Browse source
This commit is contained in:
rolux 2014-01-05 15:29:45 +05:30
parent ace14c7fca
commit 84e9b96562
1 changed files with 104 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
source/Ox.UI/css/theme.css
View file

@ -424,6 +424,7 @@ Forms
background-image: linear-gradient(top, $buttonDisabledGradient);
color: $buttonDisabledColor;
}
.$themeClass .OxButton.OxSymbol,
.$themeClass .OxButton.OxSymbol:active,
.$themeClass .OxButton.OxSymbol.OxDisabled,
@ -453,12 +454,68 @@ Forms
.$themeClass .OxSelect.OxSelected.OxColor > .OxButton.OxSelected {
background: transparent;
}
.$themeClass .OxButton.OxTab.OxSelected {
border-bottom: 1px solid $buttonSelectedGradient[1];
}
.$themeClass .OxButton.OxOverlay {
border-color: $formelementOverlayBorder;
background-image: -moz-linear-gradient(top, $buttonOverlayGradient);
background-image: -ms-linear-gradient(top, $buttonOverlayGradient);
background-image: -o-linear-gradient(top, $buttonOverlayGradient);
background-image: -webkit-linear-gradient(top, $buttonOverlayGradient);
background-image: linear-gradient(top, $buttonOverlayGradient);
color: $formelementOverlayColor;
-moz-box-shadow: 0 0 2px $formelementOverlayShadow;
-ms-box-shadow: 0 0 2px $formelementOverlayShadow;
-o-box-shadow: 0 0 2px $formelementOverlayShadow;
-webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
box-shadow: 0 0 2px $formelementOverlayShadow;
}
.$themeClass .OxButton.OxOverlay:active {
border-color: $formelementOverlayBorder;
background-image: -moz-linear-gradient(top, $buttonOverlayActiveGradient);
background-image: -ms-linear-gradient(top, $buttonOverlayActiveGradient);
background-image: -o-linear-gradient(top, $buttonOverlayActiveGradient);
background-image: -webkit-linear-gradient(top, $buttonOverlayActiveGradient);
background-image: linear-gradient(top, $buttonOverlayActiveGradient);
color: $buttonOverlayActiveColor;
}
.$themeClass .OxButton.OxOverlay.OxDisabled {
background-image: -moz-linear-gradient(top, $buttonOverlayDisabledGradient);
background-image: -ms-linear-gradient(top, $buttonOverlayDisabledGradient);
background-image: -o-linear-gradient(top, $buttonOverlayDisabledGradient);
background-image: -webkit-linear-gradient(top, $buttonOverlayDisabledGradient);
background-image: linear-gradient(top, $buttonOverlayDisabledGradient);
color: $buttonOverlayDisabledColor;
}
.$themeClass .OxButton.OxOverlay.OxSelected {
background-image: -moz-linear-gradient(top, $buttonOverlaySelectedGradient);
background-image: -ms-linear-gradient(top, $buttonOverlaySelectedGradient);
background-image: -o-linear-gradient(top, $buttonOverlaySelectedGradient);
background-image: -webkit-linear-gradient(top, $buttonOverlaySelectedGradient);
background-image: linear-gradient(top, $buttonOverlaySelectedGradient);
color: $buttonOverlaySelectedColor;
}
.$themeClass .OxButtonGroup.OxOverlay {
height: 16px;
border-radius: 8px;
-moz-box-shadow: 0 0 2px $formelementOverlayShadow;
-ms-box-shadow: 0 0 2px $formelementOverlayShadow;
-o-box-shadow: 0 0 2px $formelementOverlayShadow;
-webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
box-shadow: 0 0 2px $formelementOverlayShadow;
}
.$themeClass .OxButtonGroup.OxOverlay .OxButton {
-moz-box-shadow: 0 0 0 transparent;
-ms-box-shadow: 0 0 0 transparent;
-0-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
.$themeClass .OxFileInput.OxDisabled > .OxBar {
background-image: -moz-linear-gradient(top, $buttonDisabledGradient);
background-image: -ms-linear-gradient(top, $buttonDisabledGradient);
@ -474,14 +531,6 @@ Forms
color: $inputErrorColor;
}
.$themeClass .OxLabel.OxDisabled {
color: $labelDisabledColor;
}
.$themeClass .OxDocPage .OxLabel.OxSquare,
.$themeClass .OxExamplePage .OxLabel.OxSquare {
background-color: $documentLabelBackground;
}
.$themeClass input.OxCheckbox,
.$themeClass input.OxInput,
.$themeClass textarea,
@ -524,6 +573,19 @@ Forms
.$themeClass .OxLabel {
background-color: $labelBackground;
}
.$themeClass .OxLabel.OxDisabled {
color: $labelDisabledColor;
}
.$themeClass .OxLabel.OxOverlay {
background-color: $labelOverlayBackground;
}
.$themeClass .OxLabel.OxOverlay.OxDisabled {
color: $labelOverlayDisabledColor;
}
.$themeClass .OxDocPage .OxLabel.OxSquare,
.$themeClass .OxExamplePage .OxLabel.OxSquare {
background-color: $documentLabelBackground;
}
.$themeClass input.OxCheckbox.OxDisabled,
.$themeClass input.OxInput:disabled {
@ -581,6 +643,38 @@ Forms
color: $inputPlaceholderColor;
}
/*
================================================================================
ImageViewer
================================================================================
*/
.$themeClass .OxImageViewer .OxImageOverview {
border-color: $formelementOverlayBorder;
-moz-box-shadow: 0 0 2px $formelementOverlayShadow;
-ms-box-shadow: 0 0 2px $formelementOverlayShadow;
-o-box-shadow: 0 0 2px $formelementOverlayShadow;
-webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
box-shadow: 0 0 2px $formelementOverlayShadow;
}
.$themeClass .OxImageViewer .OxImageOverlayArea {
background-image: -moz-linear-gradient(top, $buttonOverlayGradient);
background-image: -ms-linear-gradient(top, $buttonOverlayGradient);
background-image: -o-linear-gradient(top, $buttonOverlayGradient);
background-image: -webkit-linear-gradient(top, $buttonOverlayGradient);
background-image: linear-gradient(top, $buttonOverlayGradient);
}
.$themeClass .OxImageViewer #OxImageOverlayCenter {
border-color: $formelementOverlayBorder;
background: transparent;
background-image: none;
-moz-box-shadow: 0 0 2px $formelementOverlayShadow;
-ms-box-shadow: 0 0 2px $formelementOverlayShadow;
-o-box-shadow: 0 0 2px $formelementOverlayShadow;
-webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
box-shadow: 0 0 2px $formelementOverlayShadow;
}
/*
================================================================================
Lists