Commit f7c7a3d7 authored by Naomi Guyer's avatar Naomi Guyer Committed by Robert Lyon

Gulp, lib-sass, and developer docs (BUG 1465107)

* Remove all references to compass.
* Set-up gulp with lib-sass, autoprefixer, and minify. (Easier workflow
to set-up than compass, lib-sass much faster than ruby-sass,
autoprefixer handles browser compatibility for us)
* Add developer documentation on how to work with, or create, themes.

Change-Id: Ia3b3ee829a515865a6cf4407edc64c4943c59557
parent b29897e2
......@@ -27,4 +27,5 @@ mahara-*.zip
/debian/mahara-apache2
.DS_Store
/external
logfile
\ No newline at end of file
logfile
node_modules/
......@@ -111,6 +111,7 @@ $elements = array(
),
'institutionadmin' => array(
'type' => 'switchbox',
'class' => 'last',
'title' => get_string('institutionadministrator','admin'),
'ignore' => !$authinstancecount,
),
......
# Mahara theming
## Index
* [Theme Developer Set-up](#theme-developer-set-up)
* [NodeJS](#nodejs)
* [Gulp](#gulp)
* [Working with themes](#working-with-themes)
* [Folder structure (raw)](#folder-structure-raw-)
* [Sub theme](#sub-theme)
* [CSS](#css)
* [Sass and Gulp](#sassandgulp)
* [Sass: Advanced customisation](#sass-advanced-customisation)
* [Templates](#templates)
## Tools
* [NodeJS](https://nodejs.org/)
* [GulpJS](http://gulpjs.com/)
* [Sass](http://sass-lang.com/)
* [Bootstrap](http://getbootstrap.com/)
## Theme Developer Set-up
Mahara's raw and default themes are based on the sass port of bootstrap 3.3.1. We use gulp to turn sass into css (via lib-sass), add vendor prefixes, and minimize.
### NodeJS
Gulp uses Node, so if you haven’t already, you may need to [install it](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)
. If you are unsure whether you have node, open a terminal (commandline) and type:
node -v
If you get a version number, then congrats, you have node!
If not, you can install via a terminal:
Linux:
curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
sudo apt-get install -y nodejs
MacOSX (with homebrew):
brew install node
Windows:
Hit the install button on the [Node website](https://nodejs.org/), and follow the instructions.
### Gulp
If you haven't used gulp before, or don't have it installed, you’ll need to globally install it using the Node Package Manager (npm) from the terminal:
npm install -g gulp
From the terminal navigate to the theme you are working on (e.g):
cd mahara/htdocs/theme/raw
Install the dependencies:
npm install
Run the default gulp tasks:
gulp
This will watch all the scss files in your project for changes, and recompile your css.
## Working with themes
Each time you work on a Mahara theme using gulp, you will need to use a terminal to navigate to the place the gulpfile.js is located for that theme (e.g):
cd mahara/htdocs/theme/raw
...and run
gulp
### Folder structure (raw)
The raw theme sass has been split out into partials based on the purpose it serves to the theme. A partial is a Sass file named with a leading underscore (e.g. _partial.scss). The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.
* components - blocks of css used throughout Mahara across many different features. These are often extensions to bootstraps core components. These include buttons, switches, list-groups, labels etc.
* features - feature specific css. We have tried to avoid these where possible and rely on collections of components, but there are some places where feature specific partials made sense: filebrowsers, comments, dashboard-widgets etc
* form - form related components. Including base elements, alerts, form-groups etc
* layout - sass realted to the laying out of a page. This includes navigation, custom column layouts, and the panels found throughout mahara, as well as specific page regions such as the header and footer.
* lib - sass related to js or smaller sass libraries (i.e font-awesome)
* typography - components that serve a type specific purpose. Styling of the base typography elements (paragrpahs, headings, lists, blockquotes etc), and inclusion of font families.
* utilities - sass variables, utility classes, mixins, and _index_ files (files that only include references to other sass files/partials).
* style.scss - This is the core index file for the theme. It _includes_ a reference to each of the partial sass files needed to build the theme. When gulp is run, the resulting file (found in e.g. raw/css) will be named style.css, taking it's name from our primary index file. tinymce.scss serves the same purpose, but for styles to be imported into tinymce's editing window. The other non-partial files found in the raw theme belong to libraries we have not been able to consolidate yet.
* _custom.scss - pieces of css too small to justify a component or a feature.
* _shame.scss - a file for hotfixes, hacks, and anything that a developer doesn't have time to test or implement properly. This can also be a place for browser or environment specific fixes that may be able to be removed at a later date.
### Sub themes
There are a couple of ways of working with subthemes (themes that extend raw).
#### 1. CSS
If sass and gulp are more complex than you need, you can choose to work with regular css (or whatever other css tools you prefer).
1. Create a new folder for your theme, and copy themeconfig.php from the default theme. Make sure you **REMOVE THIS LINE** (we want the css from raw in this case):
$theme->overrideparentcss = true;
2. Fill themeconfig.php with your new themes details
3. Create css/style.css
4. Add your css to css/style.css
#### 2. Sass and Gulp
If you want more flexibility, are comfortable with sass and gulp (or are working with others who can help you out), then you can use the raw sass files directly (as the default theme does). As a quick starting point, you may wish to copy the default theme and rename it.
To set up a theme to work with sass and gulp way you should override the parent theme's css by placing this line in your new themeconfig.php:
/* This theme includes all css via sass, so we don't need raw's css. */
$theme->overrideparentcss = true;
You will need (you can copy these from default):
* gulpfile.js
* package.json
* sass/style.scss
If you want to override variables (colours, fonts, etc), you should also copy these files:
* utilities/_brand-variables.scss - for brand color definitions
* utilities/_bootstrap-variables.scss - the original variables file from bootstrap. Here we can assign our brand variables to bootstrap's component based variables.
* utilities/_custom-variables.scss - like bootstraps variables file but for custom components.
_custom.scss and _shame.scss are optional. If you don't choose to copy them over, remember to remove the reference to them from style.scss!
Point style.scss at your theme copies of these files (this should already be the case if you copied from the default theme).
From the terminal navigate to your new theme (e.g.):
cd mahara/htdocs/theme/your_theme
Then run:
npm install
This will ensure you have all the dependencies mentioned in gulpfile.js in order to build your sass into css.
Create your own component partials in your_theme/sass directory and and import them in style.scss (e.g):
@import "components/_mycomponent";
### Sass: Advanced customisation
There may be cases where you want to replace an entire component or feature file, rather than just over ridding the css. There are two files in the raw theme that act as indexes for all (non-variable) partials:
* raw/sass/utilities/_bootstrap-index";
* raw/sass/utilities/_index";
The first is the index for all bootstrap partials. If you want to exclude any part of bootstrap from your custom theme, this is the file you will need to copy. Be aware that some parts of this may be used by other files in raw, so excluding a bootstrap dependency may not be straight forward. In particular - we have made heavy use of panels throughout the raw theme.
The second is an index to the modifications and additions made to bootstrap for the raw theme. It is perhaps more likely you will want to replace components referenced from within this file.
1. Copy across the index file with the component you want to remove/replace
2. replace the reference to the raw index file in your theme's style.scss with the new location.
3. If needed (ie for _index.scss), update the import locations to point back at the raw theme (@import "../typography/fonts" will become @import "../../../raw/sass/typography/fonts")
4. remove the line that references the component you no longer need, and replace it with your own version.
It's a bit of set-up work, but you will only need to do this once. Afterwards you can replace any component you like.
## Templates
If a template in the raw theme doesn't suit you, simply copy it into a similar location in your theme (e.g. your/theme/templates/header/head.tpl) and edit it. Your theme's copy of the file should be chosen over the original raw version.
# Require any additional compass plugins here.
# Uncomment these to use regular Ruby gems.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "style"
sass_dir = "sass"
images_dir = "images"
add_import_path "../raw"
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var path = require('path');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('autoprefixer-core');
// Turn sass into css
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss')
.pipe(sass({
paths: [ path.join(__dirname, 'sass', 'includes') ]
}))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(gulp.dest('style/'));
});
// Prefix and minify css files
// this will first run the 'sass' task above, then this one
gulp.task('css', ['sass'], function () {
return gulp.src('style/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 4 version'] }) ]))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(minifyCSS())
.pipe(gulp.dest('style/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(['sass/**/*.scss', '../raw/sass/**/*.scss'], ['css']);
});
// Default Task
gulp.task('default', ['watch']);
{
"name": "default",
"version": "1.0.0",
"description": "Mahara's default theme",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.0",
"gulp-postcss": "^5.1.8",
"gulp-minify-css": "^1.1.6",
"autoprefixer-core": "^5.2.0",
"gulp-sass": "^2.0.1",
"path": "^0.11.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
This diff is collapsed.
<head data-basehref="{$WWWROOT}">
<meta name="generator" content="Mahara {$SERIES} (https://mahara.org)" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:title" content="{$PAGETITLE}" />
<meta property="og:description" content="{$sitedescription4facebook}" />
<meta property="og:image" content="{$sitelogo4facebook}" />
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
{if isset($PAGEAUTHOR)}<meta name="author" content="{$PAGEAUTHOR}">{/if}
<title>{$PAGETITLE}</title>
<script type="text/javascript">
var config = {literal}{{/literal}
'theme': {$THEMELIST|safe},
'sesskey' : '{$SESSKEY}',
'wwwroot': '{$WWWROOT}',
'loggedin': {$USER->is_logged_in()|intval},
'userid': {$USER->get('id')},
'mobile': {if $MOBILE}1{else}0{/if},
'handheld_device': {if $HANDHELD_DEVICE}1{else}0{/if},
'cc_enabled': {$CC_ENABLED|intval}
{literal}}{/literal};
</script>
{$STRINGJS|safe}
{foreach from=$JAVASCRIPT item=script}
<script type="text/javascript" src="{$script}"></script>
{/foreach}
{if isset($INLINEJAVASCRIPT)}
<script type="text/javascript">
{$INLINEJAVASCRIPT|safe}
</script>
{/if}
{foreach from=$HEADERS item=header}
{$header|safe}
{/foreach}
{foreach from=$STYLESHEETLIST item=cssurl}
<link rel="stylesheet" type="text/css" href="{$cssurl}">
{/foreach}
<script type="text/javascript" src="{$WWWROOT}/lib/bootstrap/assets/javascripts/bootstrap.js?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/bootstrap-accessibility.min.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{$WWWROOT}js/jquery.rating.js?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/masonry.min.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/pieform.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/block.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/formtabs.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/filebrowser.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/theme.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{theme_url filename='js/notification.js'}?v={$CACHEVERSION}"></script>
<script type="text/javascript" src="{$WWWROOT}js/css.js?v={$CACHEVERSION}"></script>
<link rel="shortcut icon" href="{$WWWROOT}favicon.ico?v={$CACHEVERSION}" type="image/vnd.microsoft.icon">
{if $ADDITIONALHTMLHEAD}{$ADDITIONALHTMLHEAD|safe}{/if}
{if $COOKIECONSENTCODE}{$COOKIECONSENTCODE|safe}{/if}
</head>
{dynamic}{flush}{/dynamic}
# Require any additional compass plugins here.
# Uncomment these to use regular Ruby gems.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "style"
sass_dir = "sass"
images_dir = "images"
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var path = require('path');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('autoprefixer-core');
// Turn sass into css
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss')
.pipe(sass({
paths: [ path.join(__dirname, 'sass', 'includes') ]
}))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(gulp.dest('style/'));
});
// Prefix and minify css files
// this will first run the 'sass' task above, then this one
gulp.task('css', ['sass'], function () {
return gulp.src('style/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 4 version'] }) ]))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(minifyCSS())
.pipe(gulp.dest('style/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['css']);
});
// Default Task
gulp.task('default', ['watch']);
{
"name": "raw",
"version": "1.0.0",
"description": "The base for Mahara themes",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.0",
"gulp-postcss": "^5.1.8",
"gulp-minify-css": "^1.1.6",
"autoprefixer-core": "^5.2.0",
"gulp-sass": "^2.0.1",
"path": "^0.11.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
......@@ -10,7 +10,7 @@
<div id="notifications" class="ptl notification-parent">
<div class="btn-group pull-left mbl" role="group">
<div class="btn-group pull-left mbl bulk-actions" role="group">
<label class="btn btn-default" for="selectall">
<input type="checkbox" name="selectall" id="selectall" data-togglecheckbox="tocheck">
<span class="sr-only">{str section='activity' tag='selectall'}</span>
......@@ -20,7 +20,7 @@
{str section='admin' tag='bulkactions'}
</button>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
......@@ -36,39 +36,38 @@
</a>
</div>
</div>
<form method="post" class="mlm form-inline form-select-filter pieform form-as-button">
<div class="form-group">
<label class="sr-only" for="notifications_type">{str section='activity' tag='type'}:</label>
<div class="input-group select-group">
<div class="input-group-addon" id="icon-addon-filter">
<span class="icon icon-filter"></span>
</div>
<div class="select form-group">
<div class="picker">
<select class="form-control select js-notifications-type" id="notifications_type" name="type">
{foreach from=$options item=name key=t}
<option value="{$t}"{if $type == $t} selected{/if}>
{$name}
</option>
{/foreach}
</select>
</div>
</div>
</div>
</div>
</form>
<form class="form-notificationlist js-notifications pbl" name="notificationlist" method="post">
<div id="activitylist" class="notification-list" {if $paginatorData } data-paginator='{$paginatorData}'{/if}>
{$activitylist['html']|safe}
</div>
</form>
{$deleteall|safe}
<div class="pull-right">
{$activitylist['pagination']|safe}
</div>
<form method="post" class="form-inline form-select-filter pieform">
<div class="form-group">
<label for="notifications_type">{str section='activity' tag='type'}:</label>
<div class="input-group select-group with-help">
<div class="input-group-addon" id="icon-addon-filter">
<span class="icon icon-filter"></span>
</div>
<div class="select form-group">
<div class="picker">
<select class="form-control select" id="notifications_type" name="type">
{foreach from=$options item=name key=t}
<option value="{$t}"{if $type == $t} selected{/if}>
{$name}
</option>
{/foreach}
</select>
</div>
</div>
{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
</div>
</div>
</form>
</div>
{else}
<div class="mtxl ptxl" id="notifications">
......
......@@ -8,7 +8,6 @@
&.form-group {
margin-left: 11px;
.with-heading & {
margin-left: 15px;
}
......@@ -65,7 +64,7 @@
z-index: 2;
}
select {
@include appearance(none);
appearance: none;
background: transparent;
height: $input-height-base;
left: 0;
......@@ -88,3 +87,4 @@
}
}
......@@ -21,7 +21,7 @@
z-index: 2;
}
select.form-control {
@include appearance(none);
appearance: none;
position: relative;
padding-right: 30px;
background: transparent;
......
......@@ -133,7 +133,7 @@
.panel-heading {
border: 0;
a {
@include text-shadow(1px 0 0 #fff);
text-shadow: 1px 0 0 #fff;
}
}
......@@ -194,7 +194,7 @@
legend h4,
legend h3 {
a {
@include text-shadow(1px 0 0 #fff);
text-shadow: 1px 0 0 #fff;
background-color: darken(#f5f5f5, 1%);
border: 1px solid $panel-default-border;
border-bottom: 0;
......
......@@ -4,8 +4,6 @@
@import "utilities/brand-variables"; // Import our brand variables
@import "utilities/bootstrap-variables";
@import "utilities/custom-variables";
@import "compass";
@import "../../../lib/bootstrap/assets/stylesheets/bootstrap/mixins";
@import "utilities/mixins";
......
......@@ -20,7 +20,7 @@
}
.text-watermark {
@include text-shadow(0 1px 0 #fff);
text-shadow: 0 1px 0 #fff;
opacity: 0.3;
}
......
......@@ -8,7 +8,7 @@ body, p {
h1 {
@extend .page-header;
.admin & {
@include text-shadow(1px 1px 0 rgba(#fff, 0.5));
text-shadow: 1px 1px 0 rgba(#fff, 0.5);
color: #555;
border-bottom-color: #ddd;
}
......
......@@ -46,44 +46,6 @@
}
}
// Text shadow (Compass)
$default-text-shadow-color: #aaaaaa;
$default-text-shadow-h-offset: 0px;
$default-text-shadow-v-offset: 0px;
$default-text-shadow-blur: 1px;
$default-text-shadow-spread: false;
@mixin text-shadow($shadow...) {
$shadow: if(length($shadow) > 0, $shadow, default);
$default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
$shadows-without-spread: join((), (), comma);
$shadows: join((), (), comma);
$has-spread: false;
@each $layer in $shadow {
$layer: if($layer == "default", $default, $layer);
@if length($layer) > 4 {
$has-spread: true;
$shadows-without-spread: append($shadows-without-spread, nth($layer, 1) nth($layer, 2) nth($layer, 3) nth($layer, 5));
$shadows: append($shadows, $layer);
}
@else {
$shadows-without-spread: append($shadows-without-spread, $layer);
$shadows: append($shadows, $layer);
}
}
@if $has-spread {
text-shadow: $shadows-without-spread;
}
text-shadow: $shadows;
}
// Remove default appearance
@mixin appearance($appearance) {
-webkit-appearance: $appearance;
-moz-appearance: $appearance;
appearance: $appearance;
}
@mixin ellipsis($no-wrap: true) {
@if $no-wrap {
white-space: nowrap;
......
.ui-datepicker{font-size:0.7em}.ui-datepicker .ui-datepicker-prev-year,.ui-datepicker .ui-datepicker-next-year{height:1.8em;position:absolute;top:2px;width:1.8em}.ui-datepicker .ui-datepicker-prev-year{left:2px}.ui-datepicker .ui-datepicker-next-year{right:2px}.ui-datepicker .ui-datepicker-prev-year span,.ui-datepicker .ui-datepicker-next-year span{display:block;left:50%;margin-left:-7px;margin-top:-8px;position:absolute;top:50%}.ui-datepicker .ui-datepicker-prev-year-hover,.ui-datepicker .ui-datepicker-next-year-hover{top:1px}.ui-datepicker .ui-datepicker-prev-year-hover span,.ui-datepicker .ui-datepicker-next-year-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-next-year span{margin-left:-9px}.ui-datepicker .ui-datepicker-next-year-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{margin-left:-7px}.ui-datepicker .ui-datepicker-prev-hover span,.ui-datepicker .ui-datepicker-next-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-prev{left:23px}.ui-datepicker .ui-datepicker-next{right:23px}.ui-datepicker .ui-datepicker-next span{margin-left:-9px}.ui-datepicker .ui-datepicker-next-hover span{margin-left:-8px}.ui-datepicker button.ui-priority-secondary{opacity:1;font-weight:700}.ui-icon-circle-triangle-wy{background-position:-144px -192px}.ui-icon-circle-triangle-ey{background-position:-112px -192px}.ui-timepicker-div .ui-widget-header{margin-bottom:8px}.ui-timepicker-div dl{text-align:left}.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}.ui-timepicker-div dl dd{margin:0 10px 10px 40%}.ui-timepicker-div td{font-size:90%}.ui-tpicker-grid-label{background:none;border:none;margin:0;padding:0}.ui-timepicker-rtl{direction:rtl}.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}.ui-timepicker-rtl dl dt{float:right;clear:right}.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px}
.ui-datepicker{font-size:.7em}.ui-datepicker .ui-datepicker-next-year,.ui-datepicker .ui-datepicker-prev-year{height:1.8em;position:absolute;top:2px;width:1.8em}.ui-datepicker .ui-datepicker-prev-year{left:2px}.ui-datepicker .ui-datepicker-next-year{right:2px}.ui-datepicker .ui-datepicker-next-year span,.ui-datepicker .ui-datepicker-prev-year span{display:block;left:50%;margin-left:-7px;margin-top:-8px;position:absolute;top:50%}.ui-datepicker .ui-datepicker-next-year-hover,.ui-datepicker .ui-datepicker-prev-year-hover{top:1px}.ui-datepicker .ui-datepicker-next-year-hover span,.ui-datepicker .ui-datepicker-prev-year-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-next-year span{margin-left:-9px}.ui-datepicker .ui-datepicker-next-year-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-next span,.ui-datepicker .ui-datepicker-prev span{margin-left:-7px}.ui-datepicker .ui-datepicker-next-hover span,.ui-datepicker .ui-datepicker-prev-hover span{margin-left:-8px}.ui-datepicker .ui-datepicker-prev{left:23px}.ui-datepicker .ui-datepicker-next{right:23px}.ui-datepicker .ui-datepicker-next span{margin-left:-9px}.ui-datepicker .ui-datepicker-next-hover span{margin-left:-8px}.ui-datepicker button.ui-priority-secondary{opacity:1;font-weight:700}.ui-icon-circle-triangle-wy{background-position:-144px -192px}.ui-icon-circle-triangle-ey{background-position:-112px -192px}.ui-timepicker-div .ui-widget-header{margin-bottom:8px}.ui-timepicker-div dl{text-align:left}.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}.ui-timepicker-div dl dd{margin:0 10px 10px 40%}.ui-timepicker-div td{font-size:90%}.ui-tpicker-grid-label{background:0 0;border:none;margin:0;padding:0}.ui-timepicker-rtl{direction:rtl}.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}.ui-timepicker-rtl dl dt{float:right;clear:right}.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
File mode changed from 100644 to 100755
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment