Opened 9 years ago

Closed 9 years ago

Last modified 7 years ago

#12099 closed enhancement (fixed)

Convert claro files to less format

Reported by: bill Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description

Convert the claro files to less (http://lesscss.org/docs) format, with variables for all the colors etc., to make it easy for designers to roll new themes based on claro.

Change History (18)

comment:1 Changed 9 years ago by bill

(In [23382]) Initial conversion of claro CSS files into LESS format, using semantic variables for almost all of the colors.

The CSS files are now generated, so shouldn't be edited manually anymore. See README for instructions on how to compile LESS files into CSS files.

There are a bunch of TODO's about claro color selections that seem inconsistent with the rest of the theme. I've marked those with TODO's in the new files.

Refs #12099.

comment:2 Changed 9 years ago by bill

(In [23402]) Using CSS-style variable names, refs #12099.

comment:3 Changed 9 years ago by bill

(In [23411]) Add border-radius as an adjustable value (through variables.less), refs #12099.

comment:4 Changed 9 years ago by bill

(In [23412]) Make @textbox-padding variable to control text box padding.

Also:

  • Made the Select widget's padding in-line with ComboBox etc.
  • Fixed horizontal alignment of menu items with the input area text (for ComboBox and Select).

A future simplification would be to replace the 1px border around the .dijitArrowButtonInner with 1px padding on it's parent (corresponding to the 1px padding on the parents of other <input> nodes). That would eliminate the special CSS rules for quirks-mode border-box sizing.

Refs #12099.

comment:5 Changed 9 years ago by bill

(In [23413]) The no-border case for the ComboBox arrow button is for when the arrow is depressed, not when the ComboBox is focused.

Refs #12099.

comment:6 Changed 9 years ago by bill

(In [23414]) The no-border case for the ComboBox arrow button is for when the arrow is depressed, not when the ComboBox is focused.

Refs #12099.

comment:7 Changed 9 years ago by bill

(In [23415]) ColorPalette accidentally had both a border and outline. Removed the outline (patch from Jason).

Refs #12099.

comment:8 Changed 9 years ago by bill

(In [23416]) Use standard selected-border-color for selected Tree node(s), patch from Jason. Refs #12099.

comment:9 Changed 9 years ago by bill

(In [23417]) Use standard background-color for selected tab, with adjustments to gradient image which was more opaque than accordion's. Note that whatever the specified tab color is, it fades to white towards the content to blend in with the content (except on IE6 which doesn't support gradients).

Patch from Jason. Refs #12099.

comment:10 Changed 9 years ago by bill

(In [23445]) Make hover of ComboBox and Spinner more consistent. There's still a discrepancy about hover of the the arrows themselves works. Patch from Jason modified by me.

Refs #12099.

comment:11 Changed 9 years ago by bill

(In [23526]) Fixes to arrow "hover effect" for ComboBox based widgets:

  • Added a new dijitComboBoxOpenOnClick class so CSS patterns can differentiate DateTextBoxes and TimeTextBoxes with openOnClick=true from openOnClick=false
  • When openOnClick=true then clicking anywhere on a ComboBox toggles the drop down. In this case, hovering anywhere on the ComboBox causes color change of arrow. Otherwise, only hovering the arrow button causes the arrow button to change color.
  • Rollback previous spinner CSS changes; arrows only change color when arrows themselves are hovered.

Refs #12099 !strict.

comment:12 Changed 9 years ago by bill

(In [23598]) Detailed instructions for windows (but we need an easier system). Refs #12099.

comment:13 Changed 9 years ago by bill

(In [23599]) Compile script to make things a bit easier. Refs #12099.

comment:14 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

comment:15 Changed 7 years ago by bill

In [28712]:

node now has proper install scripts, refs #12099

comment:16 Changed 7 years ago by bill

In [30754]:

Use varargs feature to avoid duplicating mixin definitions. This removes some commas from the generated CSS, like for linear gradients, but it still seems to work. Refs #12099.

comment:17 Changed 7 years ago by bill

In [30755]:

remove old version of less, refs #12099

comment:18 Changed 7 years ago by bill

In [30756]:

Rollback [30754], it makes a Tree's container expand and collapse by a pixel as you mouse over the TreeNodes (see test_Tree_Dnd.html). I guess we do need the commas after all. Refs #12099. (In the future I'll start using border-color:transparent rather than showing and hiding border based on state, but that's an orthogonal issue.)

Note: See TracTickets for help on using tickets.