Skip to content

Instantly share code, notes, and snippets.

@robertmclaws
Created April 9, 2015 15:04
Show Gist options
  • Save robertmclaws/a9c4d844744ec54d56be to your computer and use it in GitHub Desktop.
Save robertmclaws/a9c4d844744ec54d56be to your computer and use it in GitHub Desktop.
Simpler way to integrate Kendo and Bootstrap
/*
* Kendo UI Complete v2013.1.529 (http://kendoui.com)
* Copyright 2013 Telerik AD. All rights reserved.
*
* Kendo UI Complete commercial licenses may be obtained at
* https://www.kendoui.com/purchase/license-agreement/kendo-ui-complete-commercial.aspx
* If you do not own a commercial license, this file shall be governed by the trial license terms.
*/
@import "../Bootstrap/variables.less";
@image-folder: "Bootstrap-Plus";
@texture: none;
@tooltip-texture: none;
@fallback-texture: none;
/* Widget Base Styles */
@widget-text-color: @textColor;
@widget-gradient: none;
@widget-background-color: @white;
@widget-border-color: @tableBorder;
@widget-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
/* Selects, Dropdowns */
@select-background-color: @header-background-color;
@select-hover-background-color: @hover-background-color;
@select-group-background-color: @select-background-color;
@select-border-color: @hover-border-color;
/* Inputs */
@input-text-color: @textColor;
@input-background-color: @inputBackground;
/* Links */
@link-text-color: @linkColor;
/* Headers */
@header-text-color: @textColor;
@header-background-color: @tableBackgroundAccent;
/* Buttons */
@button-text-color: @btnBackground;
@button-background-color: @btnPrimaryBackground;
/* Group Base Styles */
@group-background-color: darken(@tableBackgroundAccent, 5%);
@group-border-color: darken(@tableBackgroundAccent, 10%);
/* Content */
@content-background-color: @widget-background-color;
/* Widget States */
/* Hover State */
@hover-text-color: @white;
@hover-gradient: none;
@hover-background-color: darken(@linkColor, 5%);
@hover-border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@hover-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
/* Selected State */
@selected-text-color: #fff;
@selected-gradient: none;
@selected-background-color: @btnPrimaryBackground;
@selected-border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@selected-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
/*Focused State*/
@focused-border-color: @hover-border-color;
@focused-shadow: 0 0 3px 0 @shadow-color;
@focused-item-shadow: inset 0 0 3px 1px #75b9f0;
@focused-active-item-shadow: inset 0 0 3px 1px darken(#003db7, 15%);
/* Active State */
@active-text-color: @textColor;
@active-gradient: none;
@active-background-color: @white;
@active-border-color: #9aabb2;
@active-shadow: none;
/* Error State */
@error-text-color: @errorText;
@error-background-color: @errorBackground;
@error-border-color: @errorBorder;
/* Disabled State */
@disabled-text-color: #999999;
/* ToolTip */
@tooltip-text-color: @textColor;
@tooltip-background-color: @widget-background-color;
@tooltip-border-color: @selected-border-color;
/* Validation Message */
@validation-text-color: @warningText;
@validation-background-color: @warningBackground;
@validation-border-color: @warningBorder;
/* Splitter */
@splitbar-background-color: @header-background-color;
/* Slider */
@draghandle-border-radius: 7px;
@draghandle-border-color: @widget-border-color;
@draghandle-background-color: @widget-background-color;
@draghandle-shadow: none;
@draghandle-hover-border-color: @hover-border-color;
@draghandle-hover-background-color: @hover-background-color;
@draghandle-hover-shadow: none;
/* Grid */
@alt-background-color: @tableBackgroundAccent;
@cell-border-color: #bebebe;
@column-highlight-background-color: #e9e9e9;
/* Scheduler */
@scheduler-background-color: @widget-background-color;
@current-time-color: @error-border-color;
@event-background-color: #0187cb;
@event-text-color: @selected-text-color;
/* Upload */
@upload-progress-background-color: #d0f8ff;
@upload-progress-text-color: #06c;
@upload-success-background-color: #ddffd0;
@upload-success-text-color: #28760b;
@upload-error-background-color: #ffded7;
@upload-error-text-color: #c00;
/* Loading Indicators */
@loading-panel-color: #fff;
/* Shadows */
@shadow-color: rgba(0, 0, 0, .2);
@shadow-inset-color: #b4d5e2;
/* Border Radii */
@main-border-radius: 6px;
@list-border-radius: @main-border-radius - 1;
@inner-border-radius: @main-border-radius - 1;
@slider-border-radius: 13px;
/* Icons */
@default-icon-opacity: 1;
@calendar-border-radius: 4px;
@calendar-content-text-color: @widget-text-color;
@calendar-footer-background: @widget-background-color;
@calendar-footer-text-decoration: none;
@calendar-footer-hover-text-decoration: underline;
@calendar-footer-hover-background: @widget-background-color;
@calendar-header-hover-text-decoration: none;
@calendar-header-hover-background: @hover-background-color;
@calendar-footer-active-background: @widget-background-color;
@calendar-group-background-color: @group-background-color;
@button-border-color: @widget-border-color;
@menu-border-color: @widget-border-color;
@tabstrip-items-border: @widget-border-color;
@tabstrip-active-background: @widget-background-color;
@tabstrip-tabs-color: @widget-text-color;
@form-widget-color: @widget-text-color;
@drop-down-border-color: @widget-border-color;
@drop-down-hover-border-color: @hover-border-color;
@drop-down-focused-border-color: @focused-border-color;
@drop-down-background: #e9e9e9;
@drop-down-text-color: @widget-text-color;
@secondary-border-color: @widget-border-color;
@secondary-text-color: @widget-text-color;
@numeric-selected-background: @selected-background-color;
@panelbar-items-border: @widget-border-color;
@panelbar-content-background: @content-background-color;
@panelbar-content-color: @widget-text-color;
@window-shadow-style: 1px 1px 7px 1px;
@filter-menu-content-background: @content-background-color;
@icon-background-color: transparent;
@import "theme-template.less";
.k-picker-wrap, .k-dropdown-wrap, .k-numeric-wrap, .k-pager-wrap > .k-link, .k-icon {
background-color: @btnPrimaryBackground !important;
}
.k-dropdown-wrap .k-input {
background-color: @white !important;
}
.k-button:hover, .k-state-hover .k-link:hover {
color: @hover-text-color;
text-decoration: none;
}
.k-tab-on-top .k-link:hover {
text-decoration: none;
}
.k-grid-toolbar .k-button .k-icon, .k-grid tbody .k-button .k-icon, .k-filter, .k-i-arrow-s, .k-i-arrow-n, .k-i-arrow-e, .k-i-arrow-w {
background-color: transparent !important;
}
.k-widget .km-scroll-wrapper {
position: relative;
padding-bottom: 0.58em !important;
}
.k-grid-edit-row, .k-edit-cell {
height:32px !important;
}
.k-edit-cell .text-box {
width: 90%;
}
.k-hierarchy-cell .k-icon {
background-color: transparent !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment