Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
cdf8fd2c by bootflat
Options

Modify Nav and Accordions

1 parent ed151127
Expand all
Inline Side-by-side
Showing 13 changed files with 84 additions and 334 deletions
......@@ -9,7 +9,6 @@ module.exports = function(grunt) {
'js/bootstrap.min.js',
'js/holder.js',
'bootflat/js/icheck.min.js',
'bootflat/js/jquery.collapse.js',
'js/application.js'
]
}
......
......@@ -800,8 +800,6 @@ blockquote {
}
.alert-dismissable .close {
color: black;
opacity: 0.7;
filter: alpha(opacity=70);
}
.alert-info {
background-color: #7cd1ef;
......@@ -1072,7 +1070,7 @@ blockquote {
background-color: #37bc9b;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #37bc9b;
border-color: #48cfad;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: white;
......@@ -1178,6 +1176,7 @@ blockquote {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.list-group-item {
border-color: transparent;
border-top-color: #e6e9ed;
}
.list-group-item:first-child {
......@@ -1584,83 +1583,59 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
* accordion
* --------------------------------------------------
*/
.accordion .accordion-header {
margin-top: 0;
font-size: 16px;
display: block;
}
.accordion .accordion-header a {
font-weight: normal;
font-size: 15px;
color: #aab2bd;
}
.accordion .accordion-header a:hover, .accordion .accordion-header a:focus, .accordion .accordion-header a:active {
color: #434a54;
text-decoration: none;
}
.accordion .accordion-header .glyphicon {
position: relative;
top: -1px;
font-size: 10px;
}
.accordion .accordion-header + div {
display: block !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
height: 0;
overflow: hidden;
.panel-group .panel {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.accordion .accordion-header.open + div {
height: auto;
.panel-group .panel + .panel {
margin-top: 0;
}
.accordion .accordion-header.open a, .accordion .accordion-header.open a:hover, .accordion .accordion-header.open a:focus, .accordion .accordion-header.open a:active {
color: #434a54;
text-decoration: none;
.panel-group .panel-heading {
padding: 0;
border-bottom-color: transparent;
}
.accordion .accordion-header.open .glyphicon {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
.panel-group .panel-heading + .panel-collapse .panel-body {
padding: 15px 0;
border-top-color: transparent;
}
.accordion .accordion-body {
.panel-group .panel-title a {
padding: 10px 0;
display: block;
}
.accordion-panel {
.panel-group-lists .panel {
border-bottom: 1px solid #e6e9ed;
background-color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.accordion-panel .accordion-header {
margin-bottom: 0;
border-top: 1px solid #e6e9ed;
}
.accordion-panel .accordion-header:first-child {
border-top: none;
.panel-group-lists .panel:first-child {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.accordion-panel .accordion-header:last-child {
.panel-group-lists .panel:last-child {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border-bottom: none;
}
.panel-group-lists .panel-heading + .panel-collapse .panel-body {
padding: 15px;
border-top-color: #e6e9ed;
}
.accordion-panel .accordion-header a, .accordion-panel .accordion-header a:hover, .accordion-panel .accordion-header a:active, .accordion-panel .accordion-header a:focus {
.panel-group-lists .panel-title a {
padding: 10px 15px;
display: block;
color: #434a54;
}
.accordion-panel .accordion-header.open {
background-color: #e6e9ed;
}
.accordion-panel .accordion-body {
padding: 10px;
.panel-group-lists .panel-title a:hover, .panel-group-lists .panel-title a:focus, .panel-group-lists .panel-title a:active {
color: #aab2bd;
}
/**
......
/*
* Collapse plugin for jQuery
* --
* source: http://github.com/danielstocks/jQuery-Collapse/
* site: http://webcloud.se/jQuery-Collapse
*
* @author Daniel Stocks (http://webcloud.se)
* Copyright 2013, Daniel Stocks
* Released under the MIT, BSD, and GPL Licenses.
*/
(function($, exports) {
// Constructor
function Collapse (el, options) {
options = options || {};
var _this = this,
query = options.query || "> :even";
$.extend(_this, {
$el: el,
options : options,
sections: [],
isAccordion : options.accordion || false,
db : options.persist ? jQueryCollapseStorage(el.get(0).id) : false
});
// Figure out what sections are open if storage is used
_this.states = _this.db ? _this.db.read() : [];
// For every pair of elements in given
// element, create a section
_this.$el.find(query).each(function() {
new jQueryCollapseSection($(this), _this);
});
// Capute ALL the clicks!
(function(scope) {
_this.$el.on("click", "[data-collapse-summary] " + (scope.options.clickQuery || ""),
$.proxy(_this.handleClick, scope));
_this.$el.bind("toggle close open",
$.proxy(_this.handleEvent, scope));
}(_this));
}
Collapse.prototype = {
handleClick: function(e, state) {
e.preventDefault();
state = state || "toggle";
var sections = this.sections,
l = sections.length;
while(l--) {
if($.contains(sections[l].$summary[0], e.target)) {
sections[l][state]();
break;
}
}
},
handleEvent: function(e) {
if(e.target == this.$el.get(0)) return this[e.type]();
this.handleClick(e, e.type);
},
open: function(eq) {
this._change("open", eq);
},
close: function(eq) {
this._change("close", eq);
},
toggle: function(eq) {
this._change("toggle", eq);
},
_change: function(action, eq) {
$.each(this.sections, function(i, section) {
section[action]();
});
}
};
// Section constructor
function Section($el, parent) {
if(!parent.options.clickQuery) $el.wrapInner('<a href="#"/>');
$.extend(this, {
isOpen : false,
$summary : $el.attr("data-collapse-summary",""),
$details : $el.next(),
options: parent.options,
parent: parent
});
parent.sections.push(this);
// Check current state of section
var state = parent.states[this._index()];
if(state === 0) {
this.close(true);
}
else if(this.$summary.is(".open") || state === 1) {
this.open(true);
} else {
this.close(true);
}
}
Section.prototype = {
toggle : function() {
this.isOpen ? this.close() : this.open();
},
close: function(bypass) {
this._changeState("close", bypass);
},
open: function(bypass) {
var _this = this;
if(_this.options.accordion && !bypass) {
$.each(_this.parent.sections, function(i, section) {
section.close();
});
}
_this._changeState("open", bypass);
},
_index: function() {
return $.inArray(this, this.parent.sections);
},
_changeState: function(state, bypass) {
var _this = this;
_this.isOpen = state == "open";
if($.isFunction(_this.options[state]) && !bypass) {
_this.options[state].apply(_this.$details);
} else {
_this.$details[_this.isOpen ? "show" : "hide"]();
}
_this.$summary.toggleClass("open", state !== "close");
_this.$details.attr("aria-hidden", state === "close");
_this.$summary.attr("aria-expanded", state === "open");
_this.$summary.trigger(state === "open" ? "opened" : "closed", _this);
if(_this.parent.db) {
_this.parent.db.write(_this._index(), _this.isOpen);
}
}
};
// Expose in jQuery API
$.fn.extend({
collapse: function(options, scan) {
var nodes = (scan) ? $("body").find("[data-collapse]") : $(this);
return nodes.each(function() {
var settings = (scan) ? {} : options,
values = $(this).attr("data-collapse") || "";
$.each(values.split(" "), function(i,v) {
if(v) settings[v] = true;
});
new Collapse($(this), settings);
});
}
});
//jQuery DOM Ready
$(function() {
$.fn.collapse(false, true);
});
// Expose constructor to
// global namespace
exports.jQueryCollapse = Collapse;
exports.jQueryCollapseSection = Section;
})(window.jQuery, window);
// Variables
//------------------------------------------------------
$accordion-header-border-color: $lightgray-dark !default;
$accordion-border-color: $lightgray-dark !default;
$accordion-panel-header-color: $lightgray-dark !default;
$accordion-panel-background-color: $white !default;
$accordion-panel-font-color: $darkgray-dark !default;
$accordion-panel-font-color-hover: $mediumgray-dark !default;
$accordion-panel-radius: 4px !default;
$accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
$accordion-panel-background-color: $white !default;
// Exports
......@@ -20,82 +21,53 @@ $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
* accordion
* --------------------------------------------------
*/
.accordion {
& &-header {
.panel-group {
& .panel {
@include radius($type: border-radius, $value: 0);
background-color: transparent;
@include box-shadow($value: none);
}
& .panel+.panel {
margin-top: 0;
font-size: 16px;
display: block;
& a {
font-weight: normal;
font-size: 15px;
color: $accordion-panel-font-color-hover
}
& a:hover,
& a:focus,
& a:active {
color: $accordion-panel-font-color;
text-decoration: none;
}
& .glyphicon {
position: relative;
top: -1px;
font-size: 10px;
}
& + div {
display: block !important;
@include transition (all 0.3s ease);
height: 0;
overflow: hidden;
}
&.open + div {
height: auto;
}
&.open a,
&.open a:hover,
&.open a:focus,
&.open a:active {
color: $accordion-panel-font-color;
text-decoration: none;
}
&.open .glyphicon {
@include transform($value: rotate(-30deg));
}
}
& .accordion-body {
& .panel-heading {
padding: 0;
border-bottom-color: transparent;
}
& .panel-heading+.panel-collapse .panel-body {
padding: 15px 0;
border-top-color: transparent;
}
& .panel-title a {
padding: 10px 0;
display: block;
}
}
.accordion-panel {
background-color: $accordion-panel-background-color;
@include radius($type: border-radius, $value: $accordion-panel-radius);
@include box-shadow($value: $accordion-panel-shadow);
& .accordion-header {
margin-bottom: 0;
border-top: 1px solid $accordion-header-border-color;
&:first-child {
border-top: none;
@include radius($type: border-radius, $value: $accordion-panel-radius $accordion-panel-radius 0 0);
}
&:last-child {
@include radius($type: border-radius, $value: 0 0 $accordion-panel-radius $accordion-panel-radius);
}
& a,
& a:hover,
& a:active,
& a:focus {
padding: 10px 15px;
display: block;
color: $accordion-panel-font-color;
}
&.open {
background-color: $accordion-panel-header-color;
}
.panel-group-lists {
& .panel {
border-bottom: 1px solid $accordion-border-color;
background-color: $accordion-panel-background-color;
@include box-shadow($value: $accordion-panel-shadow);
}
& .panel:first-child {
@include radius($type: border-radius, $value: $accordion-panel-radius $accordion-panel-radius 0 0);
}
& .panel:last-child {
@include radius($type: border-radius, $value: 0 0 $accordion-panel-radius $accordion-panel-radius);
border-bottom: none;
}
& .panel-heading+.panel-collapse .panel-body {
padding: 15px;
border-top-color: $accordion-border-color;
}
& .panel-title a {
padding: 10px 15px;
color: $accordion-panel-font-color;
}
& .accordion-body {
padding: 10px;
& .panel-title a:hover,
& .panel-title a:focus,
& .panel-title a:active {
color: $accordion-panel-font-color-hover;
}
}
......
......@@ -28,7 +28,6 @@ $alert-link-color: $mediumgray-light !default;
&-dismissable .close {
color: $alert-close-color;
@include opacity($opacity: 70, $filter: true);
}
@at-root &-info {
......
......@@ -37,6 +37,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
@include radius($type: border-radius, $value: $list-radius);
@include box-shadow($value: $list-shadow);
@at-root &-item {
border-color: transparent;
border-top-color: $list-border-color;
&:first-child {
border-top: none;
......
......@@ -74,7 +74,7 @@ $navbar-inverse-background-color: $black !default;
}
& .navbar-collapse,
& .navbar-form {
border-color: $navbar-background-color;
border-color: $navbar-item-background-color-hover;
}
& .navbar-nav > .open > a,
& .navbar-nav > .open > a:hover,
......
This diff could not be displayed because it is too large.
......@@ -4,48 +4,24 @@
!function ($) {
$(function(){
Holder.add_theme("new", { background: "#AC92EC", foreground: "#fff", size: 12 }).run()
Holder.add_theme("new", { background: "#AC92EC", foreground: "#fff", size: 12 }).run();
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
});
$('.checkbox input').iCheck({
checkboxClass: 'icheckbox_flat',
increaseArea: '20%'
})
});
$('.radio input').iCheck({
radioClass: 'iradio_flat',
increaseArea: '20%'
})
$("#accordion1").collapse({
accordion: true,
open: function() {
this.addClass("open");
this.css({ height: this.children().outerHeight() });
},
close: function() {
this.css({ height: "0" });
this.removeClass("open");
}
});
$("#accordion2").collapse({
accordion: true,
open: function() {
this.addClass("open");
this.css({ height: this.children().outerHeight() });
},
close: function() {
this.css({ height: "0" });
this.removeClass("open");
}
});
$('#accordion1').collapse();
$('#accordion2').collapse();
})
}(window.jQuery)
......
This diff could not be displayed because it is too large.