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) { ...@@ -9,7 +9,6 @@ module.exports = function(grunt) {
9 'js/bootstrap.min.js', 9 'js/bootstrap.min.js',
10 'js/holder.js', 10 'js/holder.js',
11 'bootflat/js/icheck.min.js', 11 'bootflat/js/icheck.min.js',
12 'bootflat/js/jquery.collapse.js',
13 'js/application.js' 12 'js/application.js'
14 ] 13 ]
15 } 14 }
......
...@@ -800,8 +800,6 @@ blockquote { ...@@ -800,8 +800,6 @@ blockquote {
800 } 800 }
801 .alert-dismissable .close { 801 .alert-dismissable .close {
802 color: black; 802 color: black;
803 opacity: 0.7;
804 filter: alpha(opacity=70);
805 } 803 }
806 .alert-info { 804 .alert-info {
807 background-color: #7cd1ef; 805 background-color: #7cd1ef;
...@@ -1072,7 +1070,7 @@ blockquote { ...@@ -1072,7 +1070,7 @@ blockquote {
1072 background-color: #37bc9b; 1070 background-color: #37bc9b;
1073 } 1071 }
1074 .navbar-default .navbar-collapse, .navbar-default .navbar-form { 1072 .navbar-default .navbar-collapse, .navbar-default .navbar-form {
1075 border-color: #37bc9b; 1073 border-color: #48cfad;
1076 } 1074 }
1077 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 1075 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
1078 color: white; 1076 color: white;
...@@ -1178,6 +1176,7 @@ blockquote { ...@@ -1178,6 +1176,7 @@ blockquote {
1178 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 1176 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1179 } 1177 }
1180 .list-group-item { 1178 .list-group-item {
1179 border-color: transparent;
1181 border-top-color: #e6e9ed; 1180 border-top-color: #e6e9ed;
1182 } 1181 }
1183 .list-group-item:first-child { 1182 .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 ...@@ -1584,83 +1583,59 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
1584 * accordion 1583 * accordion
1585 * -------------------------------------------------- 1584 * --------------------------------------------------
1586 */ 1585 */
1587 .accordion .accordion-header { 1586 .panel-group .panel {
1588 margin-top: 0; 1587 -webkit-border-radius: 0;
1589 font-size: 16px; 1588 -moz-border-radius: 0;
1590 display: block; 1589 border-radius: 0;
1591 } 1590 background-color: transparent;
1592 .accordion .accordion-header a { 1591 -webkit-box-shadow: none;
1593 font-weight: normal; 1592 -moz-box-shadow: none;
1594 font-size: 15px; 1593 box-shadow: none;
1595 color: #aab2bd;
1596 }
1597 .accordion .accordion-header a:hover, .accordion .accordion-header a:focus, .accordion .accordion-header a:active {
1598 color: #434a54;
1599 text-decoration: none;
1600 }
1601 .accordion .accordion-header .glyphicon {
1602 position: relative;
1603 top: -1px;
1604 font-size: 10px;
1605 }
1606 .accordion .accordion-header + div {
1607 display: block !important;
1608 -webkit-transition: all 0.3s ease;
1609 -moz-transition: all 0.3s ease;
1610 transition: all 0.3s ease;
1611 height: 0;
1612 overflow: hidden;
1613 } 1594 }
1614 .accordion .accordion-header.open + div { 1595 .panel-group .panel + .panel {
1615 height: auto; 1596 margin-top: 0;
1616 } 1597 }
1617 .accordion .accordion-header.open a, .accordion .accordion-header.open a:hover, .accordion .accordion-header.open a:focus, .accordion .accordion-header.open a:active { 1598 .panel-group .panel-heading {
1618 color: #434a54; 1599 padding: 0;
1619 text-decoration: none; 1600 border-bottom-color: transparent;
1620 } 1601 }
1621 .accordion .accordion-header.open .glyphicon { 1602 .panel-group .panel-heading + .panel-collapse .panel-body {
1622 -webkit-transform: rotate(-30deg); 1603 padding: 15px 0;
1623 -moz-transform: rotate(-30deg); 1604 border-top-color: transparent;
1624 transform: rotate(-30deg);
1625 } 1605 }
1626 .accordion .accordion-body { 1606 .panel-group .panel-title a {
1627 padding: 10px 0; 1607 padding: 10px 0;
1608 display: block;
1628 } 1609 }
1629 1610
1630 .accordion-panel { 1611 .panel-group-lists .panel {
1612 border-bottom: 1px solid #e6e9ed;
1631 background-color: white; 1613 background-color: white;
1632 -webkit-border-radius: 4px;
1633 -moz-border-radius: 4px;
1634 border-radius: 4px;
1635 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 1614 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1636 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 1615 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1637 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 1616 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1638 } 1617 }
1639 .accordion-panel .accordion-header { 1618 .panel-group-lists .panel:first-child {
1640 margin-bottom: 0;
1641 border-top: 1px solid #e6e9ed;
1642 }
1643 .accordion-panel .accordion-header:first-child {
1644 border-top: none;
1645 -webkit-border-radius: 4px 4px 0 0; 1619 -webkit-border-radius: 4px 4px 0 0;
1646 -moz-border-radius: 4px 4px 0 0; 1620 -moz-border-radius: 4px 4px 0 0;
1647 border-radius: 4px 4px 0 0; 1621 border-radius: 4px 4px 0 0;
1648 } 1622 }
1649 .accordion-panel .accordion-header:last-child { 1623 .panel-group-lists .panel:last-child {
1650 -webkit-border-radius: 0 0 4px 4px; 1624 -webkit-border-radius: 0 0 4px 4px;
1651 -moz-border-radius: 0 0 4px 4px; 1625 -moz-border-radius: 0 0 4px 4px;
1652 border-radius: 0 0 4px 4px; 1626 border-radius: 0 0 4px 4px;
1627 border-bottom: none;
1628 }
1629 .panel-group-lists .panel-heading + .panel-collapse .panel-body {
1630 padding: 15px;
1631 border-top-color: #e6e9ed;
1653 } 1632 }
1654 .accordion-panel .accordion-header a, .accordion-panel .accordion-header a:hover, .accordion-panel .accordion-header a:active, .accordion-panel .accordion-header a:focus { 1633 .panel-group-lists .panel-title a {
1655 padding: 10px 15px; 1634 padding: 10px 15px;
1656 display: block;
1657 color: #434a54; 1635 color: #434a54;
1658 } 1636 }
1659 .accordion-panel .accordion-header.open { 1637 .panel-group-lists .panel-title a:hover, .panel-group-lists .panel-title a:focus, .panel-group-lists .panel-title a:active {
1660 background-color: #e6e9ed; 1638 color: #aab2bd;
1661 }
1662 .accordion-panel .accordion-body {
1663 padding: 10px;
1664 } 1639 }
1665 1640
1666 /** 1641 /**
......
1 /*
2 * Collapse plugin for jQuery
3 * --
4 * source: http://github.com/danielstocks/jQuery-Collapse/
5 * site: http://webcloud.se/jQuery-Collapse
6 *
7 * @author Daniel Stocks (http://webcloud.se)
8 * Copyright 2013, Daniel Stocks
9 * Released under the MIT, BSD, and GPL Licenses.
10 */
11
12 (function($, exports) {
13
14 // Constructor
15 function Collapse (el, options) {
16 options = options || {};
17 var _this = this,
18 query = options.query || "> :even";
19
20 $.extend(_this, {
21 $el: el,
22 options : options,
23 sections: [],
24 isAccordion : options.accordion || false,
25 db : options.persist ? jQueryCollapseStorage(el.get(0).id) : false
26 });
27
28 // Figure out what sections are open if storage is used
29 _this.states = _this.db ? _this.db.read() : [];
30
31 // For every pair of elements in given
32 // element, create a section
33 _this.$el.find(query).each(function() {
34 new jQueryCollapseSection($(this), _this);
35 });
36
37 // Capute ALL the clicks!
38 (function(scope) {
39 _this.$el.on("click", "[data-collapse-summary] " + (scope.options.clickQuery || ""),
40 $.proxy(_this.handleClick, scope));
41
42 _this.$el.bind("toggle close open",
43 $.proxy(_this.handleEvent, scope));
44
45 }(_this));
46 }
47
48 Collapse.prototype = {
49 handleClick: function(e, state) {
50 e.preventDefault();
51 state = state || "toggle";
52 var sections = this.sections,
53 l = sections.length;
54 while(l--) {
55 if($.contains(sections[l].$summary[0], e.target)) {
56 sections[l][state]();
57 break;
58 }
59 }
60 },
61 handleEvent: function(e) {
62 if(e.target == this.$el.get(0)) return this[e.type]();
63 this.handleClick(e, e.type);
64 },
65 open: function(eq) {
66 this._change("open", eq);
67 },
68 close: function(eq) {
69 this._change("close", eq);
70 },
71 toggle: function(eq) {
72 this._change("toggle", eq);
73 },
74 _change: function(action, eq) {
75 $.each(this.sections, function(i, section) {
76 section[action]();
77 });
78 }
79 };
80
81 // Section constructor
82 function Section($el, parent) {
83
84 if(!parent.options.clickQuery) $el.wrapInner('<a href="#"/>');
85
86 $.extend(this, {
87 isOpen : false,
88 $summary : $el.attr("data-collapse-summary",""),
89 $details : $el.next(),
90 options: parent.options,
91 parent: parent
92 });
93 parent.sections.push(this);
94
95 // Check current state of section
96 var state = parent.states[this._index()];
97
98 if(state === 0) {
99 this.close(true);
100 }
101 else if(this.$summary.is(".open") || state === 1) {
102 this.open(true);
103 } else {
104 this.close(true);
105 }
106 }
107
108 Section.prototype = {
109 toggle : function() {
110 this.isOpen ? this.close() : this.open();
111 },
112 close: function(bypass) {
113 this._changeState("close", bypass);
114 },
115 open: function(bypass) {
116 var _this = this;
117 if(_this.options.accordion && !bypass) {
118 $.each(_this.parent.sections, function(i, section) {
119 section.close();
120 });
121 }
122 _this._changeState("open", bypass);
123 },
124 _index: function() {
125 return $.inArray(this, this.parent.sections);
126 },
127 _changeState: function(state, bypass) {
128
129 var _this = this;
130 _this.isOpen = state == "open";
131 if($.isFunction(_this.options[state]) && !bypass) {
132 _this.options[state].apply(_this.$details);
133 } else {
134 _this.$details[_this.isOpen ? "show" : "hide"]();
135 }
136
137 _this.$summary.toggleClass("open", state !== "close");
138 _this.$details.attr("aria-hidden", state === "close");
139 _this.$summary.attr("aria-expanded", state === "open");
140 _this.$summary.trigger(state === "open" ? "opened" : "closed", _this);
141 if(_this.parent.db) {
142 _this.parent.db.write(_this._index(), _this.isOpen);
143 }
144 }
145 };
146
147 // Expose in jQuery API
148 $.fn.extend({
149 collapse: function(options, scan) {
150 var nodes = (scan) ? $("body").find("[data-collapse]") : $(this);
151 return nodes.each(function() {
152 var settings = (scan) ? {} : options,
153 values = $(this).attr("data-collapse") || "";
154 $.each(values.split(" "), function(i,v) {
155 if(v) settings[v] = true;
156 });
157 new Collapse($(this), settings);
158 });
159 }
160 });
161
162 //jQuery DOM Ready
163 $(function() {
164 $.fn.collapse(false, true);
165 });
166
167 // Expose constructor to
168 // global namespace
169 exports.jQueryCollapse = Collapse;
170 exports.jQueryCollapseSection = Section;
171
172 })(window.jQuery, window);
1 // Variables 1 // Variables
2 //------------------------------------------------------ 2 //------------------------------------------------------
3 $accordion-header-border-color: $lightgray-dark !default; 3 $accordion-border-color: $lightgray-dark !default;
4 4
5 $accordion-panel-header-color: $lightgray-dark !default;
6 $accordion-panel-background-color: $white !default;
7 $accordion-panel-font-color: $darkgray-dark !default; 5 $accordion-panel-font-color: $darkgray-dark !default;
8 $accordion-panel-font-color-hover: $mediumgray-dark !default; 6 $accordion-panel-font-color-hover: $mediumgray-dark !default;
9 $accordion-panel-radius: 4px !default; 7 $accordion-panel-radius: 4px !default;
8
10 $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default; 9 $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
11 10
11 $accordion-panel-background-color: $white !default;
12
12 13
13 14
14 // Exports 15 // Exports
...@@ -20,82 +21,53 @@ $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa ...@@ -20,82 +21,53 @@ $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
20 * accordion 21 * accordion
21 * -------------------------------------------------- 22 * --------------------------------------------------
22 */ 23 */
23 24 .panel-group {
24 .accordion { 25 & .panel {
25 & &-header { 26 @include radius($type: border-radius, $value: 0);
27 background-color: transparent;
28 @include box-shadow($value: none);
29 }
30 & .panel+.panel {
26 margin-top: 0; 31 margin-top: 0;
27 font-size: 16px;
28 display: block;
29 & a {
30 font-weight: normal;
31 font-size: 15px;
32 color: $accordion-panel-font-color-hover
33 }
34 & a:hover,
35 & a:focus,
36 & a:active {
37 color: $accordion-panel-font-color;
38 text-decoration: none;
39 }
40 & .glyphicon {
41 position: relative;
42 top: -1px;
43 font-size: 10px;
44 }
45 & + div {
46 display: block !important;
47 @include transition (all 0.3s ease);
48 height: 0;
49 overflow: hidden;
50 }
51 &.open + div {
52 height: auto;
53 }
54 &.open a,
55 &.open a:hover,
56 &.open a:focus,
57 &.open a:active {
58 color: $accordion-panel-font-color;
59 text-decoration: none;
60 }
61 &.open .glyphicon {
62 @include transform($value: rotate(-30deg));
63 }
64 } 32 }
65 & .accordion-body { 33 & .panel-heading {
34 padding: 0;
35 border-bottom-color: transparent;
36 }
37 & .panel-heading+.panel-collapse .panel-body {
38 padding: 15px 0;
39 border-top-color: transparent;
40 }
41 & .panel-title a {
66 padding: 10px 0; 42 padding: 10px 0;
43 display: block;
67 } 44 }
68 } 45 }
69 46 .panel-group-lists {
70 .accordion-panel { 47 & .panel {
71 background-color: $accordion-panel-background-color; 48 border-bottom: 1px solid $accordion-border-color;
72 @include radius($type: border-radius, $value: $accordion-panel-radius); 49 background-color: $accordion-panel-background-color;
73 @include box-shadow($value: $accordion-panel-shadow); 50 @include box-shadow($value: $accordion-panel-shadow);
74 51 }
75 & .accordion-header { 52 & .panel:first-child {
76 margin-bottom: 0; 53 @include radius($type: border-radius, $value: $accordion-panel-radius $accordion-panel-radius 0 0);
77 border-top: 1px solid $accordion-header-border-color; 54 }
78 &:first-child { 55 & .panel:last-child {
79 border-top: none; 56 @include radius($type: border-radius, $value: 0 0 $accordion-panel-radius $accordion-panel-radius);
80 @include radius($type: border-radius, $value: $accordion-panel-radius $accordion-panel-radius 0 0); 57 border-bottom: none;
81 } 58 }
82 &:last-child { 59 & .panel-heading+.panel-collapse .panel-body {
83 @include radius($type: border-radius, $value: 0 0 $accordion-panel-radius $accordion-panel-radius); 60 padding: 15px;
84 } 61 border-top-color: $accordion-border-color;
85 & a, 62 }
86 & a:hover, 63 & .panel-title a {
87 & a:active, 64 padding: 10px 15px;
88 & a:focus { 65 color: $accordion-panel-font-color;
89 padding: 10px 15px;
90 display: block;
91 color: $accordion-panel-font-color;
92 }
93 &.open {
94 background-color: $accordion-panel-header-color;
95 }
96 } 66 }
97 & .accordion-body { 67 & .panel-title a:hover,
98 padding: 10px; 68 & .panel-title a:focus,
69 & .panel-title a:active {
70 color: $accordion-panel-font-color-hover;
99 } 71 }
100 } 72 }
101 73
......
...@@ -28,7 +28,6 @@ $alert-link-color: $mediumgray-light !default; ...@@ -28,7 +28,6 @@ $alert-link-color: $mediumgray-light !default;
28 28
29 &-dismissable .close { 29 &-dismissable .close {
30 color: $alert-close-color; 30 color: $alert-close-color;
31 @include opacity($opacity: 70, $filter: true);
32 } 31 }
33 32
34 @at-root &-info { 33 @at-root &-info {
......
...@@ -37,6 +37,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa ...@@ -37,6 +37,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
37 @include radius($type: border-radius, $value: $list-radius); 37 @include radius($type: border-radius, $value: $list-radius);
38 @include box-shadow($value: $list-shadow); 38 @include box-shadow($value: $list-shadow);
39 @at-root &-item { 39 @at-root &-item {
40 border-color: transparent;
40 border-top-color: $list-border-color; 41 border-top-color: $list-border-color;
41 &:first-child { 42 &:first-child {
42 border-top: none; 43 border-top: none;
......
...@@ -74,7 +74,7 @@ $navbar-inverse-background-color: $black !default; ...@@ -74,7 +74,7 @@ $navbar-inverse-background-color: $black !default;
74 } 74 }
75 & .navbar-collapse, 75 & .navbar-collapse,
76 & .navbar-form { 76 & .navbar-form {
77 border-color: $navbar-background-color; 77 border-color: $navbar-item-background-color-hover;
78 } 78 }
79 & .navbar-nav > .open > a, 79 & .navbar-nav > .open > a,
80 & .navbar-nav > .open > a:hover, 80 & .navbar-nav > .open > a:hover,
......
This diff could not be displayed because it is too large.
...@@ -4,48 +4,24 @@ ...@@ -4,48 +4,24 @@
4 4
5 !function ($) { 5 !function ($) {
6 $(function(){ 6 $(function(){
7 7 Holder.add_theme("new", { background: "#AC92EC", foreground: "#fff", size: 12 }).run();
8 Holder.add_theme("new", { background: "#AC92EC", foreground: "#fff", size: 12 }).run()
9 8
10 $('.tooltip-demo').tooltip({ 9 $('.tooltip-demo').tooltip({
11 selector: "[data-toggle=tooltip]", 10 selector: "[data-toggle=tooltip]",
12 container: "body" 11 container: "body"
13 }) 12 });
14 13
15 $('.checkbox input').iCheck({ 14 $('.checkbox input').iCheck({
16 checkboxClass: 'icheckbox_flat', 15 checkboxClass: 'icheckbox_flat',
17 increaseArea: '20%' 16 increaseArea: '20%'
18 }) 17 });
19 18
20 $('.radio input').iCheck({ 19 $('.radio input').iCheck({
21 radioClass: 'iradio_flat', 20 radioClass: 'iradio_flat',
22 increaseArea: '20%' 21 increaseArea: '20%'
23 })
24
25 $("#accordion1").collapse({
26 accordion: true,
27 open: function() {
28 this.addClass("open");
29 this.css({ height: this.children().outerHeight() });
30 },
31 close: function() {
32 this.css({ height: "0" });
33 this.removeClass("open");
34 }
35 });
36
37 $("#accordion2").collapse({
38 accordion: true,
39 open: function() {
40 this.addClass("open");
41 this.css({ height: this.children().outerHeight() });
42 },
43 close: function() {
44 this.css({ height: "0" });
45 this.removeClass("open");
46 }
47 }); 22 });
48 23 $('#accordion1').collapse();
24 $('#accordion2').collapse();
49 }) 25 })
50 }(window.jQuery) 26 }(window.jQuery)
51 27
......
This diff could not be displayed because it is too large.