Pretty much the final product.
This commit is contained in:
parent
738ea5cc8d
commit
f09acdbf9b
Binary file not shown.
After Width: | Height: | Size: 464 B |
|
@ -0,0 +1,218 @@
|
||||||
|
/* =========================================================
|
||||||
|
* bootstrap-modal.js v2.0.3
|
||||||
|
* http://twitter.github.com/bootstrap/javascript.html#modals
|
||||||
|
* =========================================================
|
||||||
|
* Copyright 2012 Twitter, Inc.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
* ========================================================= */
|
||||||
|
|
||||||
|
|
||||||
|
!function ($) {
|
||||||
|
|
||||||
|
"use strict"; // jshint ;_;
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL CLASS DEFINITION
|
||||||
|
* ====================== */
|
||||||
|
|
||||||
|
var Modal = function (content, options) {
|
||||||
|
this.options = options
|
||||||
|
this.$element = $(content)
|
||||||
|
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
|
||||||
|
}
|
||||||
|
|
||||||
|
Modal.prototype = {
|
||||||
|
|
||||||
|
constructor: Modal
|
||||||
|
|
||||||
|
, toggle: function () {
|
||||||
|
return this[!this.isShown ? 'show' : 'hide']()
|
||||||
|
}
|
||||||
|
|
||||||
|
, show: function () {
|
||||||
|
var that = this
|
||||||
|
, e = $.Event('show')
|
||||||
|
|
||||||
|
this.$element.trigger(e)
|
||||||
|
|
||||||
|
if (this.isShown || e.isDefaultPrevented()) return
|
||||||
|
|
||||||
|
$('body').addClass('modal-open')
|
||||||
|
|
||||||
|
this.isShown = true
|
||||||
|
|
||||||
|
escape.call(this)
|
||||||
|
backdrop.call(this, function () {
|
||||||
|
var transition = $.support.transition && that.$element.hasClass('fade')
|
||||||
|
|
||||||
|
if (!that.$element.parent().length) {
|
||||||
|
that.$element.appendTo(document.body) //don't move modals dom position
|
||||||
|
}
|
||||||
|
|
||||||
|
that.$element
|
||||||
|
.show()
|
||||||
|
|
||||||
|
if (transition) {
|
||||||
|
that.$element[0].offsetWidth // force reflow
|
||||||
|
}
|
||||||
|
|
||||||
|
that.$element.addClass('in')
|
||||||
|
|
||||||
|
transition ?
|
||||||
|
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
|
||||||
|
that.$element.trigger('shown')
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
, hide: function (e) {
|
||||||
|
e && e.preventDefault()
|
||||||
|
|
||||||
|
var that = this
|
||||||
|
|
||||||
|
e = $.Event('hide')
|
||||||
|
|
||||||
|
this.$element.trigger(e)
|
||||||
|
|
||||||
|
if (!this.isShown || e.isDefaultPrevented()) return
|
||||||
|
|
||||||
|
this.isShown = false
|
||||||
|
|
||||||
|
$('body').removeClass('modal-open')
|
||||||
|
|
||||||
|
escape.call(this)
|
||||||
|
|
||||||
|
this.$element.removeClass('in')
|
||||||
|
|
||||||
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
|
hideWithTransition.call(this) :
|
||||||
|
hideModal.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL PRIVATE METHODS
|
||||||
|
* ===================== */
|
||||||
|
|
||||||
|
function hideWithTransition() {
|
||||||
|
var that = this
|
||||||
|
, timeout = setTimeout(function () {
|
||||||
|
that.$element.off($.support.transition.end)
|
||||||
|
hideModal.call(that)
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
this.$element.one($.support.transition.end, function () {
|
||||||
|
clearTimeout(timeout)
|
||||||
|
hideModal.call(that)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideModal(that) {
|
||||||
|
this.$element
|
||||||
|
.hide()
|
||||||
|
.trigger('hidden')
|
||||||
|
|
||||||
|
backdrop.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
function backdrop(callback) {
|
||||||
|
var that = this
|
||||||
|
, animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||||
|
|
||||||
|
if (this.isShown && this.options.backdrop) {
|
||||||
|
var doAnimate = $.support.transition && animate
|
||||||
|
|
||||||
|
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||||
|
.appendTo(document.body)
|
||||||
|
|
||||||
|
if (this.options.backdrop != 'static') {
|
||||||
|
this.$backdrop.click($.proxy(this.hide, this))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
|
||||||
|
|
||||||
|
this.$backdrop.addClass('in')
|
||||||
|
|
||||||
|
doAnimate ?
|
||||||
|
this.$backdrop.one($.support.transition.end, callback) :
|
||||||
|
callback()
|
||||||
|
|
||||||
|
} else if (!this.isShown && this.$backdrop) {
|
||||||
|
this.$backdrop.removeClass('in')
|
||||||
|
|
||||||
|
$.support.transition && this.$element.hasClass('fade')?
|
||||||
|
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
|
||||||
|
removeBackdrop.call(this)
|
||||||
|
|
||||||
|
} else if (callback) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeBackdrop() {
|
||||||
|
this.$backdrop.remove()
|
||||||
|
this.$backdrop = null
|
||||||
|
}
|
||||||
|
|
||||||
|
function escape() {
|
||||||
|
var that = this
|
||||||
|
if (this.isShown && this.options.keyboard) {
|
||||||
|
$(document).on('keyup.dismiss.modal', function ( e ) {
|
||||||
|
e.which == 27 && that.hide()
|
||||||
|
})
|
||||||
|
} else if (!this.isShown) {
|
||||||
|
$(document).off('keyup.dismiss.modal')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL PLUGIN DEFINITION
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
$.fn.modal = function (option) {
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this)
|
||||||
|
, data = $this.data('modal')
|
||||||
|
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
|
||||||
|
if (!data) $this.data('modal', (data = new Modal(this, options)))
|
||||||
|
if (typeof option == 'string') data[option]()
|
||||||
|
else if (options.show) data.show()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.modal.defaults = {
|
||||||
|
backdrop: true
|
||||||
|
, keyboard: true
|
||||||
|
, show: true
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.modal.Constructor = Modal
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL DATA-API
|
||||||
|
* ============== */
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
|
||||||
|
var $this = $(this), href
|
||||||
|
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||||
|
, option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
|
||||||
|
|
||||||
|
e.preventDefault()
|
||||||
|
$target.modal(option)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}(window.jQuery);
|
|
@ -94,6 +94,7 @@ module.exports = (grunt) ->
|
||||||
"assets/jquery/jquery-1.7.2.js"
|
"assets/jquery/jquery-1.7.2.js"
|
||||||
"assets/require.js"
|
"assets/require.js"
|
||||||
"assets/lawnchair/lawnchair.js"
|
"assets/lawnchair/lawnchair.js"
|
||||||
|
"assets/jquery/bootstrap-modal.js"
|
||||||
"assets/images/*.png"
|
"assets/images/*.png"
|
||||||
]
|
]
|
||||||
dest: "dist"
|
dest: "dist"
|
||||||
|
|
2
grunt.js
2
grunt.js
|
@ -111,7 +111,7 @@ module.exports = function(grunt) {
|
||||||
findNestedDependencies: true
|
findNestedDependencies: true
|
||||||
},
|
},
|
||||||
install: {
|
install: {
|
||||||
src: ["assets/jquery/jquery-1.7.2.js", "assets/require.js", "assets/lawnchair/lawnchair.js", "assets/images/*.png"],
|
src: ["assets/jquery/jquery-1.7.2.js", "assets/require.js", "assets/lawnchair/lawnchair.js", "assets/jquery/bootstrap-modal.js", "assets/images/*.png"],
|
||||||
dest: "dist"
|
dest: "dist"
|
||||||
},
|
},
|
||||||
mocha: {
|
mocha: {
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
.edit-priority
|
.edit-priority
|
||||||
%input.edit-priority-field(type="text" value="<%= p.name %>" data-pos="<%= p.pos %>" data-ty="<%= type %>")
|
%input.edit-priority-field(type="text" value="<%= p.name %>" data-pos="<%= p.pos %>" data-ty="<%= type %>")
|
||||||
%button.delete-priority-field(data-for="<%= p.pos %>")
|
%button.delete-priority-field(data-for="<%= p.pos %>") ×
|
||||||
|
|
|
@ -12,6 +12,10 @@
|
||||||
%title Priority / Ignore
|
%title Priority / Ignore
|
||||||
|
|
||||||
%body
|
%body
|
||||||
|
#gear
|
||||||
|
#gearbutton
|
||||||
|
%img(src="gear.png")
|
||||||
|
|
||||||
#grid.container
|
#grid.container
|
||||||
.flow
|
.flow
|
||||||
.row-fluid
|
.row-fluid
|
||||||
|
@ -22,33 +26,30 @@
|
||||||
%h1#ignorize(data-pos="N" data-ty="ignore") Today I Will Ignore:
|
%h1#ignorize(data-pos="N" data-ty="ignore") Today I Will Ignore:
|
||||||
#ignorities
|
#ignorities
|
||||||
|
|
||||||
#message(style="display:none")
|
#message.modal.hide.fade
|
||||||
%h2 How to Use
|
.modal-header
|
||||||
|
%button.close(data-dismiss="modal" type="button") ×
|
||||||
|
%h3 Prioritize / Ignore
|
||||||
%p
|
%p
|
||||||
|
According to the Harvard School of Business, there are <a
|
||||||
<b>Priority / Ignore</b> is a simple project reminder. It is
|
href="http://blogs.hbr.org/bregman/2009/05/two-lists-you-should-look-at-e.html">two
|
||||||
not a to-do list or project manager. It's just a
|
lists</a> you should look at every morning, and perhaps
|
||||||
<i>reminder</i>. After <a
|
every chance you get: the list of things that are important
|
||||||
href="https://github.com/elfsternberg/rightnow">downloading
|
to you, and the list of things that you should ignore.
|
||||||
and installing <b>Priority / Ignore!</b> locally</a>, set the
|
|
||||||
index.html file as your home page, open a new tab and click on
|
|
||||||
either header.
|
|
||||||
|
|
||||||
%p
|
%p
|
||||||
|
Prioritize / Ignore is an extension of that idea: a
|
||||||
The idea is simple: every time you open your browser or click
|
reminder, each and every time you open your browser, of what
|
||||||
"New Tab," you'll get the <b>Priority / Ignore</b> page.
|
is important, and what is not.
|
||||||
Every day we should remind ourselves not only of what must be
|
|
||||||
done, but what we must put aside as trivial and distracting.
|
|
||||||
|
|
||||||
%p
|
%p
|
||||||
All the data is stored locally using the browser's own local
|
To use: Just click on either header. A new entry will open
|
||||||
storage mechanism. There is no server, and no data is ever
|
up in that list for you to fill out. Empty entries will be
|
||||||
sent anywhere. Everything on your screen is yours, kept as
|
deleted automatically.
|
||||||
secure as you keep your physical hardware.
|
|
||||||
|
|
||||||
%p
|
%p
|
||||||
This message will disappear as soon as you've created your
|
You can click on the gear icon in the lower
|
||||||
first entry. You can also <button id="preclose">Close it
|
left-hand corner any time you like to review this page.
|
||||||
now.</button>
|
.model-body
|
||||||
|
.model-footer
|
||||||
|
%a.btn(href="#" data-dismiss="modal") Close
|
||||||
|
|
|
@ -2,7 +2,8 @@ require.config
|
||||||
paths:
|
paths:
|
||||||
'jquery': 'jquery-1.7.2'
|
'jquery': 'jquery-1.7.2'
|
||||||
|
|
||||||
require ['jquery', 'priority_tmpl', 'edit_priority_tmpl', 'lawnchair'], ($, priority_template, edit_priority_template) ->
|
require ['jquery', 'lawnchair'], ($) ->
|
||||||
|
require ['priority_tmpl', 'edit_priority_tmpl', 'bootstrap-modal'], (priority_template, edit_priority_template) ->
|
||||||
|
|
||||||
class Prioritize
|
class Prioritize
|
||||||
|
|
||||||
|
@ -10,7 +11,6 @@ require ['jquery', 'priority_tmpl', 'edit_priority_tmpl', 'lawnchair'], ($, prio
|
||||||
@repo.get 'priorities', (p) =>
|
@repo.get 'priorities', (p) =>
|
||||||
@priorities = if p? and p.priorities? then p.priorities else []
|
@priorities = if p? and p.priorities? then p.priorities else []
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
$('body').on 'click', @render
|
$('body').on 'click', @render
|
||||||
$('#prioritize').on 'click', @editPriority
|
$('#prioritize').on 'click', @editPriority
|
||||||
$('#ignorize').on 'click', @editPriority
|
$('#ignorize').on 'click', @editPriority
|
||||||
|
@ -93,3 +93,9 @@ require ['jquery', 'priority_tmpl', 'edit_priority_tmpl', 'lawnchair'], ($, prio
|
||||||
prioritize = new Lawnchair {name: 'Prioritize'}, ->
|
prioritize = new Lawnchair {name: 'Prioritize'}, ->
|
||||||
handler = new Prioritize(this)
|
handler = new Prioritize(this)
|
||||||
handler.render()
|
handler.render()
|
||||||
|
|
||||||
|
$('#gearbutton').bind 'click', () => $('#message').modal()
|
||||||
|
|
||||||
|
this.get 'priorities', (p) ->
|
||||||
|
if not p? or not p.priorities? or p.priorities.length == 0
|
||||||
|
$('#message').modal()
|
||||||
|
|
295
src/style.less
295
src/style.less
|
@ -56,6 +56,8 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
font: 13pt/190% Montserrat,Calibri,Georgia,"Lucida Bright",Lucidabright,"Bitstream Vera Serif",serif;
|
font: 13pt/190% Montserrat,Calibri,Georgia,"Lucida Bright",Lucidabright,"Bitstream Vera Serif",serif;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
@ -517,43 +519,22 @@ ul + p {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#newcat h1, div.category, .editcat, .addstory, li.task {
|
#newcat h1, div.category, .editcat, .addstory, li.priority {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit-category, .edit-priority {
|
||||||
|
|
||||||
.edit-category, .edit-task {
|
.edit-priority-field {
|
||||||
padding: 4px 2px 0px 5px;
|
margin-top: 8px;
|
||||||
text-shadow: 0px 1px 0px #fff;
|
|
||||||
-webkit-border-radius: 20px;
|
|
||||||
-moz-border-radius: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
|
|
||||||
-webkit-box-shadow: 2px 1px 0px #efefef;
|
|
||||||
-moz-box-shadow: 2px 1px 0px #efefef;
|
|
||||||
box-shadow: 2px 1px 0px #efefef;
|
|
||||||
|
|
||||||
width: 80%;
|
|
||||||
input.edit-task-field {
|
|
||||||
width: 80%;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-left: 5px;
|
|
||||||
-webkit-border-radius: 20px;
|
|
||||||
-moz-border-radius: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button.delete-task-field {
|
.delete-priority-field {
|
||||||
margin-top: 4px;
|
padding: 0px 4px 3px 3px;
|
||||||
padding: 1px 4px 3px 3px;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: block;
|
display: inline-block;
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: #ff9f00;
|
background-color: #ff9f00;
|
||||||
|
vertical-align: middle;
|
||||||
color: #333;
|
color: #333;
|
||||||
-webkit-border-radius: 20px;
|
-webkit-border-radius: 20px;
|
||||||
-moz-border-radius: 20px;
|
-moz-border-radius: 20px;
|
||||||
|
@ -563,16 +544,248 @@ ul + p {
|
||||||
|
|
||||||
#message {
|
#message {
|
||||||
font-family: Constantina,Georgia,"Lucida Bright",Lucidabright,"Bitstream Vera Serif",serif;
|
font-family: Constantina,Georgia,"Lucida Bright",Lucidabright,"Bitstream Vera Serif",serif;
|
||||||
display: block;
|
|
||||||
position:absolute;
|
|
||||||
top: 1.0416666%;
|
|
||||||
right: 1.0416666%;
|
|
||||||
width: 35.0416666%;
|
|
||||||
max-width: 32em;
|
|
||||||
padding: 1.0416666%;
|
|
||||||
background:#eee;
|
|
||||||
border:1px solid #ddd;
|
|
||||||
-webkit-border-radius: 20px;
|
|
||||||
-moz-border-radius: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#gear {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gearbutton {
|
||||||
|
position: relative;
|
||||||
|
-webkit-border-top-left-radius: 2px;
|
||||||
|
-moz-border-radius-top-left: 2px;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
float: right;
|
||||||
|
margin-right: 0px;
|
||||||
|
background-color: black;
|
||||||
|
height: 20px;
|
||||||
|
img {
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 2px 2px 0px 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@zindexDropdown: 1000;
|
||||||
|
@zindexPopover: 1010;
|
||||||
|
@zindexTooltip: 1020;
|
||||||
|
@zindexFixedNavbar: 1030;
|
||||||
|
@zindexModalBackdrop: 1040;
|
||||||
|
@zindexModal: 1050;
|
||||||
|
|
||||||
|
// Opacity
|
||||||
|
.opacity(@opacity) {
|
||||||
|
opacity: @opacity / 100;
|
||||||
|
filter: ~"alpha(opacity=@{opacity})";
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-clip(@clip) {
|
||||||
|
-webkit-background-clip: @clip;
|
||||||
|
-moz-background-clip: @clip;
|
||||||
|
background-clip: @clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-open {
|
||||||
|
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
|
||||||
|
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
|
||||||
|
.popover { z-index: @zindexPopover + @zindexModal; }
|
||||||
|
.tooltip { z-index: @zindexTooltip + @zindexModal; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Background
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: @zindexModalBackdrop;
|
||||||
|
background-color: black;
|
||||||
|
// Fade for backdrop
|
||||||
|
&.fade { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop,
|
||||||
|
.modal-backdrop.fade.in {
|
||||||
|
.opacity(80);
|
||||||
|
}
|
||||||
|
|
||||||
|
#gradient {
|
||||||
|
.vertical(@startColor: #555, @endColor: #333) {
|
||||||
|
background-color: mix(@startColor, @endColor, 60%);
|
||||||
|
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||||
|
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||||
|
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||||
|
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
||||||
|
background-image: linear-gradient(top, @startColor, @endColor); // The standard
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBackground(@startColor, @endColor) {
|
||||||
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||||
|
.gradientBar(@startColor, @endColor);
|
||||||
|
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||||
|
|
||||||
|
// in these cases the gradient won't cover the background, so we override
|
||||||
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
||||||
|
background-color: @endColor;
|
||||||
|
*background-color: darken(@endColor, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: darken(@endColor, 10%) e("\9");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gradientBar(@primaryColor, @secondaryColor) {
|
||||||
|
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||||
|
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||||
|
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@btnBackground: #fff;
|
||||||
|
@btnBackgroundHighlight: darken(#fff, 10%);
|
||||||
|
@btnBorder: #ccc;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 10px 4px;
|
||||||
|
margin-bottom: 0; // For input.btn
|
||||||
|
font-size: @baseFontSize;
|
||||||
|
line-height: @baseLineHeight;
|
||||||
|
*line-height: 20px;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
.buttonBackground(@btnBackground, @btnBackgroundHighlight);
|
||||||
|
border: 1px solid @btnBorder;
|
||||||
|
*border: 0; // Remove the border to prevent IE7's black border on input:focus
|
||||||
|
border-bottom-color: darken(@btnBorder, 10%);
|
||||||
|
.border-radius(4px);
|
||||||
|
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hover state
|
||||||
|
.btn:hover {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: darken(white, 10%);
|
||||||
|
*background-color: darken(white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
|
||||||
|
background-position: 0 -15px;
|
||||||
|
|
||||||
|
// transition is only when going to hover, otherwise the background
|
||||||
|
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
||||||
|
.transition(background-position .1s linear);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus state for keyboard and accessibility
|
||||||
|
.btn:focus {
|
||||||
|
.tab-focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-focus() {
|
||||||
|
// Default
|
||||||
|
outline: thin dotted #333;
|
||||||
|
// Webkit
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active state
|
||||||
|
.btn.active,
|
||||||
|
.btn:active {
|
||||||
|
background-color: darken(#fff, 10%);
|
||||||
|
background-color: darken(#fff, 15%) e("\9");
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||||
|
}
|
||||||
|
// Disabled state
|
||||||
|
.btn.disabled,
|
||||||
|
.btn[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
background-color: darken(#fff, 10%);
|
||||||
|
background-image: none;
|
||||||
|
.opacity(65);
|
||||||
|
.box-shadow(none);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Base modal
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: @zindexModal;
|
||||||
|
overflow: auto;
|
||||||
|
width: 560px;
|
||||||
|
margin: -250px 0 0 -280px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #999;
|
||||||
|
border: 1px solid rgba(0,0,0,.3);
|
||||||
|
*border: 1px solid #999; /* IE6-7 */
|
||||||
|
.border-radius(6px);
|
||||||
|
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||||
|
.background-clip(padding-box);
|
||||||
|
&.fade {
|
||||||
|
.transition(e('opacity .3s linear, top .3s ease-out'));
|
||||||
|
top: -25%;
|
||||||
|
}
|
||||||
|
&.fade.in { top: 50%; }
|
||||||
|
}
|
||||||
|
.modal-header {
|
||||||
|
padding: 9px 15px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
// Close icon
|
||||||
|
.close { margin-top: 2px; float: left }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Body (where all modal content resides)
|
||||||
|
.modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
// Remove bottom margin if need be
|
||||||
|
.modal-form {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer (for actions)
|
||||||
|
.modal-footer {
|
||||||
|
padding: 14px 15px 15px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: right; // right align buttons
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
.border-radius(0 0 6px 6px);
|
||||||
|
.box-shadow(inset 0 1px 0 white);
|
||||||
|
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||||
|
|
||||||
|
// Properly space out buttons
|
||||||
|
.btn + .btn {
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
||||||
|
}
|
||||||
|
// but override that for button groups
|
||||||
|
.btn-group .btn + .btn {
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue