patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
133 lines (129 loc) • 3.76 kB
text/less
//
// Bootstrap-Datepicker
// --------------------------------------------------
.bootstrap-datepicker.form-control[readonly] {
background-color: @input-bg;
border-color: @input-border ;
color: @input-color;
.box-shadow(inset 0 1px 1px fade(@color-pf-black, 7.5%));
.form-control-outline();
&:focus {
// TODO Create global variables for validation box shadows?
@input-validation-focus-box-shadow: fade(@color-pf-black, 7.5%);
border-color: @input-border-focus ;
.has-error & {
// TODO Create global variables for validation box shadows?
@state-danger-input-focus: lighten(@state-danger-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-danger-input-focus}";
border-color: darken(@state-danger-text, 10%);
.box-shadow(@shadow);
}
.has-success & {
// TODO Create global variables for validation box shadows?
@state-success-input-focus: lighten(@state-success-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-success-input-focus}";
border-color: darken(@state-success-text, 10%);
.box-shadow(@shadow);
}
.has-warning & {
// TODO Create global variables for validation box shadows?
@state-warning-input-focus: lighten(@state-warning-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-warning-input-focus}";
border-color: darken(@state-warning-text, 10%);
.box-shadow(@shadow);
}
}
&:hover {
border-color: @input-border-hover ;
.has-error & {
border-color: darken(@state-danger-text, 10%) ;
}
.has-success & {
border-color: darken(@state-success-text, 10%) ;
}
.has-warning & {
border-color: darken(@state-warning-text, 10%) ;
}
}
.has-error & {
border-color: @state-danger-text ;
}
.has-success & {
border-color: @state-success-text ;
}
.has-warning & {
border-color: @state-warning-text ;
}
}
.datepicker {
border-radius: @border-radius-base;
.datepicker-switch,
tfoot .clear,
tfoot .today {
font-size: @font-size-large;
font-weight: 500;
}
.next,
.prev {
font-weight: 500;
}
table tr {
td,
th {
border-radius: @border-radius-base;
}
td {
&.active,
&.active:hover,
&.active.disabled,
&.active.disabled:hover {
background: @dropdown-link-active-bg ;
color: @color-pf-white ;
text-shadow: none;
}
&.day:hover,
&.day.focused {
background: @dropdown-link-hover-bg;
}
&.selected,
&.selected:hover,
&.selected.disabled,
&.selected.disabled:hover {
text-shadow: none;
}
span {
border-radius: @border-radius-base;
&.active,
&.active:hover,
&.active.disabled,
&.active.disabled:hover {
background: @dropdown-link-active-bg;
text-shadow: none;
}
&:hover {
background: @dropdown-link-hover-bg;
}
}
}
}
thead tr:first-child th,
tfoot tr th {
&:hover {
background: @dropdown-link-hover-bg;
}
}
}
.input-daterange {
input:first-child {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
input:last-child {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
.input-group-addon {
background-color: @input-group-addon-bg;
border-color: @input-group-addon-border-color;
line-height: @line-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
}
}