Skip to content

Instantly share code, notes, and snippets.

@hchouhan

hchouhan/gravityforms-bs-datepicker.less

Forked from corradomatt/gravityforms-bs-datepicker.less
Created October 3, 2013 06:27
Show Gist options
  • Save hchouhan/6805850 to your computer and use it in GitHub Desktop.
Save hchouhan/6805850 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gravityforms-bs-datepicker.less
/**
* Borrowed from https://github.com/addyosmani/jquery-ui-bootstrap
* Styles the datepicker popup for gravityforms used with bootstrap
*/
/*
* jQuery UI Datepicker
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Datepicker#theming
*/
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
background-color: darken(@body-bg, 10%);
.ui-datepicker-header {
position:relative;
padding:.2em 0;
border:0px;
font-weight: bold;
width: 100%;
padding: 4px 0;
background-color: @body-bg;
color: @text-color;
}
.ui-datepicker-prev,
.ui-datepicker-next {
position:absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
/*top: 1px;*/
}
.ui-datepicker-prev { left:2px; }
.ui-datepicker-next { right:2px; }
.ui-datepicker-prev-hover { /*left:1px;*/ }
.ui-datepicker-next-hover { /*right:1px;*/ }
.ui-datepicker-prev span,
.ui-datepicker-next span {
display: block;
font-size: 11px;
margin-top: -7px;
position: absolute;
top: 50%;
&:hover {
cursor: pointer;
}
}
.ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
select {
font-size:1em;
margin:1px 0;
}
}
select.ui-datepicker-month-year {
width: 100%;
}
select.ui-datepicker-month, select.ui-datepicker-year {
width: 49%;
}
table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin:0 0 .4em;
}
th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
td {
border: 0;
padding: 1px;
span, a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
}
.ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding:0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width:auto;
overflow:visible;
.ui-datepicker-current {
float:left;
}
}
}
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table {
width:95%;
margin:0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break {
clear:both;
width:100%;
font-size:0em;
}
/* RTL support */
.ui-datepicker-rtl {
direction: rtl;
.ui-datepicker-prev {
right: 2px;
left: auto;
&:hover {
right: 1px;
left: auto;
}
}
.ui-datepicker-next {
left: 2px;
right: auto;
&:hover {
left: 1px;
right: auto;
}
}
.ui-datepicker-buttonpane {
clear:right;
button {
float: left;
.ui-datepicker-current {
float:right;
}
}
}
.ui-datepicker-group {
float:right;
}
.ui-datepicker-group-last .ui-datepicker-header {
border-right-width:0;
border-left-width:1px;
}
.ui-datepicker-group-middle .ui-datepicker-header {
border-right-width:0;
border-left-width:1px;
}
}
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
display: none; /*sorry for IE5*/
//display/**/: block; /*sorry for IE5*/
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}
.ui-datepicker th {
font-weight: bold;
color: gray;
}
.ui-datepicker-today {
a {
background-color: @link-color;
cursor: pointer;
padding: 0 4px;
margin-bottom:0px;
&:hover {
background-color: @gray;
color: @gray-lighter;
}
}
}
.ui-datepicker td {
a {
margin-bottom:0px;
border:0px;
}
&:hover {
color:@gray-lighter;
}
.ui-state-default {
border: 0;
background:none;
margin-bottom: 0;
padding: 5px;
color: gray;
text-align: center;
filter: none;
&:hover {
background:@link-color;
color:@gray-lighter;
border-radius: 4px;
}
}
.ui-state-highlight {
color: #404040;
background: #eedc94;
#gradient > .vertical (#fceec1, #eedc94);
// .ui-reset-filter();
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 4px;
}
.ui-state-active {
background:@gray-light;
margin-bottom:0px;
font-size:normal;
text-shadow: 0px;
color:@gray-lighter;
border-radius: 4px;
}
}
Raw
gravityforms.less
/**
* LESS CSS file for using default gravity forms css classes with bootstrap 3
* Inspired and started by Ben Word - http://roots.io/style-gravity-forms-with-bootstrap/
*
* Copyright: 2013, CorradoMatt
* License: GPLv2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
.gform_wrapper {
ul {
.list-unstyled();
}
li {
.form-group();
}
form {
margin-bottom: 0;
}
label {
font-weight: normal;
}
.gfield {
.make-md-column(12);
}
.top_label .gfield_label {
font-weight: bold;
}
.gsection {
border-bottom: 1px dotted #CCCCCC;
margin: 16px 0;
padding: 0 0 8px;
.clearfix();
}
ul.gfield_radio, ul.gfield_checkbox {
li {
margin-bottom: 0;
}
li input[type="radio"]:checked + label, li input[type="checkbox"]:checked + label {
font-weight: bold;
}
}
.gfield_required {
padding-left: 1px;
color: @state-danger-text;
}
.field_name_first input, .ginput_complex .ginput_left input {
width: 100%;
}
.ginput_complex .ginput_right input {
width: 99%;
}
.datepicker.datepicker_with_icon.hasDatepicker {
display: inline-block;
margin-right: 2%;
width: 90%;
}
.ginput_complex label,
.gfield_time_hour label,
.gfield_time_minute label,
.gfield_date_month label,
.gfield_date_day label,
.gfield_date_year label,
.instruction {
display: block;
font-size: @font-size-small;
margin: 3px;
}
/**
* Gravity Forms CSS Selector Columns
*/
// Builds a half column for .gf_left_half, .gf_right_half, .ginput_left and .ginput_right
li.gfield.gf_left_half, li.gfield.gf_right_half, .ginput_complex .ginput_left, .ginput_complex .ginput_right {
.make-md-column(6);
}
// Builds a 1 quarter column for .gf_one_quarter
li.gfield.gf_one_quarter {
.make-md-column(3);
}
// Builds a 3 quarter column for .gf_three_quarter
li.gfield.gf_three_quarter {
.make-md-column(9);
}
// Builds a 1 third column for .gf_left_third, .gf_middle_third, .gf_right_third
li.gfield.gf_left_third, li.gfield.gf_middle_third, li.gfield.gf_right_third {
.make-md-column(4);
}
// 2 column lists for radio and checkboxes
li.gfield.gf_list_2col ul.gfield_checkbox li, li.gfield.gf_list_2col ul.gfield_radio li {
margin: 0;
min-height: 1.8em;
.make-md-column(6);
// without converting to inline block display the list will be in 1 column on smaller displays
@media (max-width: @screen-md) {
display: inline-block;
}
}
// 3 column lists for radio and checkboxes
li.gfield.gf_list_3col ul.gfield_checkbox li, li.gfield.gf_list_3col ul.gfield_radio li {
margin: 0;
min-height: 1.8em;
.make-md-column(4);
// without converting to inline block display the list will be in 1 column on smaller displays
@media (max-width: @screen-md) {
display: inline-block;
}
}
// 4 column lists for radio and checkboxes
li.gfield.gf_list_4col ul.gfield_checkbox li, li.gfield.gf_list_4col ul.gfield_radio li {
margin: 0;
min-height: 1.8em;
.make-md-column(3);
// without converting to inline block display the list will be in 1 column on smaller displays
@media (max-width: @screen-md) {
display: inline-block;
}
}
// Complex columns fix
.ginput_complex .ginput_left {
padding-left: 0;
}
.ginput_complex .ginput_right {
padding-right: 0;
}
// .gf_inline
li.gfield.gf_inline {
display: inline-block;
float: none;
vertical-align: top;
width: auto;
}
// Improves UX and layout for checkboxes and radio buttons
.gfield_checkbox li input[type="checkbox"], .gfield_radio li input[type="radio"], .gfield_checkbox li input {
float: left;
margin-top: 7px;
height: 20px;
&:hover {
cursor: pointer;
}
}
// Improves UX and layout for labels of checkboxes and radio buttons
.gfield_checkbox li label, .gfield_radio li label {
display: inline-block;
line-height: 1.5;
margin: 2px 0 0 10px;
padding: 0;
vertical-align: top;
width: auto;
&:hover {
cursor: pointer;
}
}
// Creates layout for lists with .gf_list_inline
li.gf_list_inline ul.gfield_checkbox li, li.gf_list_inline ul.gfield_radio li {
display: inline-block;
margin: 0 10px 10px 0;
}
.ginput_container {
// Applies standard bootstrap styles to form elements
input, select, textarea {
.form-control();
}
// fix for bootstrap standard of 100% width for checkboxes and radio buttons
input[type='checkbox'], input[type='radio'] {
width: auto;
}
textarea {
height: auto;
}
}
// Form button styles
.gform_button {
.btn();
.btn-primary();
.btn-lg();
}
// Validation error styles
.gform_wrapper .gfield_error {
.gfield_label {
color: @state-danger-text;
}
input,
select,
textarea {
border-color: @alert-danger-border;
background-color: @alert-danger-bg;
color: @alert-danger-text;
.form-control-focus(@alert-danger-text);
}
}
// More validation error styles
.validation_error {
.alert();
.alert-danger();
}
// Confirmation message after form submit styling
#gforms_confirmation_message {
.alert();
}
.gf_scroll_text {
overflow: auto;
height: 180px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment