Changes between Version 5 and Version 6 of documentation/StyleGuide

Author:

peterc (IP: 203.96.63.172)

Timestamp:

02/14/08 14:04:51 (10 years ago)

Comment:

--

documentation/StyleGuide

@@ -151 +151 @@
-The ''select'' element generates three hidden elements:
- * ''selectvalue'': The container element for the selected option.
-
+ This element has the pseudo-class 'checked' set on it when the selection box is visible.
- * ''selectbox'': The box containing the options. The visibility of this element is toggled when the arrow or value elements are clicked on, or when an option is selected.
-
-[[Image(styleguide_2.gif, nolink)]]
+
+=== Example RCSS ===
+
+The following are the select element's RCSS rules and properties from the Rocket Invaders from Mars style sheet:
+
+{{{
+/* Specify the dimensions of the select element. */
+select
+{
+        width: 175px;
+        height: 37px;
+}
+
+/* Specify the dimensions of the value element within the select element. Padding is used to position the
+   value correctly internally. */
+select selectvalue
+{
+        width: 125px;
+        height: 28px;
+        padding: 9px 10px 0px 10px;
+
+        background-decorator: image;
+        background-image: invader.png 162px 192px 307px 229px;
+}
+
+/* Animate the value field when it is hovered. */
+select selectvalue:hover
+{
+        background-image-t: 230px 267px;
+}
+
+/* Fix the size of the select arrow decorate the element. */
+select selectarrow
+{
+        width: 30px;
+        height: 37px;
+        
+        icon-decorator: image;
+        icon-image: invader.png 307px 192px 337px 229px;
+}
+
+/* Animate the arrow when hovered. */
+select selectarrow:hover
+{
+        icon-image-t: 230px 267px;
+}
+
+/* Animate the arrow when the button is pressed or the box is visible. */
+select selectarrow:active,
+select selectarrow:checked,
+{
+        icon-image-t: 268px 305px;
+}
+
+/* Fix the width of the select box and fiddle with the margins to get it in exactly the right place. */
+select selectbox
+{
+        margin-left: 1px;
+        margin-top: -7px;
+        width: 162px;
+        padding: 1px 4px 4px 4px;
+
+        background-decorator: tiled-box;
+        background-top-left-image: invader.png 281px 275px 292px 284px;
+        background-top-right-image: invader.png 294px 275px 305px 284px;
+        background-top-image: invader.png stretch 292px 275px 293px 284px;
+        background-bottom-left-image: invader.png 281px 285px 292px 296px;
+        background-bottom-right-image: invader.png 294px 285px 305px 296px;
+        background-bottom-image: invader.png stretch 292px 285px 293px 296px;
+        background-left-image: invader.png stretch 281px 283px 292px 284px;
+        background-center-image: invader.png stretch 292px 283px 293px 284px;
+}
+
+/* Sizes the option element to take up the available width in the select box. */
+select selectbox option
+{
+        width: auto;
+        padding-left: 3px;
+}
+
+/* Specifies every second option in the selection box to have a white background. */
+select selectbox option:nth-child(even)
+{
+        background: #FFFFFFA0;
+}
+
+/* Gives the red highlight to the selection box. */
+select selectbox option:hover
+{
+        background: #FF5D5D;
+}
+}}}