Skip to content

Commit

Permalink
Initial conversion
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfranqueiro
kfranqueiro committed Apr 14, 2012
0 parents commit da56b9a
Show file tree
Hide file tree
Showing 82 changed files with 3,864 additions and 0 deletions.
279 changes: 279 additions & 0 deletions Calendar.styl
@@ -0,0 +1,279 @@
/* Calendar
*
* Styling Calendar mainly includes:
*
* 1. Calendar container
* .dijitCalendar - main container
* .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
*
* 2. Month
* .dijitCalendarMonthContainer
* .dijitCalendarMonthLabel
* .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
* .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
*
* 3. Date
* .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
* .dijitCalendarDateTemplate - date label wrapper
* .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
* .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
* .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
* .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
*
* 4. Year
* .dijitCalendarYearContainer
* .dijitCalendarYearLabel
* .dijitCalendarPreviousYear /.dijitCalendarNextYear
* .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
*
* 5. Dropdown Month Menu
* .dijitCalendarMonthMenu - menu container
* .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
* .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
*/

@import "variables";

.claro .dijitCalendar {
border:solid 1px $border-color;
background-color: $calendar-background-color;
background-image:url($image-calendar-container);
background-position:0 -448px;
background-repeat:repeat-x;
text-align:center;
padding:6px 5px 3px 5px;
border-radius: 4px;
border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
}
.dj_ie6 .claro .dijitCalendar {
background-image:none;
}
.claro .dijitCalendar img {
border:none;
}
.claro .dijitCalendarHover, .claro .dijitCalendar:hover,
.claro .dijitCalendarActive {
/* treat dijitCalenderActive like hover since there's
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
*/
background-color: $hovered-background-color;
border:solid 1px $hovered-border-color;
}
.claro .dijitCalendarMonthContainer th {
text-align:center;
padding-bottom:4px;
vertical-align:middle;
}
.claro .dijitCalendarMonthLabel {
color: $text-color;
font-size: 1.091em;
padding: 0 4px;
}

/* next/previous month arrows */
.claro .dijitCalendarIncrementControl {
width:18px;
height:16px;
background-image: url($image-calendar-arrows);
background-repeat: no-repeat;
}
.dj_ie6 .claro .dijitCalendarIncrementControl {
background-image: url($image-calendar-arrows-ie6);
}
.claro .dijitCalendarIncrease {
background-position:-18px 0;
}
.claro .dijitCalendarArrowHover .dijitCalendarDecrease,
.claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
background-position:-36px 0;
}
.claro .dijitCalendarArrowHover .dijitCalendarIncrease,
.claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
background-position:-55px 0;
}
.claro .dijitCalendarArrowActive .dijitCalendarDecrease,
.claro .dijitCalendarArrow:active .dijitCalendarDecrease {
background-position:-72px 0;
}
.claro .dijitCalendarArrowActive .dijitCalendarIncrease,
.claro .dijitCalendarArrow:active .dijitCalendarIncrease {
background-position:-91px 0;
}
.claro .dijitA11ySideArrow {
/* text +/- labels instead of arrow icons, for high contrast mode */
display: none;
}

.claro .dijitCalendarDayLabelTemplate {
padding-bottom:0;
text-align:center;
border-bottom:1px solid $border-color;
padding:0 3px 2px;
}
.claro .dijitCalendarDayLabel {
padding:0 4px 0 4px;
font-weight:bold;
font-size:0.909em;
text-align:center;
color: $text-color;
}
.claro .dijitCalendarDateTemplate {
text-align:center;
background-color:$calendar-currentmonth-background-color;
background-image:url($image-calendar-container);
background-position:0 0;
background-repeat:repeat-x;
border-bottom: 1px solid $minor-border-color;
padding-top:0;
font-size:0.909em;
font-family: Arial;
font-weight:bold;
letter-spacing:.05em;
text-align:center;
color: $text-color;
}
.dj_ie6 .claro .dijitCalendarDateTemplate {
background-image: none;
}
.claro .dijitCalendarPreviousMonth,
.claro .dijitCalendarNextMonth {
background-color: $calendar-adjacentmonth-background-color;
background-image:none;
border-bottom:solid 1px $minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */
}
.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
text-decoration:none;
display:block;
padding:3px 5px 3px 4px;
border:solid 1px $calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */
transition-property: background-color, border;
transition-duration: .35s;
}
.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
color: $calendar-adjacentmonth-text-color;
border-color: $calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
}

.claro .dijitCalendarYearContainer {
vertical-align:middle;
}
.claro .dijitCalendarYearControl {
padding: 1px 2px 2px 2px;
}
.claro .dijitCalendarYearLabel {
padding: 2px 0 0 0;
margin: 0;
font-size: 1.17em;
}
.claro .dijitCalendarYearLabel span {
/* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
vertical-align:middle;
}
.claro .dijitCalendarSelectedYear {
padding:0 3px;
}
.claro .dijitCalendarNextYear,
.claro .dijitCalendarPreviousYear {
padding: 1px 6px 1px 6px;
font-size:0.909em;
}
.claro .dijitCalendarSelectedYear {
font-size:1.091em;
color:$selected-text-color;
}
/* End Normal Calendar Style */
/* Hovered Calendar Style */
.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel,
.claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
background-color:$hovered-background-color;
border:solid 1px $hovered-border-color;
color:$hovered-text-color;
transition-duration(.2s);
}
.claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover,
.claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover {
color:$hovered-text-color;
border:solid 1px $calendar-button-hovered-border-color;
padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
background-color: $calendar-button-hovered-background-color;
}
/* End Hovered Calendar Style */
/* Active Calendar Style */
.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active
.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
border: solid 1px $calendar-button-pressed-border-color;
padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
background-color:$calendar-button-pressed-background-color;
}
.claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
.claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
background-image:url($image-calendar-container);
background-position:0 -300px;
background-color: $calendar-date-pressed-background-color;
border:solid 1px $calendar-date-pressed-border-color;
transition-duration(.1s);
}
.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
background-image:none;
}
/* End Active Calendar Style */
/* Selected Calendar Style */
.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
color:$selected-text-color;
background-color: $calendar-date-selected-background-color;
border-color: $calendar-date-selected-border-color;
}
/* End Selected Calendar Style */
/* Disabled Calendar Style*/
.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
color: $disabled-text-color;
text-decoration:line-through;
}

/* End Disabled Calendar Style */

/* Styling for month DropDownButton */

.claro .dijitCalendar .dijitDropDownButton {
margin: 0;
}
.claro .dijitCalendar .dijitButtonText {
padding: 1px 0 3px;
margin-right:-4px;
}
.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
background-color: transparent;
background-image: none;
padding: 0 3px 0 2px;
border:solid 1px $border-color;
box-shadow: 0 0 0 rgba(0,0,0,0);
}
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
background-color: $calendar-button-hovered-background-color;
border:solid 1px $calendar-button-hovered-border-color;
}

/* Styling for month drop down list */

.claro .dijitCalendarMonthMenu {
border-color: $popup-border-color;
background-color: $menu-background-color;
text-align:center;
background-image: none;
}
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
border-top: solid 1px $menu-background-color; /* intentionally invisible until hover */
border-bottom: solid 1px $menu-background-color;
padding: 2px 0;
}
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
background-color: $hovered-background-color;
border-color: $hovered-border-color;
border-width:1px 0;
background-image: url($image-common-highlight);
background-repeat:repeat-x;
}
19 changes: 19 additions & 0 deletions Calendar_rtl.styl
@@ -0,0 +1,19 @@
.claro .dijitCalendarRtl .dijitCalendarIncrease{
background-position: 0 0;
}
.claro .dijitCalendarRtl .dijitCalendarDecrease {
background-position: -18px 0;
}
.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease {
background-position: -36px 0;
}
.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease {
background-position: -55px 0;
}
.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease {
background-position: -72px 0;
}
.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease {
background-position: -91px 0;
}

44 changes: 44 additions & 0 deletions ColorPalette.styl
@@ -0,0 +1,44 @@
/* ColorPalette
*
* Styling of the ColorPalette consists of the following:
*
* 1. the whole color palette
* .dijitColorPalette - for outline, border, and background color of the whole color palette
* Note: outline does not work for IE
*
* 2. the color swatch
* .dijitColorPalette .dijitPaletteImg
* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
* displays border around a color swatch
*
* 3. hovered swatch
* .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
* the hovered state of the color swatch - adds border
*
* 4. active and selected swatch
* .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
* .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
* adds border for active or selected state
*/

@import "variables";

.claro .dijitColorPalette {
border: 1px solid $border-color;
background: $colorpalette-background-color;
border-radius: 0;
}

.claro .dijitColorPalette .dijitPaletteImg {
/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
* displays border around a color swatch
* overrides border color in dijit.css */
border: 1px solid $minor-border-color;
}
.claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
border: 1px solid $swatch-hovered-border-color;
}
.claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
.claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
border: 2px solid $swatch-selected-border-color;
}

0 comments on commit da56b9a

Please sign in to comment.