Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FLUID-4331: Splitting frame and non-frame css for FatPanel
- Loading branch information
Showing
4 changed files
with
224 additions
and
239 deletions.
There are no files selected for viewing
19 changes: 0 additions & 19 deletions
19
src/webapp/components/uiOptions/css/FatPanelSlidingPanel.css
This file was deleted.
Oops, something went wrong.
236 changes: 17 additions & 219 deletions
236
src/webapp/components/uiOptions/css/FatPanelUIOptions.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,225 +1,23 @@ | ||
| /* UI Options Fat Panel styles */ | ||
|
|
||
| .fl-uiOptions-fatPanel-iframe { | ||
| border: 0; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel { | ||
| min-width: 960px; | ||
| background-color: #fff; | ||
| } | ||
|
|
||
| /* Panel bar */ | ||
| /* Top bar and show/hide button */ | ||
| .fl-uiOptions-fatPanel .fl-panelBar { | ||
| width: 100%; | ||
| height: 5px; | ||
| border-bottom: 1px solid #ccc; | ||
| width: 100%; | ||
| height: 5px; | ||
| background-color: #fff; | ||
| border-bottom: 1px solid #ccc; | ||
| } | ||
|
|
||
| /* Show/hide panel toggle button */ | ||
| .fl-uiOptions-fatPanel .fl-toggleButton { | ||
| float:right; | ||
| text-transform: uppercase; | ||
| font-weight: bold; | ||
| border: 0px; | ||
| background-color: white; | ||
| padding: 5px; | ||
| margin-right: 10px; | ||
| border-radius: 8px; | ||
| border-bottom: 1px solid #ccc; | ||
| } | ||
|
|
||
| /* Reset link */ | ||
| .fl-uiOptions-fatPanel #reset { | ||
| background-color: #333333; | ||
| color: #fff; | ||
| text-transform: uppercase; | ||
| font-weight: bold; | ||
| display: block; | ||
| padding: 0.75em 1.5em 0.7em 3em; | ||
| } | ||
|
|
||
| /* Tabs */ | ||
| .fl-uiOptions-fatPanel ul.fl-tabs { | ||
| background-color: #333333; | ||
| color: #fff; | ||
| margin-top: 0px; | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel .fl-tabs li a { | ||
| background-color: #333333; | ||
| color: #fff; | ||
| text-transform: uppercase; | ||
| font-weight: bold; | ||
| border: 0px; | ||
| } | ||
| .fl-uiOptions-fatPanel ul.fl-tabs li:first-child a { | ||
| margin-left: -10px; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel .fl-tabs .ui-tabs-selected a { | ||
| background-color: #fff; | ||
| color: #000; | ||
| } | ||
|
|
||
| /* jQuery UI Tabs styles */ | ||
| .fl-uiOptions-fatPanel.ui-tabs { position: relative; zoom: 1; padding:0px; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-hide { display: none !important; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-nav { padding: 0px; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-nav li { top: 0px; margin: 0px; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-nav li a { float: left; padding: 1em 1.5em 1em 3em; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-state-default { border: none; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-helper-reset { line-height: 1em; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0px; } | ||
| .fl-uiOptions-fatPanel .ui-corner-top { -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; } | ||
| .fl-uiOptions-fatPanel .ui-corner-all { -moz-border-radius: 0px; } | ||
| .fl-uiOptions-fatPanel.ui-widget { font-family: "Myriad Pro",Helvetica,Arial,sans-serif; font-size: 1em; } /* fix a jquery theme bugs where font-size was set to 1.1em or 1.2em. */ | ||
| .fl-uiOptions-fatPanel.ui-widget-content { border: none; } | ||
| .fl-uiOptions-fatPanel.ui-tabs .ui-widget-header { background: none; border: 0px; background-color: #333333; } | ||
|
|
||
| /* Tab images */ | ||
| .fl-uiOptions-fatPanel .fl-tab-text, .fl-uiOptions-fatPanel .fl-tab-layout, .fl-uiOptions-fatPanel .fl-tab-links, .fl-uiOptions-fatPanel #reset { | ||
| background-repeat: no-repeat; | ||
| background-position: 1.1em 0.6em; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel .fl-tab-text { background-image: url('../images/default/uio_icon_textanddisplay_defaultInverted_16x16.png'); } | ||
| .fl-uiOptions-fatPanel .fl-tab-layout { background-image: url('../images/default/uio_icon_layoutandnavigation_defaultInverted_16x16.png'); } | ||
| .fl-uiOptions-fatPanel .fl-tab-links { background-image: url('../images/default/uio_icon_linksandbuttons_defaultInverted_16x16.png'); } | ||
| .fl-uiOptions-fatPanel #reset { background-image: url('../images/default/uio_icon_reset_defaultInverted_16x16.png'); } | ||
| .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-text { background-image: url('../images/default/uio_icon_textanddisplay_default_16x16.png'); } | ||
| .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-layout { background-image: url('../images/default/uio_icon_layoutandnavigation_default_16x16.png'); } | ||
| .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-links { background-image: url('../images/default/uio_icon_linksandbuttons_default_16x16.png'); } | ||
|
|
||
| /* Tab Pane */ | ||
| ul.fl-pane li { | ||
| float:left; | ||
| padding-left: 10px; | ||
| margin-right: 30px; | ||
| float:right; | ||
| text-transform: uppercase; | ||
| font-weight: bold; | ||
| border: 0px; | ||
| background-color: white; | ||
| padding: 5px; | ||
| margin-right: 10px; | ||
| border-radius: 8px; | ||
| border-bottom: 1px solid #ccc; | ||
| } | ||
|
|
||
| /* Controls */ | ||
| .fl-uiOptions-fatPanel .fl-uiOptions-text li { | ||
| float: left; | ||
| } | ||
| .fl-uiOptions-fatPanel .fl-uiOptions-layout li, .fl-uiOptions-fatPanel .fl-uiOptions-links li { | ||
| clear: both; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel .fl-uiOptions label { | ||
| text-transform: uppercase; | ||
| padding-bottom: 15px; | ||
| width: 200px; | ||
| } | ||
|
|
||
| .fl-uiOptions-fatPanel .fl-inputs { | ||
| clear:both; | ||
| } | ||
|
|
||
| /* Sliders */ | ||
| .fl-uiOptions .fl-slider-horz { | ||
| width: 100px; | ||
| } | ||
|
|
||
| .fl-uiOptions .fl-slider-input { | ||
| clear: both; | ||
| float:left; | ||
| margin-top: 1em; | ||
| } | ||
|
|
||
| /* Theming */ | ||
| /* Override theme tab rounding */ | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-corner-all, | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-corner-all, | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-corner-all, | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-corner-all { -moz-border-radius: 0px; border: 0px; } | ||
|
|
||
| /* Tab images - black on white */ | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-tab-text { background-image: url('../images/hc/uio_icon_textanddisplay_hcInverted_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-tab-layout { background-image: url('../images/hc/uio_icon_layoutandnavigation_hcInverted_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-tab-links { background-image: url('../images/hc/uio_icon_linksandbuttons_hcInverted_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel #reset { background-image: url('../images/hc/uio_icon_reset_hcInverted_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-text, | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-text { background-image: url('../images/hc/uio_icon_textanddisplay_hc_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-layout, | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-layout { background-image: url('../images/hc/uio_icon_layoutandnavigation_hc_16x16.png'); } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-links, | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-links { background-image: url('../images/hc/uio_icon_linksandbuttons_hc_16x16.png'); } | ||
|
|
||
| /* Tab images - white on black */ | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-tab-text { background-image: url('../images/hci/uio_icon_textanddisplay_hciInverted_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-tab-layout { background-image: url('../images/hci/uio_icon_layoutandnavigation_hciInverted_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-tab-links { background-image: url('../images/hci/uio_icon_linksandbuttons_hciInverted_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel #reset { background-image: url('../images/hci/uio_icon_reset_hciInverted_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-text, | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-text { background-image: url('../images/hci/uio_icon_textanddisplay_hci_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-layout, | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-layout { background-image: url('../images/hci/uio_icon_layoutandnavigation_hci_16x16.png'); } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-links, | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-links { background-image: url('../images/hci/uio_icon_linksandbuttons_hci_16x16.png'); } | ||
|
|
||
| /* Tab images - black on yellow */ | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-tab-text { background-image: url('../images/blackYellow/uio_icon_textanddisplay_blackYellowInverted_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-tab-layout { background-image: url('../images/blackYellow/uio_icon_layoutandnavigation_blackYellowInverted_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-tab-links { background-image: url('../images/blackYellow/uio_icon_linksandbuttons_blackYellowInverted_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel #reset { background-image: url('../images/blackYellow/uio_icon_reset_blackYellowInverted_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-text, | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-text { background-image: url('../images/blackYellow/uio_icon_textanddisplay_blackYellow_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-layout, | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-layout { background-image: url('../images/blackYellow/uio_icon_layoutandnavigation_blackYellow_16x16.png'); } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-links, | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-links { background-image: url('../images/blackYellow/uio_icon_linksandbuttons_blackYellow_16x16.png'); } | ||
|
|
||
| /* Tab images - yellow on black */ | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-tab-text { background-image: url('../images/yellowBlack/uio_icon_textanddisplay_yellowBlackInverted_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-tab-layout { background-image: url('../images/yellowBlack/uio_icon_layoutandnavigation_yellowBlackInverted_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-tab-links { background-image: url('../images/yellowBlack/uio_icon_linksandbuttons_yellowBlackInverted_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel #reset { background-image: url('../images/yellowBlack/uio_icon_reset_yellowBlackInverted_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-text, | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-text { background-image: url('../images/yellowBlack/uio_icon_textanddisplay_yellowBlack_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-layout, | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-layout { background-image: url('../images/yellowBlack/uio_icon_layoutandnavigation_yellowBlack_16x16.png'); } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-tabs-selected .fl-tab-links, | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-state-hover .fl-tab-links { background-image: url('../images/yellowBlack/uio_icon_linksandbuttons_yellowBlack_16x16.png'); } | ||
|
|
||
| /* Adjust colours for specific themes */ | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-widget-header { background: 0;} | ||
| .fl-theme-hc .fl-uiOptions-fatPanel ul.fl-tabs { background-color: #000; } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-tabs a { background-color: #000; color: #fff;} | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-tabs .ui-tabs-selected a { background-color: #fff; color: #000; } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .ui-widget-header .ui-state-active { background: none no-repeat scroll 0% 0% #fff; } /* Override a background image that was making the tab larger than necessary. */ | ||
| .fl-theme-hc .fl-uiOptions-fatPanel #reset { background-color: #000; } | ||
| .fl-theme-hc .fl-uiOptions-fatPanel .fl-toggleButton { background-color: #fff; border-color: #000; } | ||
|
|
||
| .fl-theme-hci .fl-uiOptions-fatPanel .ui-widget-header { background: 0;} | ||
| .fl-theme-hci .fl-uiOptions-fatPanel ul.fl-tabs { background-color: #fff; } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-tabs a { background-color: #fff; color: #000; } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-tabs .ui-tabs-selected a { background-color: #000; color: #fff; } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel #reset { background-color: #fff; color: #000; } | ||
| .fl-theme-hci .fl-uiOptions-fatPanel .fl-toggleButton { background-color: #000; border-color: #fff; color: #fff; } | ||
|
|
||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-widget-header { background: 0;} | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel ul.fl-tabs { background-color: #000; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-tabs a { background-color: #000; color: #ffff00; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-tabs .ui-tabs-selected a { background-color: #ffff00; color: #000; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-widget-header .ui-state-default {background: none no-repeat scroll 0% 0% #000; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-tabs .fl-tabs li {background-color: #000; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .ui-widget-content { background:0; color: #000;} | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-uiOptions .fl-slider .fl-handle, .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-uiOptions .fl-slider a { border: 1px solid #000;} | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-slider {background-color: #000;} | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel #reset { background-color: #000; color: #ffff00; } | ||
| .fl-theme-blackYellow .fl-uiOptions-fatPanel .fl-toggleButton { background-color: #FFFF00; border-color: #000; } | ||
|
|
||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-widget-header { background: 0;} | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel ul.fl-tabs { background-color: #ffff00; } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-tabs a { background-color: #ffff00; color: #000; } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-tabs .ui-tabs-selected a { background-color: #000; color: #ffff00 } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-widget-header .ui-state-default {background: none no-repeat scroll 0% 0% #ffff00; } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-tabs .fl-tabs li {background-color: #ffff00; } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .ui-widget-content { background:0; color: #ffff00;} | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-uiOptions .fl-slider .fl-handle, .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-uiOptions .fl-slider a { border: 1px solid #ffff00;} | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-slider {background-color: #ffff00;} | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel #reset { background-color: #ffff00; color: #000; } | ||
| .fl-theme-yellowBlack .fl-uiOptions-fatPanel .fl-toggleButton { background-color: #000; border-color: #ffff00; color: #ffff00 } | ||
| .fl-uiOptions-fatPanel-iframe { | ||
| border: 0; | ||
| } |
Oops, something went wrong.