mirror of
https://github.com/wahyd4/cdnjs.git
synced 2026-08-09 04:46:00 +10:00
add bootcards v0.2.0
This commit is contained in:
Peter Dave Hello
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,733 @@
|
||||
/* bootcards 0.2.0 2014-08-29 */
|
||||
/* NAVBAR */
|
||||
|
||||
/* OFFCANVAS MENU */
|
||||
.offcanvas, .offcanvas-list {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 200px;
|
||||
overflow-y: auto;
|
||||
z-index:1050;
|
||||
height: 100%;
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
-moz-transform: translate3d(0px, 0px, 0px);
|
||||
-o-transform: translate3d(0px, 0px, 0px);
|
||||
-ms-transform: translate3d(0px, 0px, 0px);
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
-webkit-transition: 0.25s ease;
|
||||
-moz-transition: 0.25s ease;
|
||||
-o-transition: 0.25s ease;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
.offcanvas-left {
|
||||
left: -200px;
|
||||
}
|
||||
.offcanvas-left.active {
|
||||
-webkit-transform: translate3d(200px, 0px, 0px);
|
||||
-moz-transform: translate3d(200px, 0px, 0px);
|
||||
-o-transform: translate3d(200px, 0px, 0px);
|
||||
-ms-transform: translate3d(200px, 0px, 0px);
|
||||
transform: translate3d(200px, 0px, 0px);
|
||||
}
|
||||
|
||||
|
||||
/* OFFCANVAS LIST FOR TABLET PORTRAIT MODE */
|
||||
.offcanvas-list {
|
||||
width: 350px;
|
||||
left: -350px;
|
||||
}
|
||||
|
||||
.offcanvas-list.active {
|
||||
-webkit-transform: translate3d(350px, 0px, 0px);
|
||||
-moz-transform: translate3d(350px, 0px, 0px);
|
||||
-o-transform: translate3d(350px, 0px, 0px);
|
||||
-ms-transform: translate3d(350px, 0px, 0px);
|
||||
transform: translate3d(350px, 0px, 0px);
|
||||
}
|
||||
|
||||
.offcanvas-list-title {
|
||||
position:fixed;
|
||||
background: rgba(247,247,247,.98);
|
||||
height: 45px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 44px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.offcanvaslist-toggle.active {
|
||||
-webkit-transform: translate3d(50px, 0px, 0px);
|
||||
-moz-transform: translate3d(50px, 0px, 0px);
|
||||
-o-transform: translate3d(50px, 0px, 0px);
|
||||
-ms-transform: translate3d(50px, 0px, 0px);
|
||||
transform: translate3d(50px, 0px, 0px);
|
||||
}
|
||||
.offcanvaslist-toggle {
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
-moz-transform: translate3d(0px, 0px, 0px);
|
||||
-o-transform: translate3d(0px, 0px, 0px);
|
||||
-ms-transform: translate3d(0px, 0px, 0px);
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
-webkit-transition: 0.25s ease;
|
||||
-moz-transition: 0.25s ease;
|
||||
-o-transition: 0.25s ease;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.bootcards-container {
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
-moz-transform: translate3d(0px, 0px, 0px);
|
||||
-o-transform: translate3d(0px, 0px, 0px);
|
||||
-ms-transform: translate3d(0px, 0px, 0px);
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
-webkit-transition: 0.25s ease;
|
||||
-moz-transition: 0.25s ease;
|
||||
-o-transition: 0.25s ease;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.bootcards-container.active-left {
|
||||
-webkit-transform: translate3d(200px, 0px, 0px);
|
||||
-moz-transform: translate3d(200px, 0px, 0px);
|
||||
-o-transform: translate3d(200px, 0px, 0px);
|
||||
-ms-transform: translate3d(200px, 0px, 0px);
|
||||
transform: translate3d(200px, 0px, 0px);
|
||||
}
|
||||
.bootcards-container.active-right {
|
||||
-webkit-transform: translate3d(-200px, 0px, 0px);
|
||||
-moz-transform: translate3d(-200px, 0px, 0px);
|
||||
-o-transform: translate3d(-200px, 0px, 0px);
|
||||
-ms-transform: translate3d(-200px, 0px, 0px);
|
||||
transform: translate3d(-200px, 0px, 0px);
|
||||
}
|
||||
|
||||
|
||||
/* BUTTONS */
|
||||
|
||||
.btn i { margin-right: 5px; }
|
||||
|
||||
.btn i.icon-only { margin-right: 0; }
|
||||
|
||||
|
||||
/* LISTS */
|
||||
|
||||
.list-group-item {
|
||||
margin-left: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:active,
|
||||
a.list-group-item.active,
|
||||
a.list-group-item.active:hover,
|
||||
a.list-group-item.active:focus {
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.list-group-item-text {
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.list-group-item-heading:last-child,
|
||||
.list-group-item-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-group-item .row div > .list-group-item-heading:last-child,
|
||||
.list-group-item .row div > .list-group-item-text:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.list-group-item .row div:last-child > .list-group-item-heading:last-child,
|
||||
.list-group-item .row div:last-child > .list-group-item-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*@media (max-width:768px) {
|
||||
.bootcards-list .list-group-item-heading,
|
||||
.bootcards-list .list-group-item-text {
|
||||
padding-left: 55px;
|
||||
}
|
||||
}*/
|
||||
|
||||
.list-group-item > img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.list-group-item i {
|
||||
opacity: 0.3;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-group-item img,
|
||||
.list-group-item i {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.panel > .list-group .list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Disclosure Indicators */
|
||||
|
||||
a.list-group-item:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-top: -7px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.list-group.bootcards-no-indicators a.list-group-item:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* List - Subheadings */
|
||||
|
||||
.list-group-item.bootcards-list-subheading {
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
a.list-group-item.bootcards-list-subheading {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
a.list-group-item.bootcards-list-subheading:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-top: -7px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
a.list-group-item.bootcards-list-subheading.collapsed:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* List - AZ Picker */
|
||||
|
||||
.bootcards-az-picker {
|
||||
position: fixed;
|
||||
width: 25px;
|
||||
margin: 0 0 0 -26px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.bootcards-az-picker li {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.bootcards-az-picker li a {
|
||||
height: 3.4%; /* 100% / 27 */
|
||||
display: block;
|
||||
padding: 0.35em 5px;
|
||||
}
|
||||
.bootcards-az-picker li:first-child a {
|
||||
padding-top:10px;
|
||||
}
|
||||
|
||||
.bootcards-az-picker li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* List - Search Form */
|
||||
|
||||
.bootcards-list .form-group {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.bootcards-list .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootcards-list form input, .bootcards-list .search-form input {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.bootcards-list form i.fa-search, .bootcards-list .search-form i.fa-search {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bootcards-list form .btn, .bootcards-list .search-form .btn {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.bootcards-desktop-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.panel-default .panel-heading {
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.panel-body > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-footer small,
|
||||
.modal-footer small {
|
||||
color: #aaa;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 22px; /* Line up vertically with .btn */
|
||||
}
|
||||
|
||||
|
||||
/* FORM CARD */
|
||||
|
||||
.btn label {
|
||||
margin: 0;
|
||||
font-weight: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bootcards-clearinput {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 11px;
|
||||
color: #ccc;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.bootcards-clearinput i {
|
||||
line-height: 1;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.form-horizontal .form-group div div {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Toggle – based on Ratchet.css */
|
||||
|
||||
.bootcards-toggle {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 74px;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 20px;
|
||||
-webkit-transition-duration: .2s;
|
||||
-moz-transition-duration: .2s;
|
||||
transition-duration: .2s;
|
||||
-webkit-transition-property: background-color, border;
|
||||
-moz-transition-property: background-color, border;
|
||||
transition-property: background-color, border;
|
||||
}
|
||||
.bootcards-toggle .bootcards-toggle-handle {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
z-index: 2;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 100px;
|
||||
-webkit-transition-duration: .2s;
|
||||
-moz-transition-duration: .2s;
|
||||
transition-duration: .2s;
|
||||
-webkit-transition-property: -webkit-transform, border, width;
|
||||
-moz-transition-property: -moz-transform, border, width;
|
||||
transition-property: transform, border, width;
|
||||
}
|
||||
.bootcards-toggle:before {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 11px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
content: "Off";
|
||||
}
|
||||
.bootcards-toggle.active {
|
||||
background-color: #5cb85c;
|
||||
border: 2px solid #5cb85c;
|
||||
}
|
||||
.bootcards-toggle.active .bootcards-toggle-handle {
|
||||
border-color: #5cb85c;
|
||||
-webkit-transform: translate3d(44px, 0, 0);
|
||||
-ms-transform: translate3d(44px, 0, 0);
|
||||
transform: translate3d(44px, 0, 0);
|
||||
}
|
||||
.bootcards-toggle.active:before {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
color: #fff;
|
||||
content: "On";
|
||||
}
|
||||
.bootcards-toggle input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* CALENDAR */
|
||||
|
||||
.bootcards-calendar .panel-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bootcards-calendar .fc-header-left,
|
||||
.bootcards-calendar .fc-header-right {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bootcards-calendar .fc-header-title h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bootcards-calendar .fc-header .fc-button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bootcards-calendar .fc-content th:first-child,
|
||||
.bootcards-calendar .fc-content td:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.bootcards-calendar .fc-content th:last-child,
|
||||
.bootcards-calendar .fc-content td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABLE CARD */
|
||||
|
||||
.table > thead > tr > th:first-child,
|
||||
.table > tbody > tr > th:first-child,
|
||||
.table > tfoot > tr > th:first-child,
|
||||
.table > thead > tr > td:first-child,
|
||||
.table > tbody > tr > td:first-child,
|
||||
.table > tfoot > tr > td:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.table > thead > tr > th:last-child,
|
||||
.table > tbody > tr > th:last-child,
|
||||
.table > tfoot > tr > th:last-child,
|
||||
.table > thead > tr > td:last-child,
|
||||
.table > tbody > tr > td:last-child,
|
||||
.table > tfoot > tr > td:last-child {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* FILE CARD */
|
||||
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:url('../fonts/icomoon.eot?-n2q9vw');
|
||||
src:url('../fonts/icomoon.eot?#iefix-n2q9vw') format('embedded-opentype'),
|
||||
url('../fonts/icomoon.woff?-n2q9vw') format('woff'),
|
||||
url('../fonts/icomoon.ttf?-n2q9vw') format('truetype'),
|
||||
url('../fonts/icomoon.svg?-n2q9vw#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: 'icomoon';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-file-pdf:before {
|
||||
content: "\e4e2";
|
||||
}
|
||||
.icon-file-word:before {
|
||||
content: "\e4e4";
|
||||
}
|
||||
.icon-file-excel:before {
|
||||
content: "\e4e5";
|
||||
}
|
||||
.icon-file-powerpoint:before {
|
||||
content: "\e4e7";
|
||||
}
|
||||
.icon-file:before {
|
||||
content: "\e08d";
|
||||
}
|
||||
|
||||
.bootcards-file .list-group-item:first-child {
|
||||
position: relative;
|
||||
padding-left: 74px;
|
||||
}
|
||||
|
||||
.bootcards-file .list-group-item:first-child i {
|
||||
font-size: 64px;
|
||||
width: 64px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.bootcards-file .list-group-item *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* CHART CARD */
|
||||
|
||||
.bootcards-chart .bootcards-chart-canvas {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SUMMARY CARD */
|
||||
|
||||
.bootcards-summary .panel-body {
|
||||
padding: 7px 25px;
|
||||
}
|
||||
|
||||
.bootcards-summary .panel-body > .row > div {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.bootcards-summary .panel-body .bootcards-summary-item {
|
||||
background: #f5f5f5;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
padding: 25px 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
@media (max-width:400px) {
|
||||
.bootcards-summary .panel-body .bootcards-summary-item {
|
||||
padding: 15px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bootcards-summary .panel-body .bootcards-summary-item:hover {
|
||||
text-decoration: none;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.bootcards-summary .panel-body .bootcards-summary-item > i {
|
||||
color: #bbb;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bootcards-summary .panel-body .bootcards-summary-item h4 {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
|
||||
.bootcards-summary .panel-body .bootcards-summary-item .badge,
|
||||
.bootcards-summary .panel-body .bootcards-summary-item .label {
|
||||
position: absolute;
|
||||
top:10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* RICH TEXT CARD */
|
||||
|
||||
.bootcards-richtext > .panel-body {
|
||||
padding: 25px;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bootcards-richtext > .panel-body > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
body {
|
||||
padding-top: 80px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
/* NAVBAR */
|
||||
|
||||
.btn-back,
|
||||
.btn-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar button[data-toggle="offcanvas"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* LISTS */
|
||||
|
||||
.list-group label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a.list-group-item.active:before {
|
||||
color: #e1edf7;
|
||||
}
|
||||
|
||||
/* List Search */
|
||||
|
||||
.bootcards-list .panel-body > form > .row > div:first-child,
|
||||
.bootcards-list .panel-body > .search-form > .row > div:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.panel-title {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.panel-content form {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* MODAL */
|
||||
|
||||
.modal-header {
|
||||
overflow: hidden;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* FORMS */
|
||||
|
||||
.bootcards-clearinput {
|
||||
right: 23px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .btn-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .bootcards-desktop-footer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DOCUMENTATION */
|
||||
|
||||
.bootcards-documentation-list > .panel {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.bootcards-documentation-list > .panel {
|
||||
width: 163px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.bootcards-documentation-list > .panel {
|
||||
width: 213px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.bootcards-documentation-list > .panel {
|
||||
width: 263px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="512">
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="256" />
|
||||
<glyph unicode="" d="M451.716 380.285l-71.432 71.431c-15.556 15.556-46.284 28.284-68.284 28.284h-240c-22 0-40-18-40-40v-432c0-22 18-40 40-40h368c22 0 40 18 40 40v304c0 22-12.728 52.729-28.284 68.285zM429.089 357.657c1.565-1.565 3.125-3.487 4.64-5.657h-81.729v81.728c2.17-1.515 4.092-3.075 5.657-4.64l71.432-71.431zM448 8c0-4.336-3.664-8-8-8h-368c-4.336 0-8 3.664-8 8v432c0 4.336 3.664 8 8 8h240c2.416 0 5.127-0.305 8-0.852v-127.148h127.148c0.547-2.873 0.852-5.583 0.852-8v-304z" />
|
||||
<glyph unicode="" d="M421.006 185.26c-6.824 6.723-21.957 10.283-44.986 10.586-15.589 0.172-34.351-1.201-54.085-3.964-8.837 5.099-17.946 10.647-25.094 17.329-19.231 17.958-35.284 42.886-45.288 70.297 0.652 2.56 1.207 4.81 1.724 7.106 0 0 10.833 61.53 7.965 82.333-0.395 2.853-0.637 3.681-1.404 5.898l-0.941 2.417c-2.948 6.796-8.724 13.997-17.783 13.604l-5.458 0.172c-10.1 0-18.332-5.166-20.493-12.887-6.569-24.217 0.209-60.446 12.491-107.369l-3.144-7.643c-8.794-21.438-19.815-43.030-29.539-62.079l-1.264-2.476c-10.23-20.019-19.512-37.013-27.927-51.411l-8.688-4.594c-0.632-0.334-15.522-8.209-19.014-10.322-29.628-17.691-49.261-37.77-52.518-53.708-1.036-5.085-0.265-11.593 5.007-14.607l8.403-4.229c3.645-1.826 7.489-2.751 11.427-2.751 21.102 0 45.6 26.286 79.348 85.183 38.965 12.684 83.327 23.228 122.207 29.045 29.629-16.684 66.071-28.273 89.071-28.273 4.084 0 7.606 0.389 10.466 1.148 4.411 1.168 8.129 3.683 10.396 7.096 4.463 6.716 5.367 15.966 4.156 25.438-0.361 2.812-2.606 6.288-5.035 8.661zM105.823 72.976c3.848 10.521 19.080 31.322 41.602 49.778 1.416 1.148 4.904 4.416 8.097 7.451-23.551-37.562-39.323-52.533-49.699-57.229zM239.217 380.157c6.783 0 10.642-17.097 10.962-33.127 0.32-16.030-3.429-27.28-8.079-35.604-3.851 12.324-5.713 31.75-5.713 44.452 0 0-0.283 24.279 2.83 24.279zM199.426 161.253c4.725 8.458 9.641 17.378 14.665 26.839 12.246 23.158 19.979 41.278 25.739 56.173 11.455-20.842 25.722-38.56 42.493-52.756 2.092-1.771 4.309-3.551 6.637-5.325-34.105-6.748-63.582-14.955-89.534-24.931zM414.452 163.174c-2.077-1.299-8.027-2.050-11.854-2.050-12.353 0-27.636 5.647-49.063 14.833 8.234 0.609 15.781 0.919 22.55 0.919 12.391 0 16.060 0.054 28.175-3.036s12.269-9.367 10.192-10.666zM451.716 380.285l-71.432 71.431c-15.556 15.556-46.284 28.284-68.284 28.284h-240c-22 0-40-18-40-40v-432c0-22 18-40 40-40h368c22 0 40 18 40 40v304c0 22-12.728 52.729-28.284 68.285zM429.089 357.657c1.565-1.565 3.125-3.487 4.64-5.657h-81.729v81.728c2.17-1.515 4.092-3.075 5.657-4.64l71.432-71.431zM448 8c0-4.336-3.664-8-8-8h-368c-4.336 0-8 3.664-8 8v432c0 4.336 3.664 8 8 8h240c2.416 0 5.127-0.305 8-0.852v-127.148h127.148c0.547-2.873 0.852-5.583 0.852-8v-304z" />
|
||||
<glyph unicode="" d="M319.889 242.054h22.106l-25.506-113.089-33.163 159.005h-53.275l-38.557-159.005-28.908 159.005h-55.697l56.546-255.941h54.419l38.147 151.354 34.128-151.354h50.168l64.815 255.941h-85.223zM451.716 380.285l-71.432 71.431c-15.556 15.556-46.284 28.284-68.284 28.284h-240c-22 0-40-18-40-40v-432c0-22 18-40 40-40h368c22 0 40 18 40 40v304c0 22-12.728 52.729-28.284 68.285zM429.089 357.657c1.565-1.565 3.125-3.487 4.64-5.657h-81.729v81.728c2.17-1.515 4.092-3.075 5.657-4.64l71.432-71.431zM448 8c0-4.336-3.664-8-8-8h-368c-4.336 0-8 3.664-8 8v432c0 4.336 3.664 8 8 8h240c2.416 0 5.127-0.305 8-0.852v-127.148h127.148c0.547-2.873 0.852-5.583 0.852-8v-304z" />
|
||||
<glyph unicode="" d="M371.514 288h-67.647l-47.866-70.516-47.87 70.516h-67.644l81.081-121.232-91.487-134.768h131.12v45.788h-30.278l25.078 37.497 55.698-83.285h70.221l-91.488 134.768zM451.716 380.285l-71.432 71.431c-15.556 15.556-46.284 28.284-68.284 28.284h-240c-22 0-40-18-40-40v-432c0-22 18-40 40-40h368c22 0 40 18 40 40v304c0 22-12.728 52.729-28.284 68.285zM429.089 357.657c1.565-1.565 3.125-3.487 4.64-5.657h-81.729v81.728c2.17-1.515 4.092-3.075 5.657-4.64l71.432-71.431zM448 8c0-4.336-3.664-8-8-8h-368c-4.336 0-8 3.664-8 8v432c0 4.336 3.664 8 8 8h240c2.416 0 5.127-0.305 8-0.852v-127.148h127.148c0.547-2.873 0.852-5.583 0.852-8v-304z" />
|
||||
<glyph unicode="" d="M96 224h96v-32h-96v32zM96 160h96v-32h-96v32zM96 96h96v-32h-96v32zM451.716 380.285l-71.432 71.431c-15.556 15.556-46.284 28.284-68.284 28.284h-240c-22 0-40-18-40-40v-432c0-22 18-40 40-40h368c22 0 40 18 40 40v304c0 22-12.728 52.729-28.284 68.285zM429.089 357.657c1.565-1.565 3.125-3.487 4.64-5.657h-81.729v81.728c2.17-1.515 4.092-3.075 5.657-4.64l71.432-71.431zM448 8c0-4.336-3.664-8-8-8h-368c-4.336 0-8 3.664-8 8v432c0 4.336 3.664 8 8 8h240c2.416 0 5.127-0.305 8-0.852v-127.148h127.148c0.547-2.873 0.852-5.583 0.852-8v-304zM288 128h94.396c-7.413-36.516-39.693-64-78.396-64-44.183 0-80 35.817-80 80 0 38.703 27.485 70.983 64 78.396v-94.396zM336 256c44.183 0 80-35.817 80-80 0-5.479-0.554-10.83-1.604-16h-94.396v94.396c5.17 1.050 10.521 1.604 16 1.604z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,425 @@
|
||||
var bootcards = bootcards || {};
|
||||
|
||||
bootcards._isXS = null;
|
||||
|
||||
|
||||
bootcards.init = function( options ) {
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
//initialize the off canvas menu
|
||||
bootcards._initOffCanvasMenu(
|
||||
$('.offcanvas'),
|
||||
$('.bootcards-container'),
|
||||
options.offCanvasHideOnMainClick
|
||||
);
|
||||
|
||||
if (options.enableTabletPortraitMode) {
|
||||
|
||||
bootcards._initTabletPortraitMode();
|
||||
|
||||
}
|
||||
|
||||
if (options.disableRubberBanding) {
|
||||
|
||||
bootcards.disableRubberBanding();
|
||||
}
|
||||
|
||||
|
||||
} );
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Get the Bootstrap enviroment we're in.
|
||||
* Found at http://stackoverflow.com/questions/14441456/how-to-detect-which-device-view-youre-on-using-twitter-bootstrap-api/15150381#15150381
|
||||
* Function writen by Raphael_ (http://stackoverflow.com/users/1661358/raphael)
|
||||
*/
|
||||
bootcards.findBootstrapEnvironment = function() {
|
||||
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
|
||||
var envValues = ["xs", "sm", "md", "lg"];
|
||||
|
||||
$el = $('<div>');
|
||||
$el.appendTo($('body'));
|
||||
|
||||
for (var i = envValues.length - 1; i >= 0; i--) {
|
||||
var envVal = envValues[i];
|
||||
|
||||
$el.addClass('hidden-'+envVal);
|
||||
if ($el.is(':hidden')) {
|
||||
$el.remove();
|
||||
return envs[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
bootcards.isXS = function() {
|
||||
if (this._isXS === null ) {
|
||||
this._isXS = (this.findBootstrapEnvironment() == "ExtraSmall");
|
||||
}
|
||||
return this._isXS;
|
||||
};
|
||||
|
||||
/*
|
||||
* Disable rubberbanding effect in iOS.
|
||||
* Based on the 'Baking Soda Paste' technique written by Armagan Amcalar at
|
||||
* http://blog.armaganamcalar.com/post/70847348271/baking-soda-paste
|
||||
*/
|
||||
bootcards.disableRubberBanding = function() {
|
||||
document.body.addEventListener('touchstart', function() {
|
||||
document.body.addEventListener('touchmove', function moveListener(e) {
|
||||
document.body.removeEventListener('touchmove', moveListener);
|
||||
|
||||
var el = e.target;
|
||||
|
||||
do {
|
||||
|
||||
var h = parseInt(window.getComputedStyle(el, null).height, 10);
|
||||
var sH = el.scrollHeight;
|
||||
|
||||
if (h < sH) {
|
||||
return;
|
||||
}
|
||||
} while (el != document.body && el.parentElement != document.body && (el = el.parentElement));
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Initialize an off-canvas menu. This takes 3 arguments:
|
||||
* - the off canvas element to slide in
|
||||
* - the main content area to push away when the off canvas element slides in
|
||||
* - a boolean indicating if the off canvas menu should be hidden when the main content area is clicked
|
||||
*
|
||||
* An off canvas menu is required for the portrait-single-pane mode
|
||||
*
|
||||
*/
|
||||
bootcards._initOffCanvasMenu = function(offCanvasMenuEl, mainContentEl, hideOnMainClick) {
|
||||
|
||||
var $toggleEl = $('[data-toggle=offcanvas]');
|
||||
|
||||
if ($toggleEl.length===0 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.offCanvasToggleEl = $toggleEl;
|
||||
this.offCanvasMenuEl = offCanvasMenuEl;
|
||||
this.mainContentEl = mainContentEl;
|
||||
|
||||
this.offCanvasToggleEl
|
||||
.on("click", function() {
|
||||
bootcards.offCanvasMenuEl.toggleClass("active");
|
||||
if (bootcards.mainContentEl) { bootcards.mainContentEl.toggleClass("active-left"); }
|
||||
});
|
||||
|
||||
//hide the offcanvas if you click on the body
|
||||
if (hideOnMainClick && bootcards.mainContentEl) {
|
||||
this.mainContentEl.on("click", function() {
|
||||
bootcards.offCanvasMenuEl.removeClass('active');
|
||||
var $this = $(this);
|
||||
if ($this.hasClass('active-left') ) {
|
||||
$this.removeClass('active-left');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//hide the offcanvas menu
|
||||
bootcards.hideOffCanvasMenu = function() {
|
||||
|
||||
this.offCanvasMenuEl.removeClass('active');
|
||||
this.mainContentEl.removeClass('active');
|
||||
|
||||
};
|
||||
|
||||
|
||||
bootcards._initTabletPortraitMode = function() {
|
||||
|
||||
$(window)
|
||||
.on( 'orientationchange', function() {
|
||||
setTimeout( function() {
|
||||
bootcards._setOrientation(false);
|
||||
} , 200);
|
||||
event.stopPropagation();
|
||||
} )
|
||||
.on( 'load', bootcards._setOrientation(true) );
|
||||
|
||||
};
|
||||
|
||||
bootcards._setOrientation = function(init) {
|
||||
|
||||
var isPortrait = (window.orientation===0 || window.orientation===180);
|
||||
|
||||
if (isPortrait) {
|
||||
|
||||
//get the columns classes for the list and details
|
||||
if (!bootcards.listEl) {
|
||||
|
||||
bootcards.listEl = $('.bootcards-list');
|
||||
bootcards.listColClass = '';
|
||||
bootcards.listTitle = bootcards.listEl.data('title');
|
||||
|
||||
$.each(bootcards.listEl.prop('class').split(' '), function(idx, value) {
|
||||
if (value.indexOf('col')===0) {
|
||||
bootcards.listColClass += value + ' ';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//immediately hide the list on load in portrait mode
|
||||
if (init) {
|
||||
bootcards.listEl.hide();
|
||||
}
|
||||
|
||||
if (!bootcards.cardsEl) {
|
||||
|
||||
bootcards.cardsEl = $('.bootcards-cards');
|
||||
bootcards.cardsColClass = '';
|
||||
|
||||
$.each(bootcards.cardsEl.prop('class').split(' '), function(idx, value) {
|
||||
if (value.indexOf('col')===0) {
|
||||
bootcards.cardsColClass += value + ' ';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (!bootcards.listOffcanvasToggle) {
|
||||
//create the list title & toggle elements
|
||||
|
||||
//create the button that shows/hides the list
|
||||
bootcards.listOffcanvasToggle = $('<button type="button" class="btn btn-default pull-left offcanvaslist-toggle">' +
|
||||
'<i class="fa fa-lg fa-angle-left"></i><span>' + bootcards.listTitle + '</span>' +
|
||||
'</button>')
|
||||
.on("click", function() {
|
||||
|
||||
//on click: show the list & title
|
||||
bootcards.listEl.toggleClass("active");
|
||||
bootcards.listTitleEl.toggleClass("active");
|
||||
|
||||
});
|
||||
|
||||
//create the title element of the list offcanvas
|
||||
bootcards.listTitleEl = $("<div class='offcanvas-list offcanvas-list-title'>" +
|
||||
"<span>" + bootcards.listTitle + "</span></div>");
|
||||
|
||||
//create the title element for the menu offcanvas, insert it before the menu offcanvas
|
||||
bootcards.offCanvasMenuTitleEl = $("<div class='offcanvas-list offcanvas-list-title'>" +
|
||||
"<span>Menu</span></div>");
|
||||
bootcards.offCanvasMenuEl.before( bootcards.offCanvasMenuTitleEl );
|
||||
|
||||
//clone the button to show/hide the menu in the list title
|
||||
bootcards.offCanvasToggleEl.clone(false)
|
||||
.prependTo(bootcards.listTitleEl)
|
||||
.on("click", function() {
|
||||
bootcards.offCanvasMenuEl.toggleClass("active");
|
||||
bootcards.offCanvasMenuTitleEl.toggleClass("active");
|
||||
})
|
||||
.children("i")
|
||||
.removeClass('fa-bars')
|
||||
.addClass('fa-angle-left');
|
||||
|
||||
//add the title element and the toggle button to the top navbar
|
||||
$('.navbar-header')
|
||||
.after(
|
||||
bootcards.listTitleEl, bootcards.listOffcanvasToggle);
|
||||
|
||||
//hide the list & list title when to body is clicked
|
||||
bootcards.mainContentEl.on("click", function() {
|
||||
|
||||
bootcards.listEl.removeClass('active');
|
||||
bootcards.listTitleEl.removeClass('active');
|
||||
bootcards.offCanvasMenuTitleEl.removeClass('active');
|
||||
|
||||
});
|
||||
|
||||
bootcards.listEl.on("click", function() {
|
||||
|
||||
var $this = $(this);
|
||||
$this.removeClass('active');
|
||||
bootcards.listTitleEl.removeClass('active');
|
||||
|
||||
//stop propagation when an element in the list offcanvas is clicked
|
||||
event.stopPropagation();
|
||||
|
||||
});
|
||||
|
||||
//increase the width of the menu: set it to the same size as the list
|
||||
bootcards.offCanvasMenuEl
|
||||
.addClass('offcanvas-list')
|
||||
.on("click", function() {
|
||||
|
||||
//hide the menu on click
|
||||
|
||||
var $this = $(this);
|
||||
$this.removeClass('active');
|
||||
bootcards.offCanvasMenuTitleEl.removeClass('active');
|
||||
bootcards.listEl.removeClass('active');
|
||||
bootcards.listTitleEl.removeClass('active');
|
||||
|
||||
//stop propagation when an element in the list offcanvas is clicked
|
||||
event.stopPropagation();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//hide the menu button
|
||||
bootcards.offCanvasToggleEl.hide();
|
||||
|
||||
//show the button to toggle the list
|
||||
bootcards.listOffcanvasToggle.show();
|
||||
|
||||
bootcards.listEl
|
||||
.removeClass(bootcards.listColClass)
|
||||
.addClass('offcanvas-list')
|
||||
.show();
|
||||
|
||||
//set the column to full width
|
||||
bootcards.cardsEl
|
||||
.removeClass(bootcards.cardsColClass)
|
||||
.addClass('col-xs-12');
|
||||
|
||||
//hide the az picker
|
||||
$('.bootcards-az-picker').hide();
|
||||
|
||||
} else {
|
||||
|
||||
//show the menu button
|
||||
bootcards.offCanvasToggleEl.show();
|
||||
|
||||
//hide the button to show the list, remove the list & title
|
||||
if ( bootcards.listOffcanvasToggle ) {
|
||||
bootcards.listOffcanvasToggle.hide();
|
||||
bootcards.listTitleEl.removeClass("active");
|
||||
|
||||
bootcards.listEl
|
||||
.removeClass('offcanvas-list active')
|
||||
.addClass(bootcards.listColClass);
|
||||
|
||||
bootcards.cardsEl
|
||||
.removeClass('col-xs-12')
|
||||
.addClass( bootcards.cardsColClass );
|
||||
}
|
||||
|
||||
$('.bootcards-az-picker').show();
|
||||
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//initialize the AZ picker
|
||||
bootcards.initAZPicker = function( target ) {
|
||||
|
||||
var azPicker = $(target);
|
||||
|
||||
if (azPicker.length > 0) {
|
||||
|
||||
// Register the letter click events
|
||||
$("a", azPicker).off().on('click', function(event) {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
event.stopPropagation();
|
||||
bootcards._jumpToLetter($this, event);
|
||||
return false;
|
||||
|
||||
});
|
||||
|
||||
//move the az picker to a different location so we can give it a fixed position
|
||||
var $list = azPicker.parents(".bootcards-list")
|
||||
|
||||
if ( $list.length > 0) {
|
||||
|
||||
//determine the width of the list column
|
||||
var classList = $list.attr('class').split(/\s+/);
|
||||
var colClass = "";
|
||||
$.each( classList, function(index, entry) {
|
||||
if (entry.indexOf('col-') ===0 ) {
|
||||
colClass = entry;
|
||||
return;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//translate the column name to one of the Bootstrap 'push' classes
|
||||
var colSize = colClass.substring( colClass.lastIndexOf('-') + 1 );
|
||||
var colPushClass = colClass.substring( 0, colClass.lastIndexOf('-')) + "-push-" + colSize;
|
||||
|
||||
//move the picker as a direct child of the main bootcards container so we can give it fixed positioning
|
||||
azPicker
|
||||
.appendTo( $('.bootcards-container') )
|
||||
.addClass(colPushClass);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//jump to a specific letter in the list
|
||||
bootcards._jumpToLetter = function(letterelement, event) {
|
||||
|
||||
var $list = $('#list');
|
||||
|
||||
$list.animate( {
|
||||
scrollTop : 0
|
||||
}, 0);
|
||||
|
||||
var letter = letterelement.text().toLowerCase();
|
||||
var sel = "#list .list-group a";
|
||||
if ($(".bootcards-list-subheading").length > 0){
|
||||
sel = ".bootcards-list-subheading";
|
||||
}
|
||||
|
||||
var $sel = $(sel);
|
||||
|
||||
var scrolled = false;
|
||||
$sel.each( function(idx, entry) {
|
||||
var $entry = $(entry);
|
||||
|
||||
var summary = "";
|
||||
if ($entry.prop('tagName').toLowerCase() == "a"){
|
||||
summary = $entry.find("h4").text();
|
||||
}else{
|
||||
summary = $entry.text();
|
||||
}
|
||||
|
||||
var firstletter = summary.substring(0, 1).toLowerCase();
|
||||
var scrollTop = null;
|
||||
|
||||
if (firstletter == letter) {
|
||||
scrollTop = $entry.offset().top - 60;
|
||||
} else if (firstletter > letter) {
|
||||
scrollTop = $entry.offset().top - 120;
|
||||
}
|
||||
|
||||
if (scrollTop !== null) {
|
||||
$list.animate( {
|
||||
scrollTop : scrollTop
|
||||
}, 0);
|
||||
scrolled = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!scrolled) {
|
||||
|
||||
var $last = $( $sel[$sel.length-1] );
|
||||
$list.animate( {
|
||||
scrollTop : $last.offset().top - 120
|
||||
}, 0);
|
||||
}
|
||||
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "bootcards",
|
||||
"filename": "js/bootcards.min.js",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"description": "A cards-based UI framework for mobile and desktop apps, built on top of Bootstrap",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
Reference in New Issue
Block a user