io.guise.framework.assets.themes.root.root.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of guise-framework Show documentation
Show all versions of guise-framework Show documentation
Guise™ Internet application framework.
/*Root Guise Stylesheet Copyright © 2005-2008 GlobalMentor, Inc.
@author Garret Wilson
Styles:
Component classes
.*-label The label part of a general component.
.*-body The main part of a general component.
.*-child A single child of a general component.
.*-children The list of children of a general component.
.*-error The error part of a general component.
.*-message Any message associated with a component.
.*-tabs The tabs section of a tabbed panel.
.*-tab A single tab of a tabbed panel.
Frames
.frameModal The frame is modal.
Flyover Frames
.*-tether The tether of a flyover frame.
Images
.*-caption The caption of the image, containing a label and/or a message.
Menus
TODO del: .*-open Indicates that the menu is open.
Sliders
.*-track The track of the slider
.*-thumb The thumb on the track of the slider.
.*-intervals The element the interval labels.
.*-interval A single interval label.
Tree nodes
.treeNode-* An element of a tree node.
.treeNode-collapsed A class indicating that a tree node is collapsed.
.treeNode-expanded A class indicating that a tree node is expanded.
.treeNode-leaf A class indicating that a tree node is a leaf node and is neither expanded nor collapsed.
Component attributes: Styles indicate an attribute or a state of a component.
axisX A component (such as a menu or slider) that flows on the X axis.
axisY A component (such as a menu or slider) that flows on the Y axis.
bearN, bearNbE, etc. The bearing of a component or a subcomponent, such as the direction of a tether of a flyover frame.
dirLTR A component (such as a menu or slider) with left-to-right line direction.
dirRTL A component (such as a menu or slider) with right-to-left line direction.
disabled A component or subcomponent (such as a tab) is disabled.
invalid A component or subcomponent has invalid data or state.
open A component (such as a menu) is open.
rollover A component or subcomponent (such as a tab) is undergoing mouse rollover.
selected A component or subcomponent (such as a tab) is selected.
Layout classes
.layout-flow-x Any enclosing element needed for a horizontal flow layout.
.layout-flow-x-child Children in a horizontal flow layout.
.layout-flow-y Any enclosing element needed for a vertical flow layout.
.layout-flow-y-child Children in a horizontal flow layout.
.layout-region Any enclosing element needed for region layout.
.layout-region-bottom An enclosing element for the bottom region layout.
.layout-region-center An enclosing element for the center region layout.
.layout-region-left An enclosing element for the left region layout.
.layout-region-right An enclosing element for the right region layout.
.layout-region-top An enclosing element for the top region layout.
Drag and Drop classes
.dragable TODO fix
.dragHandle The element of a dragable component that acts as a handle for dragging.
.dragSource The element represents a drag source in a drag-and-drop operation.
.dropTarget The element represents a drop target in a drag-and-drop operation.
*/
/*global presets to meet Guise theme default expectations*/
/*remove borders, padding, and margins, including link components*/
a.component,
caption.component,
div.component,
h1.component, h2.component, h3.component, h4.component, h5.component, h6.component,
img.component,
label.component,
table.component,
td.component,
th.component,
span.component,
a.component caption,
a.component div,
a.component h1, a.component h2, a.component h3, a.component h4, a.component h5, a.component h6,
a.component img,
a.component label,
a.component table,
a.component td,
a.component th,
a.component span
{
border: 0;
border-style: none;
margin: 0;
padding: 0;
}
/*remove borders, padding, and margins for all tables TODO later explicitly do this just for layout tables*/
table,
tbody,
td,
th,
tr
{
border: 0;
border-style: none;
margin: 0;
padding: 0;
}
table
{
border-spacing: 0;
}
/*initialize default fonts and colors, including link components*/
a.component,
caption.component,
div.component,
img.component,
label.component,
table.component,
th.component,
td.component,
span.component,
a.component caption,
a.component div,
a.component img,
a.component label,
a.component table,
a.component span
{
font-style: normal;
font-weight: normal;
}
a.component
{
color: black;
}
a.component:link
{
text-decoration: none;
}
a.component:visited
{
text-decoration: none;
}
a.component:hover
{
text-decoration: none;
}
a.component:active
{
text-decoration: none;
}
body
{
color: black;
cursor: default;
}
button.component
{
padding: 0;
}
/*Mozilla fixes*/
label
{
cursor: inherit; /*by default inherit the cursor on labels for Mozilla, which does not do this automatically*/
}
/*IE fixes*/
/*add layout to labels and links for both IE6 and IE7 to allow opacity to work, for example*/
label.component, a.component
{
zoom: 1;
}
/*Guise style classes*/
a:focus
{
outline: none; /*don't show a dotted line around focused links (and images in clicked links); Guise currently uses hidefocus attribute for equivalent effect in IE*/
}
a img
{
border-style: none;
}
/*modal layer*/
.modalLayer
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: .33;
filter: alpha(opacity=33); /*allow opacity to work in IE*/
background-color: transparent; /*TODO why do we have two background colors?*/
background-color: #999999;
display: none;
}
/*components*/
/**flyover frames*/
.flyoverFrame-tether.bearNEbN
{
position: absolute;
right: 0;
bottom: 100%;
}
.flyoverFrame-tether.bearNEbE
{
position: absolute;
left: 100%;
top: 0;
}
.flyoverFrame-tether.bearSEbE
{
position: absolute;
left: 100%;
bottom: 0;
}
.flyoverFrame-tether.bearSEbS
{
position: absolute;
right: 0;
top: 100%;
}
.flyoverFrame-tether.bearSWbS
{
position: absolute;
left: 0;
top: 100%;
}
.flyoverFrame-tether.bearSWbW
{
position: absolute;
right: 100%;
bottom: 0;
}
.flyoverFrame-tether.bearNWbW
{
position: absolute;
right: 100%;
top: 0;
}
.flyoverFrame-tether.bearNWbN
{
position: absolute;
left: 0;
bottom: 100%;
}
/*busy component*/
/*TODO replace with theme*/
.busyPanel .layout-region
{
width: 100%;
height: 100%;
}
/*TODO replace with theme*/
.busyPanel .layout-region-center
{
text-align: center;
vertical-align: middle;
}
/*tab controls, tabbed panels, and card controls*/
/*TODO add support for ol.tabControl-y-(ltr|rtl)*/
ol.tabbedPanel-tabs
{
border-bottom: 2px solid #999999;
}
ol.tabbedPanel-tabs,
ol.tabContainerControl-body.axisX,
ol.tabControl-body.axisX
{
margin: 1em 0em 0em 0em;
padding: 0px;
z-index: 1;
}
li.tabbedPanel-tab,
li.tabContainerControl-tab.axisX,
li.tabControl-tab.axisX
{
display: inline;
overflow: hidden;
list-style-type: none;
}
a.tabbedPanel-tab,
a.tabContainerControl-tab.axisX,
a.tabControl-tab.axisX
{
color: black;
font-weight: bold;
font-family: Arial, sans-serif;
border-style: outset;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none;
}
a.tabbedPanel-tab,
a.tabContainerControl-tab.axisX,
a.tabControl-tab.axisX
{
background-color: #999999;
border-bottom: none;
}
a.tabbedPanel-tab.disabled,
a.tabContainerControl-tab.axisX.disabled,
a.tabControl-tab.axisX.disabled
{
background-color: #999999;
color: #CCCCCC;
border-bottom: 0;
}
a.tabbedPanel-tab.selected,
a.tabContainerControl-tab.axisX.selected,
a.tabControl-tab.axisX.selected
{
background-color: #CCCCCC;
border-bottom: 3px solid #CCCCCC;
}
a.tabbedPanel-tab:visited,
a.tabContainerControl-tab.axisX:visited,
a.tabControl-tab.axisX:visited
{
color: black;
}
a.tabbedPanel-tab:hover,
a.tabContainerControl-tab.axisX:hover,
a.tabControl-tab.axisX:hover
{
background-color: #CCCCCC;
color: white;
border-color: inherit;
}
a.tabbedPanel-tab.disabled:hover,
a.tabContainerControl-tab.axisX.disabled:hover,
a.tabControl-tab.axisX.disabled:hover
{
background-color: #999999;
color: #CCCCCC;
border-bottom: 0;
}
a.tabbedPanel-tab.selected:hover,
a.tabContainerControl-tab.axisX.selected:hover,
a.tabControl-tab.axisX.selected:hover
{
background-color: #CCCCCC;
color: white;
border-color: inherit;
border-bottom: 3px solid #CCCCCC;
}
.cardPanel-body, .tabbedPanel-body
{
background-color: #CCCCCC;
padding: 20px;
/* border-color: black;*/
border-style: outset;
z-index: 2;
}
.tabbedPanel-body
{
border-top: none;
}
/*accordion menus*/
.accordionMenu
{
margin: 0;
padding: 0;
overflow: hidden;
width: 8em;
}
.accordionMenu-label
{
_width: 100%; /*TODO check hack for IE*/
display: block;
margin: 0;
background: #CCCCCC;
color: white;
border: 1px solid #AAA;
}
.accordionMenu-body .accordionMenu-body
{
margin: 0;
padding: 0;
border: solid 1px #AAAAAA;
}
.accordionMenu-children
{
margin-left: 0;
padding-left: 0;
}
.accordionMenu-child
{
list-style-type: none;
}
/*slider controls*/
/*TODO fix intervals
.sliderControl-x-ltr-body, .sliderControl-x-rtl-body,
.sliderControl-y-ltr-body, .sliderControl-y-rtl-body
{
position: relative;
}
*/
/*TODO del; testing intervals
.sliderControl-x-ltr-body, .sliderControl-x-rtl-body,
.sliderControl-y-ltr-body, .sliderControl-y-rtl-body
{
border-width: thin;
border-style: solid;
}
*/
/*TODO fix intervals
.sliderControl-x-ltr-body, .sliderControl-x-rtl-body
{
padding-bottom: 1em;
}
*/
/*TODO fix intervals
.sliderControl-y-ltr-body
{
float: left;
padding-right: 2em;
}
*/
/*TODO fix intervals
.sliderControl-y-rtl-body
{
float: right;
padding-left: 2em;
}
*/
.sliderControl-track
{
position: relative;
/*TODO del when works
background-color: #CCCCCC;
border-width: thin;
border-style: solid;
*/
border: 0;
margin: 0;
padding: 0;
}
.sliderControl-track.axisX.dirLTR
{
float: left;
}
.sliderControl-track.axisX.dirRTL
{
float: right;
}
/*TODO del when works
.sliderControl-x-ltr-track, .sliderControl-x-rtl-track
{
width: 128px;
height: 16px;
}
.sliderControl-y-ltr-track, .sliderControl-y-rtl-track
{
width: 16px;
height: 128px;
}
*/
.sliderControl-thumb
{
position: absolute;
left: 0;
top: 0;
border: 0;
margin: 0;
padding: 0;
}
.sliderControl-thumb:hover
{
/*TODO del when works; move logic to framework
background-color: #F5F5F5;
*/
}
.sliderControl-intervals.axisY
{
top: 0;
}
.sliderControl-intervals.axisY.dirLTR
{
right: 0;
}
.sliderControl-intervals.axisY.dirRTL
{
left: 0;
}
/*text controls*/
.textControl-body.warning
{
background-color: yellow;
}
.textControl-body.error
{
background-color: red;
}
/*tree controls*/
li.treeNode-child
{
list-style-type: none;
}
.treeNode-body
{
padding-left: 0;
}
.treeNode-body.collapsed
{
margin-left: 0;
}
.treeNode-body.expanded
{
margin-left: 1em;
}
.treeNode-children
{
margin-left: 0;
padding-left: 0;
}
/*TODO fix
ul.treeNode-collapsed, ul.treeNode-expanded
{
list-style-type: none;
}
ul.treeNode-collapsed
{
display: none;
}
ul.treeNode-expanded
{
display: block;
}
*/
li.treeNode-collapsed, li.treeNode-expanded, li.treeNode-leaf
{
/*setting margin-left in the list item and removing the margin in the enclosing list would improve clicking UI in IE, but produces undesirable results in rtl environments in IE but not in Mozilla (which assumes margin-left means margin-right in rtl environments)*/
}
/*TODO fix
li.treeNode-collapsed
{
list-style-image: url("../images/treenode-collapsed.gif");
cursor: pointer;
}
li.treeNode-expanded
{
list-style-image: url("../images/treenode-expanded.gif");
cursor: pointer;
}
li.treeNode-leaf
{
list-style-image: url("../images/treenode-leaf.gif");
cursor: auto;
}
*/
/*general properties*/
.dragHandle
{
cursor: move;
}
/*general labels*/
/*general errors*/
.checkControl-error,
.groupPanel-error,
.listControl-error,
.panel-error,
.resourceImportControl-error,
.sliderControl-error,
.textControl-error
{
color: red;
font-family: sans-serif;
font-size: x-small;
}
.checkControl-error,
.listControl-label, .listControl-body, .listControl-error,
.resourceImportControl-label, .resourceImportControl-body, .resourceImportControl-error,
.sliderControl-error,
.textControl-label, .textControl-body, .textControl-error
{
display: block;
}
.checkControl-label, .checkControl-body,
.image-label, .image-message
{
display: inline;
}
.image-body
{
display: block;
}
.license
{
color: #CCCCCC;
font-size: xx-small;
}
/*elements*/
head, body, body.applicationFrame, form, textarea
{
margin: 0;
padding: 0;
border-width: 0;
border-style: none;
}
head, body, body.applicationFrame, form
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
head, body, body.applicationFrame
{
background-color: white;
}
form
{
background-color: transparent;
}
textarea
{
width: 100%;
}