introducing sidebar toggling (js); all sources moved to src folder
This commit is contained in:
mrliptontea
271
src/sass/components/_jquery-ui.scss
Normal file
271
src/sass/components/_jquery-ui.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
//
|
||||
// Tweaks for jQuery UI
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
/**
|
||||
* Component containers
|
||||
*/
|
||||
|
||||
.ui-widget {
|
||||
&,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Widgets
|
||||
*/
|
||||
|
||||
.ui-widget-content {
|
||||
border: 1px solid $panel-border;
|
||||
background: $body-bg;
|
||||
color: $text-color;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border: 0 none;
|
||||
background: $header-bg;
|
||||
color: $header-text;
|
||||
font-weight: bold;
|
||||
|
||||
a,
|
||||
button {
|
||||
&.ui-state-default {
|
||||
border-color: $header-bg;
|
||||
background: $header-bg;
|
||||
color: $header-text;
|
||||
}
|
||||
|
||||
&.ui-state-hover,
|
||||
&.ui-state-focus {
|
||||
border-color: darken($header-bg, 12%);
|
||||
background: darken($header-bg, 10%);
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Interaction states
|
||||
*/
|
||||
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
border: 1px solid $component-border;
|
||||
background: $component-bg;
|
||||
color: $component-color;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited {
|
||||
color: $component-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus {
|
||||
border: 1px solid $component-active-border;
|
||||
background: $component-active-bg;
|
||||
color: $component-active-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited,
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited {
|
||||
color: $component-active-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
border: 1px solid $component-active-border;
|
||||
background: $component-active-bg;
|
||||
color: $component-active-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
color: $component-active-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Menu (e.g. autocomplete)
|
||||
*/
|
||||
|
||||
.ui-menu {
|
||||
padding: 3px;
|
||||
border-radius: $panel-border-radius;
|
||||
box-shadow: $panel-shadow;
|
||||
}
|
||||
|
||||
.ui-menu-item {
|
||||
border-radius: $panel-border-radius;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Dialogs
|
||||
*/
|
||||
|
||||
.modal {
|
||||
background: $body-bg;
|
||||
z-index: 50;
|
||||
|
||||
h3.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p.buttons {
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
&.ui-widget-content {
|
||||
padding: 3px;
|
||||
border: 0 none;
|
||||
box-shadow: $panel-shadow;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar-close {
|
||||
right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-widget-overlay {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Datepicker
|
||||
*/
|
||||
|
||||
img.ui-datepicker-trigger {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-datepicker {
|
||||
padding: 3px;
|
||||
box-shadow: $panel-shadow;
|
||||
|
||||
.ui-datepicker-header {
|
||||
padding: .3em;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
left: .3em;
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
right: .3em;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
top: .3em;
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-datepicker-title {
|
||||
margin: 0 (1.8em + .3em);
|
||||
}
|
||||
|
||||
select.ui-datepicker-month,
|
||||
select.ui-datepicker-year {
|
||||
width: 49%;
|
||||
height: 1.8em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select.ui-datepicker-year {
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar {
|
||||
table-layout: fixed;
|
||||
|
||||
.ui-state-default {
|
||||
border-color: $body-bg;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
.ui-state-focus,
|
||||
.ui-state-hover {
|
||||
border-color: $component-active-bg;
|
||||
background: $component-active-bg;
|
||||
color: $component-active-color;
|
||||
}
|
||||
|
||||
.ui-state-active {
|
||||
border-color: $highlight-border;
|
||||
background: $highlight-bg;
|
||||
color: $highlight-text;
|
||||
}
|
||||
|
||||
.ui-datepicker-today {
|
||||
.ui-state-highlight {
|
||||
border-color: $component-active-border;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-current-day {
|
||||
.ui-state-active {
|
||||
border-color: $highlight-border;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 1px 1px 0;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
padding: .25em .3em .25em 0;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
&.ui-datepicker-week-col {
|
||||
padding-right: $table-condensed-cell-padding;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user