8,288
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + Line 12:
Line 12: − + + + + + + + + + + + + + + + + + + + + + + +
Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls (view source)
Revision as of 16:43, 22 October 2009
, 16:43, 22 October 2009no edit summary
<noinclude>{{Translations}}</noinclude>
<noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude>
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|%
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray
|-
|Black||Palettes, Popups||#000000||100%
|-
|Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75%
|-
|Button Grey||Default Button States||#808080||50%
|-
|Selection Grey||Selections, Panel Groupings||#A6A6A6||35%
|-
|Panel Grey||Panels, Desktop||#C0C0C0||25%
|-
|Text Field Grey||Text entry background||#E5E5E5||10%
|-
|White||Pressed states, multiline text areas||#FFFFFF||0%
|}
=====Control Sizing=====
In accordance with [[Human_Interface_Guidelines/The_Sugar_Interface/Layout_Guidelines| the grid system]], we have defined two standard sizes for controls: 75px and 45px. These sizes determine the bounding box for a given control, with 45px being the smallest recommended active (clickable) area for any control component. Note that the control itself may actually be smaller than this canvas, depending on the desired context. For instance, the icons for buttons fill up to 60% of the canvas area, with the actual icons having sizes of 55px and 27px.
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>