Skip to content

Instantly share code, notes, and snippets.

@toddanglin
Created September 20, 2011 21:01
Show Gist options
  • Save toddanglin/1230318 to your computer and use it in GitHub Desktop.
Save toddanglin/1230318 to your computer and use it in GitHub Desktop.
Kendo UI Beta 1 LESS CSS Theme
/* LESS Powered Kendo theme*/
@activeColor: black;
@hoverColor: yellow;
@selectedColor: white;
@errorColor: red;
@disabledColor: gray;
@borderColor: red;
@activeBorderColor: blue;
@hoverBorderColor: orange;
@selectedBorderColor: lime;
@errorBorderColor: red;
@backColor: green;
@activeBackColor: purple;
@hoverBackColor:pink;
@selectedBackColor: tan;
@errorBackColor: brick;
@groupBackColor: violet;
@linkColor: blue;
@tooltipColor: white;
.t-widget,
.t-input
{
border-color: @borderColor;
background-color: #fff;
}
.t-header,
.t-grid-header,
.t-toolbar,
.t-dropdown-wrap,
.t-grouping-header,
.t-tooltip,
.t-grid-pager
{
border-color: @borderColor;
background:@backColor;
}
*>.t-header,
*>.t-grid-header,
*>.t-toolbar,
*>.t-dropdown-wrap,
*>.t-grouping-header,
*>.t-tooltip,
*>.t-grid-pager
{
background: @backColor url('Kendo/gradient.png') repeat-x 0 center;
}
.t-tabstrip,
.t-tabstrip-items .t-item,
.t-menu-vertical,
.t-editor,
.t-tooltip,
.t-state-hover
{
background-position:0 -248px;
}
*>.t-link.t-state-hover,
*>.t-dropdown-wrap .t-input,
*>.t-dropdown-wrap .t-select,
*>.t-tabstrip-items .t-item,
*>.t-tabstrip-items .t-state-hover .t-link
{
background-image: url('Kendo/gradient.png');
background-repeat: repeat-x;
}
.t-icon { background-image: url('Kendo/sprite.png'); }
.t-editor .t-tool-icon { background-image: url('Kendo/editor.png'); }
.t-loading,
.t-widget .t-loading { background: transparent url('Kendo/loading.gif') no-repeat 0 0; }
.t-loading-image { background-image: url('Kendo/loading-image.gif'); }
.t-loading-color { background-color: #fff; }
.t-widget,
.t-link:link,
.t-link:active,
.t-link:visited,
.t-popup,
.t-grid .t-header,
.t-tabstrip .t-content
{
color: @linkColor;
}
.t-group
{
background-color:@groupBackColor;
border-color:@borderColor;
}
.t-content,
.t-editable-area
{
border-color: @borderColor;
background-color: #fff;
}
.t-colorpicker .t-arrow-down
{
border-color: @borderColor;
}
.t-separator
{
border-color: @borderColor;
background-color: #f5f5f5;
}
.t-alt
{
background-color: #f5f5f5;
}
.t-dropdown-wrap,
.t-toolbar,
.t-grouping-header,
.t-grid-pager,
.t-group-footer td,
.t-grid-footer,
.t-footer-template td,
.t-widget .t-status
{
border-color: @borderColor;
background-color: @groupBackColor;
}
.t-state-default,
.t-state-default .t-select,
.t-panelbar .t-link
{
border-color: @borderColor;
}
.t-active-filter
{
background-color: @activeBackColor;
}
.t-state-active,
.t-state-active:hover,
.t-header .t-state-active
{
color: @activeColor;
background-color: @activeBackColor;
border-color: @activeBorderColor;
}
.t-state-active .t-select
{
border-color: @borderColor;
}
.t-state-hover,
.t-state-hover:hover,
.t-state-focused,
.t-marquee
{
color: @hoverColor;
background-color: @hoverBackColor;
border-color: @hoverBorderColor;
}
.t-state-hover .t-select
{
border-color: @hoverBorderColor;
}
.t-button:hover
{
border-color:@hoverBorderColor;
background-color: @hoverBackColor;
}
.t-state-selected,
.t-button:active,
.t-panelbar .t-state-selected
{
color: @selectedColor;
background-color: @selectedBackColor;
border-color: @selectedBorderColor;
}
.t-state-error
{
border-color: @errorBorderColor;
background-color: @errorBackColor;
color:@errorColor;
}
.t-button
{
outline: 0;
color: @linkColor;
padding: 0 6px 1px;
}
.t-button,
button.t-button.t-state-disabled:hover,
a.t-button.t-state-disabled:hover,
.t-state-disabled .t-button:hover
{
border-color: @borderColor;
background: @backColor;
}
*>.t-button,
*>button.t-button.t-state-disabled:hover,
*>a.t-button.t-state-disabled:hover,
*>.t-state-disabled .t-button:hover
{
background: @backColor url('Kendo/gradient.png') repeat-x 0 center;
}
.t-state-disabled,
.t-state-disabled .t-link,
.t-state-disabled .t-button
{
color: @disabledColor;
}
.t-widget .t-status
{
background-color:transparent;
}
.t-grid-header-wrap,
.t-grid-footer-wrap
{
border-color: @borderColor;
}
.t-grid td
{
border-color: @borderColor;
}
.t-grouping-row td,
td.t-group-cell
{
background:@groupBackColor;
}
.t-grouping-header .t-group-indicator
{
border-color: @borderColor;
}
.t-grouping-dropclue
{
background: url('Kendo/sprite.png') no-repeat -48px -288px;
}
.t-treeview .t-drop-hint
{
background-image: url('Kendo/sprite.png');
background-position: 0 -358px;
}
.t-panelbar .t-link,
.t-panelbar .t-group,
.t-panelbar .t-content
{
border-color: @borderColor;
}
.t-calendar th
{
border-color: @borderColor;
background-color:@groupBackColor;
}
.t-other-month .t-link
{
color: #8b9097;
}
/* DropDown */
.t-combobox,
.t-dropdown
{
background: none;
}
.t-button,
.t-dropdown-wrap
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.t-dropdown-wrap .t-input
{
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.t-dropdown-wrap .t-select
{
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
.t-dropdown-wrap .t-input,
.t-dropdown-wrap .t-select,
.t-tabstrip-items .t-state-hover .t-link
{
background-position: 0 -539px;
}
.t-tabstrip-items .t-state-hover .t-link
{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
/* Slider */
.t-slider .t-draghandle
{
background-image: url('Kendo/sprite.png');
color: #8b9097;
}
.t-slider .t-slider-track .t-state-active
{
background-position: 0 -432px;
background-color: transparent;
border: 0;
}
.t-slider-track
{
border-color:@borderColor;
}
.t-slider-horizontal .t-slider-track,
.t-slider-horizontal .t-slider-selection
{
background-image: url('Kendo/sprite.png');
}
.t-slider-vertical .t-slider-track,
.t-slider-vertical .t-slider-selection
{
background-image: url('Kendo/sprite-vertical.png');
}
.t-slider-horizontal .t-tick
{
background-image:url('Kendo/slider-h.gif');
}
.t-slider-vertical .t-tick
{
background-image:url('Kendo/slider-v.gif');
}
/* Tooltip */
.t-tooltip
{
border-width:2px;
border-color:@selectedBackColor;
background-color:@selectedBackColor;
color:@tooltipColor;
}
.t-callout
{
background-image: url('Kendo/sprite.png');
}
.t-callout-n,
.t-callout-s
{
width: 10px;
height: 5px;
}
.t-callout-w,
.t-callout-e
{
width: 5px;
height: 10px;
}
.t-callout-n
{
top: -7px;
left: 50%;
margin-left: -5px;
background-position: -64px -368px;
}
.t-callout-w
{
left: -7px;
top: 50%;
margin-top: -5px;
background-position: -64px -384px;
}
.t-callout-s
{
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: 2px;
background-position: -64px -400px;
}
.t-callout-e
{
left: 100%;
top: 50%;
margin-top: -5px;
margin-left: 2px;
background-position: -64px -416px;
}
/* Splitter */
.t-splitbar
{
border-color: @borderColor;
background-color: @backColor;
}
.t-splitbar-vertical,
.t-ghost-splitbar-vertical
{
background-image: url('Kendo/sprite.png');
}
.t-splitbar-horizontal,
.t-ghost-splitbar-horizontal
{
background-image: url('Kendo/sprite-vertical.png');
}
/* Upload */
.t-dropzone-active,
.t-upload-files
{
border-color: @borderColor;
}
.t-dropzone-hovered,
.t-upload-files
{
background-color: @groupBackColor;
}
.t-dropzone em
{
color: #878787;
}
.t-progress,
.t-progress-status
{
background-image: url('Kendo/sprite.png');
}
.t-progress
{
background-position: 0 -464px;
border-color: @borderColor;
}
.t-progress-status
{
background-position: 0 -472px;
border-color: @hoverBorderColor transparent;
}
/* ImageBrowser */
.t-tiles
{
border-color: @borderColor;
background: #fff;
}
.t-tile
{
border-color: #fff;
background-position:0 100px;
background-repeat:repeat-x;
}
*>.t-tile
{
background-image:url('Kendo/gradient.png');
}
.t-tiles li.t-state-hover
{
border-color: @hoverBorderColor;
background-position: 0 0;
}
.t-tiles li.t-state-selected
{
border-color: @selectedBorderColor;
background-position: 0 0;
}
.t-tile .t-folder
{
background-image: url('Kendo/imagebrowser.png');
}
.t-tile-empty strong
{
color: #aaa;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment