diff --git a/project.clj b/project.clj index 47c2c6df..1e00c29c 100644 --- a/project.clj +++ b/project.clj @@ -32,7 +32,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.5.2" +(defproject re-com "0.5.3" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"} diff --git a/run/resources/public/assets/css/bootstrap.css b/run/resources/public/assets/css/bootstrap.css new file mode 100644 index 00000000..037dd056 --- /dev/null +++ b/run/resources/public/assets/css/bootstrap.css @@ -0,0 +1,6203 @@ +/*! + * Bootstrap v3.2.0 (http://getbootstrap.com) + * Copyright 2011-2014 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background: transparent; +} +a:active, +a:hover { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + margin: .67em 0; + font-size: 2em; +} +mark { + color: #000; + background: #ff0; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sup { + top: -.5em; +} +sub { + bottom: -.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 1em 40px; +} +hr { + height: 0; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + margin: 0; + font: inherit; + color: inherit; +} +button { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} +input { + line-height: normal; +} +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +fieldset { + padding: .35em .625em .75em; + margin: 0 2px; + border: 1px solid #c0c0c0; +} +legend { + padding: 0; + border: 0; +} +textarea { + overflow: auto; +} +optgroup { + font-weight: bold; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +td, +th { + padding: 0; +} +@media print { + * { + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + select { + background: #fff !important; + } + .navbar { + display: none; + } + .table td, + .table th { + background-color: #fff !important; + } + .btn > .caret, + .dropup > .btn > .caret { + border-top-color: #000 !important; + } + .label { + border: 1px solid #000; + } + .table { + border-collapse: collapse !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; + } +} +@font-face { + font-family: 'Glyphicons Halflings'; + + src: url('../fonts/glyphicons-halflings-regular.eot'); + src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.glyphicon-asterisk:before { + content: "\2a"; +} +.glyphicon-plus:before { + content: "\2b"; +} +.glyphicon-euro:before { + content: "\20ac"; +} +.glyphicon-minus:before { + content: "\2212"; +} +.glyphicon-cloud:before { + content: "\2601"; +} +.glyphicon-envelope:before { + content: "\2709"; +} +.glyphicon-pencil:before { + content: "\270f"; +} +.glyphicon-glass:before { + content: "\e001"; +} +.glyphicon-music:before { + content: "\e002"; +} +.glyphicon-search:before { + content: "\e003"; +} +.glyphicon-heart:before { + content: "\e005"; +} +.glyphicon-star:before { + content: "\e006"; +} +.glyphicon-star-empty:before { + content: "\e007"; +} +.glyphicon-user:before { + content: "\e008"; +} +.glyphicon-film:before { + content: "\e009"; +} +.glyphicon-th-large:before { + content: "\e010"; +} +.glyphicon-th:before { + content: "\e011"; +} +.glyphicon-th-list:before { + content: "\e012"; +} +.glyphicon-ok:before { + content: "\e013"; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-zoom-in:before { + content: "\e015"; +} +.glyphicon-zoom-out:before { + content: "\e016"; +} +.glyphicon-off:before { + content: "\e017"; +} +.glyphicon-signal:before { + content: "\e018"; +} +.glyphicon-cog:before { + content: "\e019"; +} +.glyphicon-trash:before { + content: "\e020"; +} +.glyphicon-home:before { + content: "\e021"; +} +.glyphicon-file:before { + content: "\e022"; +} +.glyphicon-time:before { + content: "\e023"; +} +.glyphicon-road:before { + content: "\e024"; +} +.glyphicon-download-alt:before { + content: "\e025"; +} +.glyphicon-download:before { + content: "\e026"; +} +.glyphicon-upload:before { + content: "\e027"; +} +.glyphicon-inbox:before { + content: "\e028"; +} +.glyphicon-play-circle:before { + content: "\e029"; +} +.glyphicon-repeat:before { + content: "\e030"; +} +.glyphicon-refresh:before { + content: "\e031"; +} +.glyphicon-list-alt:before { + content: "\e032"; +} +.glyphicon-lock:before { + content: "\e033"; +} +.glyphicon-flag:before { + content: "\e034"; +} +.glyphicon-headphones:before { + content: "\e035"; +} +.glyphicon-volume-off:before { + content: "\e036"; +} +.glyphicon-volume-down:before { + content: "\e037"; +} +.glyphicon-volume-up:before { + content: "\e038"; +} +.glyphicon-qrcode:before { + content: "\e039"; +} +.glyphicon-barcode:before { + content: "\e040"; +} +.glyphicon-tag:before { + content: "\e041"; +} +.glyphicon-tags:before { + content: "\e042"; +} +.glyphicon-book:before { + content: "\e043"; +} +.glyphicon-bookmark:before { + content: "\e044"; +} +.glyphicon-print:before { + content: "\e045"; +} +.glyphicon-camera:before { + content: "\e046"; +} +.glyphicon-font:before { + content: "\e047"; +} +.glyphicon-bold:before { + content: "\e048"; +} +.glyphicon-italic:before { + content: "\e049"; +} +.glyphicon-text-height:before { + content: "\e050"; +} +.glyphicon-text-width:before { + content: "\e051"; +} +.glyphicon-align-left:before { + content: "\e052"; +} +.glyphicon-align-center:before { + content: "\e053"; +} +.glyphicon-align-right:before { + content: "\e054"; +} +.glyphicon-align-justify:before { + content: "\e055"; +} +.glyphicon-list:before { + content: "\e056"; +} +.glyphicon-indent-left:before { + content: "\e057"; +} +.glyphicon-indent-right:before { + content: "\e058"; +} +.glyphicon-facetime-video:before { + content: "\e059"; +} +.glyphicon-picture:before { + content: "\e060"; +} +.glyphicon-map-marker:before { + content: "\e062"; +} +.glyphicon-adjust:before { + content: "\e063"; +} +.glyphicon-tint:before { + content: "\e064"; +} +.glyphicon-edit:before { + content: "\e065"; +} +.glyphicon-share:before { + content: "\e066"; +} +.glyphicon-check:before { + content: "\e067"; +} +.glyphicon-move:before { + content: "\e068"; +} +.glyphicon-step-backward:before { + content: "\e069"; +} +.glyphicon-fast-backward:before { + content: "\e070"; +} +.glyphicon-backward:before { + content: "\e071"; +} +.glyphicon-play:before { + content: "\e072"; +} +.glyphicon-pause:before { + content: "\e073"; +} +.glyphicon-stop:before { + content: "\e074"; +} +.glyphicon-forward:before { + content: "\e075"; +} +.glyphicon-fast-forward:before { + content: "\e076"; +} +.glyphicon-step-forward:before { + content: "\e077"; +} +.glyphicon-eject:before { + content: "\e078"; +} +.glyphicon-chevron-left:before { + content: "\e079"; +} +.glyphicon-chevron-right:before { + content: "\e080"; +} +.glyphicon-plus-sign:before { + content: "\e081"; +} +.glyphicon-minus-sign:before { + content: "\e082"; +} +.glyphicon-remove-sign:before { + content: "\e083"; +} +.glyphicon-ok-sign:before { + content: "\e084"; +} +.glyphicon-question-sign:before { + content: "\e085"; +} +.glyphicon-info-sign:before { + content: "\e086"; +} +.glyphicon-screenshot:before { + content: "\e087"; +} +.glyphicon-remove-circle:before { + content: "\e088"; +} +.glyphicon-ok-circle:before { + content: "\e089"; +} +.glyphicon-ban-circle:before { + content: "\e090"; +} +.glyphicon-arrow-left:before { + content: "\e091"; +} +.glyphicon-arrow-right:before { + content: "\e092"; +} +.glyphicon-arrow-up:before { + content: "\e093"; +} +.glyphicon-arrow-down:before { + content: "\e094"; +} +.glyphicon-share-alt:before { + content: "\e095"; +} +.glyphicon-resize-full:before { + content: "\e096"; +} +.glyphicon-resize-small:before { + content: "\e097"; +} +.glyphicon-exclamation-sign:before { + content: "\e101"; +} +.glyphicon-gift:before { + content: "\e102"; +} +.glyphicon-leaf:before { + content: "\e103"; +} +.glyphicon-fire:before { + content: "\e104"; +} +.glyphicon-eye-open:before { + content: "\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} +.glyphicon-warning-sign:before { + content: "\e107"; +} +.glyphicon-plane:before { + content: "\e108"; +} +.glyphicon-calendar:before { + content: "\e109"; +} +.glyphicon-random:before { + content: "\e110"; +} +.glyphicon-comment:before { + content: "\e111"; +} +.glyphicon-magnet:before { + content: "\e112"; +} +.glyphicon-chevron-up:before { + content: "\e113"; +} +.glyphicon-chevron-down:before { + content: "\e114"; +} +.glyphicon-retweet:before { + content: "\e115"; +} +.glyphicon-shopping-cart:before { + content: "\e116"; +} +.glyphicon-folder-close:before { + content: "\e117"; +} +.glyphicon-folder-open:before { + content: "\e118"; +} +.glyphicon-resize-vertical:before { + content: "\e119"; +} +.glyphicon-resize-horizontal:before { + content: "\e120"; +} +.glyphicon-hdd:before { + content: "\e121"; +} +.glyphicon-bullhorn:before { + content: "\e122"; +} +.glyphicon-bell:before { + content: "\e123"; +} +.glyphicon-certificate:before { + content: "\e124"; +} +.glyphicon-thumbs-up:before { + content: "\e125"; +} +.glyphicon-thumbs-down:before { + content: "\e126"; +} +.glyphicon-hand-right:before { + content: "\e127"; +} +.glyphicon-hand-left:before { + content: "\e128"; +} +.glyphicon-hand-up:before { + content: "\e129"; +} +.glyphicon-hand-down:before { + content: "\e130"; +} +.glyphicon-circle-arrow-right:before { + content: "\e131"; +} +.glyphicon-circle-arrow-left:before { + content: "\e132"; +} +.glyphicon-circle-arrow-up:before { + content: "\e133"; +} +.glyphicon-circle-arrow-down:before { + content: "\e134"; +} +.glyphicon-globe:before { + content: "\e135"; +} +.glyphicon-wrench:before { + content: "\e136"; +} +.glyphicon-tasks:before { + content: "\e137"; +} +.glyphicon-filter:before { + content: "\e138"; +} +.glyphicon-briefcase:before { + content: "\e139"; +} +.glyphicon-fullscreen:before { + content: "\e140"; +} +.glyphicon-dashboard:before { + content: "\e141"; +} +.glyphicon-paperclip:before { + content: "\e142"; +} +.glyphicon-heart-empty:before { + content: "\e143"; +} +.glyphicon-link:before { + content: "\e144"; +} +.glyphicon-phone:before { + content: "\e145"; +} +.glyphicon-pushpin:before { + content: "\e146"; +} +.glyphicon-usd:before { + content: "\e148"; +} +.glyphicon-gbp:before { + content: "\e149"; +} +.glyphicon-sort:before { + content: "\e150"; +} +.glyphicon-sort-by-alphabet:before { + content: "\e151"; +} +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; +} +.glyphicon-sort-by-order:before { + content: "\e153"; +} +.glyphicon-sort-by-order-alt:before { + content: "\e154"; +} +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} +.glyphicon-unchecked:before { + content: "\e157"; +} +.glyphicon-expand:before { + content: "\e158"; +} +.glyphicon-collapse-down:before { + content: "\e159"; +} +.glyphicon-collapse-up:before { + content: "\e160"; +} +.glyphicon-log-in:before { + content: "\e161"; +} +.glyphicon-flash:before { + content: "\e162"; +} +.glyphicon-log-out:before { + content: "\e163"; +} +.glyphicon-new-window:before { + content: "\e164"; +} +.glyphicon-record:before { + content: "\e165"; +} +.glyphicon-save:before { + content: "\e166"; +} +.glyphicon-open:before { + content: "\e167"; +} +.glyphicon-saved:before { + content: "\e168"; +} +.glyphicon-import:before { + content: "\e169"; +} +.glyphicon-export:before { + content: "\e170"; +} +.glyphicon-send:before { + content: "\e171"; +} +.glyphicon-floppy-disk:before { + content: "\e172"; +} +.glyphicon-floppy-saved:before { + content: "\e173"; +} +.glyphicon-floppy-remove:before { + content: "\e174"; +} +.glyphicon-floppy-save:before { + content: "\e175"; +} +.glyphicon-floppy-open:before { + content: "\e176"; +} +.glyphicon-credit-card:before { + content: "\e177"; +} +.glyphicon-transfer:before { + content: "\e178"; +} +.glyphicon-cutlery:before { + content: "\e179"; +} +.glyphicon-header:before { + content: "\e180"; +} +.glyphicon-compressed:before { + content: "\e181"; +} +.glyphicon-earphone:before { + content: "\e182"; +} +.glyphicon-phone-alt:before { + content: "\e183"; +} +.glyphicon-tower:before { + content: "\e184"; +} +.glyphicon-stats:before { + content: "\e185"; +} +.glyphicon-sd-video:before { + content: "\e186"; +} +.glyphicon-hd-video:before { + content: "\e187"; +} +.glyphicon-subtitles:before { + content: "\e188"; +} +.glyphicon-sound-stereo:before { + content: "\e189"; +} +.glyphicon-sound-dolby:before { + content: "\e190"; +} +.glyphicon-sound-5-1:before { + content: "\e191"; +} +.glyphicon-sound-6-1:before { + content: "\e192"; +} +.glyphicon-sound-7-1:before { + content: "\e193"; +} +.glyphicon-copyright-mark:before { + content: "\e194"; +} +.glyphicon-registration-mark:before { + content: "\e195"; +} +.glyphicon-cloud-download:before { + content: "\e197"; +} +.glyphicon-cloud-upload:before { + content: "\e198"; +} +.glyphicon-tree-conifer:before { + content: "\e199"; +} +.glyphicon-tree-deciduous:before { + content: "\e200"; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + font-size: 10px; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #333; + background-color: #fff; +} +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +a { + color: #428bca; + text-decoration: none; +} +a:hover, +a:focus { + color: #2a6496; + text-decoration: underline; +} +a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +figure { + margin: 0; +} +img { + vertical-align: middle; +} +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + width: 100% \9; + max-width: 100%; + height: auto; +} +.img-rounded { + border-radius: 6px; +} +.img-thumbnail { + display: inline-block; + width: 100% \9; + max-width: 100%; + height: auto; + padding: 4px; + line-height: 1.42857143; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.img-circle { + border-radius: 50%; +} +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small, +.h1 small, +.h2 small, +.h3 small, +.h4 small, +.h5 small, +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small { + font-weight: normal; + line-height: 1; + color: #777; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h1 small, +.h1 small, +h2 small, +.h2 small, +h3 small, +.h3 small, +h1 .small, +.h1 .small, +h2 .small, +.h2 .small, +h3 .small, +.h3 .small { + font-size: 65%; +} +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 10px; + margin-bottom: 10px; +} +h4 small, +.h4 small, +h5 small, +.h5 small, +h6 small, +.h6 small, +h4 .small, +.h4 .small, +h5 .small, +.h5 .small, +h6 .small, +.h6 .small { + font-size: 75%; +} +h1, +.h1 { + font-size: 36px; +} +h2, +.h2 { + font-size: 30px; +} +h3, +.h3 { + font-size: 24px; +} +h4, +.h4 { + font-size: 18px; +} +h5, +.h5 { + font-size: 14px; +} +h6, +.h6 { + font-size: 12px; +} +p { + margin: 0 0 10px; +} +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 21px; + } +} +small, +.small { + font-size: 85%; +} +cite { + font-style: normal; +} +mark, +.mark { + padding: .2em; + background-color: #fcf8e3; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-muted { + color: #777; +} +.text-primary { + color: #428bca; +} +a.text-primary:hover { + color: #3071a9; +} +.text-success { + color: #3c763d; +} +a.text-success:hover { + color: #2b542c; +} +.text-info { + color: #31708f; +} +a.text-info:hover { + color: #245269; +} +.text-warning { + color: #8a6d3b; +} +a.text-warning:hover { + color: #66512c; +} +.text-danger { + color: #a94442; +} +a.text-danger:hover { + color: #843534; +} +.bg-primary { + color: #fff; + background-color: #428bca; +} +a.bg-primary:hover { + background-color: #3071a9; +} +.bg-success { + background-color: #dff0d8; +} +a.bg-success:hover { + background-color: #c1e2b3; +} +.bg-info { + background-color: #d9edf7; +} +a.bg-info:hover { + background-color: #afd9ee; +} +.bg-warning { + background-color: #fcf8e3; +} +a.bg-warning:hover { + background-color: #f7ecb5; +} +.bg-danger { + background-color: #f2dede; +} +a.bg-danger:hover { + background-color: #e4b9b9; +} +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid #eee; +} +ul, +ol { + margin-top: 0; + margin-bottom: 10px; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +.list-inline { + padding-left: 0; + margin-left: -5px; + list-style: none; +} +.list-inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} +dl { + margin-top: 0; + margin-bottom: 20px; +} +dt, +dd { + line-height: 1.42857143; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; +} +@media (min-width: 768px) { + .dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #777; +} +.initialism { + font-size: 90%; + text-transform: uppercase; +} +blockquote { + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; + border-left: 5px solid #eee; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.42857143; + color: #777; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + text-align: right; + border-right: 5px solid #eee; + border-left: 0; +} +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} +blockquote:before, +blockquote:after { + content: ""; +} +address { + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857143; +} +code, +kbd, +pre, +samp { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} +code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + border-radius: 4px; +} +kbd { + padding: 2px 4px; + font-size: 90%; + color: #fff; + background-color: #333; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); +} +kbd kbd { + padding: 0; + font-size: 100%; + -webkit-box-shadow: none; + box-shadow: none; +} +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 1.42857143; + color: #333; + word-break: break-all; + word-wrap: break-word; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; +} +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 768px) { + .container { + width: 750px; + } +} +@media (min-width: 992px) { + .container { + width: 970px; + } +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +.container-fluid { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +.row { + margin-right: -15px; + margin-left: -15px; +} +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; +} +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { + float: left; +} +.col-xs-12 { + width: 100%; +} +.col-xs-11 { + width: 91.66666667%; +} +.col-xs-10 { + width: 83.33333333%; +} +.col-xs-9 { + width: 75%; +} +.col-xs-8 { + width: 66.66666667%; +} +.col-xs-7 { + width: 58.33333333%; +} +.col-xs-6 { + width: 50%; +} +.col-xs-5 { + width: 41.66666667%; +} +.col-xs-4 { + width: 33.33333333%; +} +.col-xs-3 { + width: 25%; +} +.col-xs-2 { + width: 16.66666667%; +} +.col-xs-1 { + width: 8.33333333%; +} +.col-xs-pull-12 { + right: 100%; +} +.col-xs-pull-11 { + right: 91.66666667%; +} +.col-xs-pull-10 { + right: 83.33333333%; +} +.col-xs-pull-9 { + right: 75%; +} +.col-xs-pull-8 { + right: 66.66666667%; +} +.col-xs-pull-7 { + right: 58.33333333%; +} +.col-xs-pull-6 { + right: 50%; +} +.col-xs-pull-5 { + right: 41.66666667%; +} +.col-xs-pull-4 { + right: 33.33333333%; +} +.col-xs-pull-3 { + right: 25%; +} +.col-xs-pull-2 { + right: 16.66666667%; +} +.col-xs-pull-1 { + right: 8.33333333%; +} +.col-xs-pull-0 { + right: auto; +} +.col-xs-push-12 { + left: 100%; +} +.col-xs-push-11 { + left: 91.66666667%; +} +.col-xs-push-10 { + left: 83.33333333%; +} +.col-xs-push-9 { + left: 75%; +} +.col-xs-push-8 { + left: 66.66666667%; +} +.col-xs-push-7 { + left: 58.33333333%; +} +.col-xs-push-6 { + left: 50%; +} +.col-xs-push-5 { + left: 41.66666667%; +} +.col-xs-push-4 { + left: 33.33333333%; +} +.col-xs-push-3 { + left: 25%; +} +.col-xs-push-2 { + left: 16.66666667%; +} +.col-xs-push-1 { + left: 8.33333333%; +} +.col-xs-push-0 { + left: auto; +} +.col-xs-offset-12 { + margin-left: 100%; +} +.col-xs-offset-11 { + margin-left: 91.66666667%; +} +.col-xs-offset-10 { + margin-left: 83.33333333%; +} +.col-xs-offset-9 { + margin-left: 75%; +} +.col-xs-offset-8 { + margin-left: 66.66666667%; +} +.col-xs-offset-7 { + margin-left: 58.33333333%; +} +.col-xs-offset-6 { + margin-left: 50%; +} +.col-xs-offset-5 { + margin-left: 41.66666667%; +} +.col-xs-offset-4 { + margin-left: 33.33333333%; +} +.col-xs-offset-3 { + margin-left: 25%; +} +.col-xs-offset-2 { + margin-left: 16.66666667%; +} +.col-xs-offset-1 { + margin-left: 8.33333333%; +} +.col-xs-offset-0 { + margin-left: 0; +} +@media (min-width: 768px) { + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0; + } +} +@media (min-width: 992px) { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0; + } +} +@media (min-width: 1200px) { + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0; + } +} +table { + background-color: transparent; +} +th { + text-align: left; +} +.table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; +} +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #ddd; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #ddd; +} +.table > caption + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > th, +.table > thead:first-child > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #ddd; +} +.table .table { + background-color: #fff; +} +.table-condensed > thead > tr > th, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > td { + padding: 5px; +} +.table-bordered { + border: 1px solid #ddd; +} +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border: 1px solid #ddd; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} +.table-striped > tbody > tr:nth-child(odd) > td, +.table-striped > tbody > tr:nth-child(odd) > th { + background-color: #f9f9f9; +} +.table-hover > tbody > tr:hover > td, +.table-hover > tbody > tr:hover > th { + background-color: #f5f5f5; +} +table col[class*="col-"] { + position: static; + display: table-column; + float: none; +} +table td[class*="col-"], +table th[class*="col-"] { + position: static; + display: table-cell; + float: none; +} +.table > thead > tr > td.active, +.table > tbody > tr > td.active, +.table > tfoot > tr > td.active, +.table > thead > tr > th.active, +.table > tbody > tr > th.active, +.table > tfoot > tr > th.active, +.table > thead > tr.active > td, +.table > tbody > tr.active > td, +.table > tfoot > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr.active > th, +.table > tfoot > tr.active > th { + background-color: #f5f5f5; +} +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #e8e8e8; +} +.table > thead > tr > td.success, +.table > tbody > tr > td.success, +.table > tfoot > tr > td.success, +.table > thead > tr > th.success, +.table > tbody > tr > th.success, +.table > tfoot > tr > th.success, +.table > thead > tr.success > td, +.table > tbody > tr.success > td, +.table > tfoot > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr.success > th, +.table > tfoot > tr.success > th { + background-color: #dff0d8; +} +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #d0e9c6; +} +.table > thead > tr > td.info, +.table > tbody > tr > td.info, +.table > tfoot > tr > td.info, +.table > thead > tr > th.info, +.table > tbody > tr > th.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > tbody > tr.info > td, +.table > tfoot > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr.info > th, +.table > tfoot > tr.info > th { + background-color: #d9edf7; +} +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #c4e3f3; +} +.table > thead > tr > td.warning, +.table > tbody > tr > td.warning, +.table > tfoot > tr > td.warning, +.table > thead > tr > th.warning, +.table > tbody > tr > th.warning, +.table > tfoot > tr > th.warning, +.table > thead > tr.warning > td, +.table > tbody > tr.warning > td, +.table > tfoot > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr.warning > th, +.table > tfoot > tr.warning > th { + background-color: #fcf8e3; +} +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #faf2cc; +} +.table > thead > tr > td.danger, +.table > tbody > tr > td.danger, +.table > tfoot > tr > td.danger, +.table > thead > tr > th.danger, +.table > tbody > tr > th.danger, +.table > tfoot > tr > th.danger, +.table > thead > tr.danger > td, +.table > tbody > tr.danger > td, +.table > tfoot > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr.danger > th, +.table > tfoot > tr.danger > th { + background-color: #f2dede; +} +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #ebcccc; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #ddd; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: inherit; + color: #333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; +} +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type="file"] { + display: block; +} +input[type="range"] { + display: block; + width: 100%; +} +select[multiple], +select[size] { + height: auto; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +output { + display: block; + padding-top: 7px; + font-size: 14px; + line-height: 1.42857143; + color: #555; +} +.form-control { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.form-control:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); +} +.form-control::-moz-placeholder { + color: #777; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #777; +} +.form-control::-webkit-input-placeholder { + color: #777; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + cursor: not-allowed; + background-color: #eee; + opacity: 1; +} +textarea.form-control { + height: auto; +} +input[type="search"] { + -webkit-appearance: none; +} +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + line-height: 34px; + line-height: 1.42857143 \0; +} +input[type="date"].input-sm, +input[type="time"].input-sm, +input[type="datetime-local"].input-sm, +input[type="month"].input-sm { + line-height: 30px; +} +input[type="date"].input-lg, +input[type="time"].input-lg, +input[type="datetime-local"].input-lg, +input[type="month"].input-lg { + line-height: 46px; +} +.form-group { + margin-bottom: 15px; +} +.radio, +.checkbox { + position: relative; + display: block; + min-height: 20px; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-top: 4px \9; + margin-left: -20px; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + vertical-align: middle; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"].disabled, +input[type="checkbox"].disabled, +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { + cursor: not-allowed; +} +.radio-inline.disabled, +.checkbox-inline.disabled, +fieldset[disabled] .radio-inline, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} +.radio.disabled label, +.checkbox.disabled label, +fieldset[disabled] .radio label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.form-control-static { + padding-top: 7px; + padding-bottom: 7px; + margin-bottom: 0; +} +.form-control-static.input-lg, +.form-control-static.input-sm { + padding-right: 0; + padding-left: 0; +} +.input-sm, +.form-horizontal .form-group-sm .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-sm { + height: 30px; + line-height: 30px; +} +textarea.input-sm, +select[multiple].input-sm { + height: auto; +} +.input-lg, +.form-horizontal .form-group-lg .form-control { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +select.input-lg { + height: 46px; + line-height: 46px; +} +textarea.input-lg, +select[multiple].input-lg { + height: auto; +} +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 42.5px; +} +.form-control-feedback { + position: absolute; + top: 25px; + right: 0; + z-index: 2; + display: block; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; +} +.input-lg + .form-control-feedback { + width: 46px; + height: 46px; + line-height: 46px; +} +.input-sm + .form-control-feedback { + width: 30px; + height: 30px; + line-height: 30px; +} +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline { + color: #3c763d; +} +.has-success .form-control { + border-color: #3c763d; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-success .form-control:focus { + border-color: #2b542c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; +} +.has-success .input-group-addon { + color: #3c763d; + background-color: #dff0d8; + border-color: #3c763d; +} +.has-success .form-control-feedback { + color: #3c763d; +} +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline { + color: #8a6d3b; +} +.has-warning .form-control { + border-color: #8a6d3b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-warning .form-control:focus { + border-color: #66512c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; +} +.has-warning .input-group-addon { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #8a6d3b; +} +.has-warning .form-control-feedback { + color: #8a6d3b; +} +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline { + color: #a94442; +} +.has-error .form-control { + border-color: #a94442; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-error .form-control:focus { + border-color: #843534; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; +} +.has-error .input-group-addon { + color: #a94442; + background-color: #f2dede; + border-color: #a94442; +} +.has-error .form-control-feedback { + color: #a94442; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; +} +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + padding-top: 7px; + margin-top: 0; + margin-bottom: 0; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 27px; +} +.form-horizontal .form-group { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + padding-top: 7px; + margin-bottom: 0; + text-align: right; + } +} +.form-horizontal .has-feedback .form-control-feedback { + top: 0; + right: 15px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 14.3px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 6px; + } +} +.btn { + display: inline-block; + padding: 6px 12px; + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn:hover, +.btn:focus { + color: #333; + text-decoration: none; +} +.btn:active, +.btn.active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); +} +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + opacity: .65; +} +.btn-default { + color: #333; + background-color: #fff; + border-color: #ccc; +} +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + background-image: none; +} +.btn-default.disabled, +.btn-default[disabled], +fieldset[disabled] .btn-default, +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} +.btn-default .badge { + color: #fff; + background-color: #333; +} +.btn-primary { + color: #fff; + background-color: #428bca; + border-color: #357ebd; +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + color: #fff; + background-color: #3071a9; + border-color: #285e8e; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + background-image: none; +} +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + background-color: #428bca; + border-color: #357ebd; +} +.btn-primary .badge { + color: #428bca; + background-color: #fff; +} +.btn-success { + color: #fff; + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success:hover, +.btn-success:focus, +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + color: #fff; + background-color: #449d44; + border-color: #398439; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + background-image: none; +} +.btn-success.disabled, +.btn-success[disabled], +fieldset[disabled] .btn-success, +.btn-success.disabled:hover, +.btn-success[disabled]:hover, +fieldset[disabled] .btn-success:hover, +.btn-success.disabled:focus, +.btn-success[disabled]:focus, +fieldset[disabled] .btn-success:focus, +.btn-success.disabled:active, +.btn-success[disabled]:active, +fieldset[disabled] .btn-success:active, +.btn-success.disabled.active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success.active { + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success .badge { + color: #5cb85c; + background-color: #fff; +} +.btn-info { + color: #fff; + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info:hover, +.btn-info:focus, +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + color: #fff; + background-color: #31b0d5; + border-color: #269abc; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + background-image: none; +} +.btn-info.disabled, +.btn-info[disabled], +fieldset[disabled] .btn-info, +.btn-info.disabled:hover, +.btn-info[disabled]:hover, +fieldset[disabled] .btn-info:hover, +.btn-info.disabled:focus, +.btn-info[disabled]:focus, +fieldset[disabled] .btn-info:focus, +.btn-info.disabled:active, +.btn-info[disabled]:active, +fieldset[disabled] .btn-info:active, +.btn-info.disabled.active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info.active { + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info .badge { + color: #5bc0de; + background-color: #fff; +} +.btn-warning { + color: #fff; + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + color: #fff; + background-color: #ec971f; + border-color: #d58512; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + background-image: none; +} +.btn-warning.disabled, +.btn-warning[disabled], +fieldset[disabled] .btn-warning, +.btn-warning.disabled:hover, +.btn-warning[disabled]:hover, +fieldset[disabled] .btn-warning:hover, +.btn-warning.disabled:focus, +.btn-warning[disabled]:focus, +fieldset[disabled] .btn-warning:focus, +.btn-warning.disabled:active, +.btn-warning[disabled]:active, +fieldset[disabled] .btn-warning:active, +.btn-warning.disabled.active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning.active { + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning .badge { + color: #f0ad4e; + background-color: #fff; +} +.btn-danger { + color: #fff; + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + color: #fff; + background-color: #c9302c; + border-color: #ac2925; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + background-image: none; +} +.btn-danger.disabled, +.btn-danger[disabled], +fieldset[disabled] .btn-danger, +.btn-danger.disabled:hover, +.btn-danger[disabled]:hover, +fieldset[disabled] .btn-danger:hover, +.btn-danger.disabled:focus, +.btn-danger[disabled]:focus, +fieldset[disabled] .btn-danger:focus, +.btn-danger.disabled:active, +.btn-danger[disabled]:active, +fieldset[disabled] .btn-danger:active, +.btn-danger.disabled.active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger.active { + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger .badge { + color: #d9534f; + background-color: #fff; +} +.btn-link { + font-weight: normal; + color: #428bca; + cursor: pointer; + border-radius: 0; +} +.btn-link, +.btn-link:active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link, +.btn-link:hover, +.btn-link:focus, +.btn-link:active { + border-color: transparent; +} +.btn-link:hover, +.btn-link:focus { + color: #2a6496; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover, +fieldset[disabled] .btn-link:hover, +.btn-link[disabled]:focus, +fieldset[disabled] .btn-link:focus { + color: #777; + text-decoration: none; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-xs, +.btn-group-xs > .btn { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 5px; +} +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} +.fade { + opacity: 0; + -webkit-transition: opacity .15s linear; + -o-transition: opacity .15s linear; + transition: opacity .15s linear; +} +.fade.in { + opacity: 1; +} +.collapse { + display: none; +} +.collapse.in { + display: block; +} +tr.collapse.in { + display: table-row; +} +tbody.collapse.in { + display: table-row-group; +} +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height .35s ease; + -o-transition: height .35s ease; + transition: height .35s ease; +} +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} +.dropdown { + position: relative; +} +.dropdown-toggle:focus { + outline: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 14px; + text-align: left; + list-style: none; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + color: #262626; + text-decoration: none; + background-color: #f5f5f5; +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #fff; + text-decoration: none; + background-color: #428bca; + outline: 0; +} +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #777; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: not-allowed; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} +.dropdown-menu-right { + right: 0; + left: auto; +} +.dropdown-menu-left { + right: auto; + left: 0; +} +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 12px; + line-height: 1.42857143; + color: #777; + white-space: nowrap; +} +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + content: ""; + border-top: 0; + border-bottom: 4px solid; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} +@media (min-width: 768px) { + .navbar-right .dropdown-menu { + right: 0; + left: auto; + } + .navbar-right .dropdown-menu-left { + right: auto; + left: 0; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus { + outline: 0; +} +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn-group:last-child > .btn:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} +.btn-group > .btn + .dropdown-toggle { + padding-right: 8px; + padding-left: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn .caret { + margin-left: 0; +} +.btn-lg .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} +.dropup .btn-lg .caret { + border-width: 0 5px 5px; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-right-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 4px; +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + display: table-cell; + float: none; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + position: absolute; + z-index: -1; + filter: alpha(opacity=0); + opacity: 0; +} +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*="col-"] { + float: none; + padding-right: 0; + padding-left: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +select.input-group-lg > .form-control, +select.input-group-lg > .input-group-addon, +select.input-group-lg > .input-group-btn > .btn { + height: 46px; + line-height: 46px; +} +textarea.input-group-lg > .form-control, +textarea.input-group-lg > .input-group-addon, +textarea.input-group-lg > .input-group-btn > .btn, +select[multiple].input-group-lg > .form-control, +select[multiple].input-group-lg > .input-group-addon, +select[multiple].input-group-lg > .input-group-btn > .btn { + height: auto; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-group-sm > .form-control, +select.input-group-sm > .input-group-addon, +select.input-group-sm > .input-group-btn > .btn { + height: 30px; + line-height: 30px; +} +textarea.input-group-sm > .form-control, +textarea.input-group-sm > .input-group-addon, +textarea.input-group-sm > .input-group-btn > .btn, +select[multiple].input-group-sm > .form-control, +select[multiple].input-group-sm > .input-group-addon, +select[multiple].input-group-sm > .input-group-btn > .btn { + height: auto; +} +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} +.input-group-addon { + padding: 6px 12px; + font-size: 14px; + font-weight: normal; + line-height: 1; + color: #555; + text-align: center; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 4px; +} +.input-group-addon.input-sm { + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; +} +.input-group-addon.input-lg { + padding: 10px 16px; + font-size: 18px; + border-radius: 6px; +} +.input-group-addon input[type="radio"], +.input-group-addon input[type="checkbox"] { + margin-top: 0; +} +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-group-addon:last-child { + border-left: 0; +} +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + margin-left: -1px; +} +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #eee; +} +.nav > li.disabled > a { + color: #777; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #777; + text-decoration: none; + cursor: not-allowed; + background-color: transparent; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #eee; + border-color: #428bca; +} +.nav .nav-divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} +.nav-tabs { + border-bottom: 1px solid #ddd; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #eee #eee #ddd; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #555; + cursor: default; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} +.nav-tabs.nav-justified { + width: 100%; + border-bottom: 0; +} +.nav-tabs.nav-justified > li { + float: none; +} +.nav-tabs.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-tabs.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs.nav-justified > .active > a, +.nav-tabs.nav-justified > .active > a:hover, +.nav-tabs.nav-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs.nav-justified > .active > a, + .nav-tabs.nav-justified > .active > a:hover, + .nav-tabs.nav-justified > .active > a:focus { + border-bottom-color: #fff; + } +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 4px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #fff; + background-color: #428bca; +} +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} +.nav-justified { + width: 100%; +} +.nav-justified > li { + float: none; +} +.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #fff; + } +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.navbar { + position: relative; + min-height: 50px; + margin-bottom: 20px; + border: 1px solid transparent; +} +@media (min-width: 768px) { + .navbar { + border-radius: 4px; + } +} +@media (min-width: 768px) { + .navbar-header { + float: left; + } +} +.navbar-collapse { + padding-right: 15px; + padding-left: 15px; + overflow-x: visible; + -webkit-overflow-scrolling: touch; + border-top: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 768px) { + .navbar-collapse { + width: auto; + border-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-right: 0; + padding-left: 0; + } +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +.container > .navbar-header, +.container-fluid > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-collapse { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .container > .navbar-header, + .container-fluid > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 768px) { + .navbar-static-top { + border-radius: 0; + } +} +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@media (min-width: 768px) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} +.navbar-brand { + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +@media (min-width: 768px) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -15px; + } +} +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-top: 8px; + margin-right: 15px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } +} +.navbar-nav { + margin: 7.5px -15px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 20px; +} +@media (max-width: 767px) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 20px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 768px) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; + } + .navbar-nav.navbar-right:last-child { + margin-right: -15px; + } +} +@media (min-width: 768px) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + } +} +.navbar-form { + padding: 10px 15px; + margin-top: 8px; + margin-right: -15px; + margin-bottom: 8px; + margin-left: -15px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type="radio"], + .navbar-form .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: 767px) { + .navbar-form .form-group { + margin-bottom: 5px; + } +} +@media (min-width: 768px) { + .navbar-form { + width: auto; + padding-top: 0; + padding-bottom: 0; + margin-right: 0; + margin-left: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-form.navbar-right:last-child { + margin-right: -15px; + } +} +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.navbar-btn { + margin-top: 8px; + margin-bottom: 8px; +} +.navbar-btn.btn-sm { + margin-top: 10px; + margin-bottom: 10px; +} +.navbar-btn.btn-xs { + margin-top: 14px; + margin-bottom: 14px; +} +.navbar-text { + margin-top: 15px; + margin-bottom: 15px; +} +@media (min-width: 768px) { + .navbar-text { + float: left; + margin-right: 15px; + margin-left: 15px; + } + .navbar-text.navbar-right:last-child { + margin-right: 0; + } +} +.navbar-default { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navbar-default .navbar-brand { + color: #777; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #777; +} +.navbar-default .navbar-nav > li > a { + color: #777; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #333; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #555; + background-color: #e7e7e7; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #ccc; + background-color: transparent; +} +.navbar-default .navbar-toggle { + border-color: #ddd; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #ddd; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #888; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #e7e7e7; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + color: #555; + background-color: #e7e7e7; +} +@media (max-width: 767px) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #333; + background-color: transparent; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #555; + background-color: #e7e7e7; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #ccc; + background-color: transparent; + } +} +.navbar-default .navbar-link { + color: #777; +} +.navbar-default .navbar-link:hover { + color: #333; +} +.navbar-default .btn-link { + color: #777; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #333; +} +.navbar-default .btn-link[disabled]:hover, +fieldset[disabled] .navbar-default .btn-link:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #ccc; +} +.navbar-inverse { + background-color: #222; + border-color: #080808; +} +.navbar-inverse .navbar-brand { + color: #777; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-text { + color: #777; +} +.navbar-inverse .navbar-nav > li > a { + color: #777; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #fff; + background-color: #080808; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #444; + background-color: transparent; +} +.navbar-inverse .navbar-toggle { + border-color: #333; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #fff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: #fff; + background-color: #080808; +} +@media (max-width: 767px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #fff; + background-color: transparent; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #444; + background-color: transparent; + } +} +.navbar-inverse .navbar-link { + color: #777; +} +.navbar-inverse .navbar-link:hover { + color: #fff; +} +.navbar-inverse .btn-link { + color: #777; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #fff; +} +.navbar-inverse .btn-link[disabled]:hover, +fieldset[disabled] .navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #444; +} +.breadcrumb { + padding: 8px 15px; + margin-bottom: 20px; + list-style: none; + background-color: #f5f5f5; + border-radius: 4px; +} +.breadcrumb > li { + display: inline-block; +} +.breadcrumb > li + li:before { + padding: 0 5px; + color: #ccc; + content: "/\00a0"; +} +.breadcrumb > .active { + color: #777; +} +.pagination { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; +} +.pagination > li { + display: inline; +} +.pagination > li > a, +.pagination > li > span { + position: relative; + float: left; + padding: 6px 12px; + margin-left: -1px; + line-height: 1.42857143; + color: #428bca; + text-decoration: none; + background-color: #fff; + border: 1px solid #ddd; +} +.pagination > li:first-child > a, +.pagination > li:first-child > span { + margin-left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.pagination > li:last-child > a, +.pagination > li:last-child > span { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.pagination > li > a:hover, +.pagination > li > span:hover, +.pagination > li > a:focus, +.pagination > li > span:focus { + color: #2a6496; + background-color: #eee; + border-color: #ddd; +} +.pagination > .active > a, +.pagination > .active > span, +.pagination > .active > a:hover, +.pagination > .active > span:hover, +.pagination > .active > a:focus, +.pagination > .active > span:focus { + z-index: 2; + color: #fff; + cursor: default; + background-color: #428bca; + border-color: #428bca; +} +.pagination > .disabled > span, +.pagination > .disabled > span:hover, +.pagination > .disabled > span:focus, +.pagination > .disabled > a, +.pagination > .disabled > a:hover, +.pagination > .disabled > a:focus { + color: #777; + cursor: not-allowed; + background-color: #fff; + border-color: #ddd; +} +.pagination-lg > li > a, +.pagination-lg > li > span { + padding: 10px 16px; + font-size: 18px; +} +.pagination-lg > li:first-child > a, +.pagination-lg > li:first-child > span { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.pagination-lg > li:last-child > a, +.pagination-lg > li:last-child > span { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.pagination-sm > li > a, +.pagination-sm > li > span { + padding: 5px 10px; + font-size: 12px; +} +.pagination-sm > li:first-child > a, +.pagination-sm > li:first-child > span { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.pagination-sm > li:last-child > a, +.pagination-sm > li:last-child > span { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} +.pager { + padding-left: 0; + margin: 20px 0; + text-align: center; + list-style: none; +} +.pager li { + display: inline; +} +.pager li > a, +.pager li > span { + display: inline-block; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 15px; +} +.pager li > a:hover, +.pager li > a:focus { + text-decoration: none; + background-color: #eee; +} +.pager .next > a, +.pager .next > span { + float: right; +} +.pager .previous > a, +.pager .previous > span { + float: left; +} +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > a:focus, +.pager .disabled > span { + color: #777; + cursor: not-allowed; + background-color: #fff; +} +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +a.label:hover, +a.label:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} +.label-default { + background-color: #777; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #5e5e5e; +} +.label-primary { + background-color: #428bca; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #3071a9; +} +.label-success { + background-color: #5cb85c; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449d44; +} +.label-info { + background-color: #5bc0de; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #31b0d5; +} +.label-warning { + background-color: #f0ad4e; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #ec971f; +} +.label-danger { + background-color: #d9534f; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c9302c; +} +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + background-color: #777; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge { + top: 0; + padding: 1px 5px; +} +a.badge:hover, +a.badge:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} +a.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #428bca; + background-color: #fff; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} +.jumbotron { + padding: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #eee; +} +.jumbotron h1, +.jumbotron .h1 { + color: inherit; +} +.jumbotron p { + margin-bottom: 15px; + font-size: 21px; + font-weight: 200; +} +.jumbotron > hr { + border-top-color: #d5d5d5; +} +.container .jumbotron { + border-radius: 6px; +} +.jumbotron .container { + max-width: 100%; +} +@media screen and (min-width: 768px) { + .jumbotron { + padding-top: 48px; + padding-bottom: 48px; + } + .container .jumbotron { + padding-right: 60px; + padding-left: 60px; + } + .jumbotron h1, + .jumbotron .h1 { + font-size: 63px; + } +} +.thumbnail { + display: block; + padding: 4px; + margin-bottom: 20px; + line-height: 1.42857143; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.thumbnail > img, +.thumbnail a > img { + margin-right: auto; + margin-left: auto; +} +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: #428bca; +} +.thumbnail .caption { + padding: 9px; + color: #333; +} +.alert { + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; + border-radius: 4px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} +.alert-success { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.alert-success hr { + border-top-color: #c9e2b3; +} +.alert-success .alert-link { + color: #2b542c; +} +.alert-info { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.alert-info hr { + border-top-color: #a6e1ec; +} +.alert-info .alert-link { + color: #245269; +} +.alert-warning { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.alert-warning hr { + border-top-color: #f7e1b5; +} +.alert-warning .alert-link { + color: #66512c; +} +.alert-danger { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.alert-danger hr { + border-top-color: #e4b9c0; +} +.alert-danger .alert-link { + color: #843534; +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@-o-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + height: 20px; + margin-bottom: 20px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); +} +.progress-bar { + float: left; + width: 0; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #fff; + text-align: center; + background-color: #428bca; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); + -webkit-transition: width .6s ease; + -o-transition: width .6s ease; + transition: width .6s ease; +} +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress-bar[aria-valuenow="1"], +.progress-bar[aria-valuenow="2"] { + min-width: 30px; +} +.progress-bar[aria-valuenow="0"] { + min-width: 30px; + color: #777; + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.progress-bar-success { + background-color: #5cb85c; +} +.progress-striped .progress-bar-success { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-info { + background-color: #5bc0de; +} +.progress-striped .progress-bar-info { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-warning { + background-color: #f0ad4e; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-danger { + background-color: #d9534f; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.media, +.media-body { + overflow: hidden; + zoom: 1; +} +.media, +.media .media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} +.media-object { + display: block; +} +.media-heading { + margin: 0 0 5px; +} +.media > .pull-left { + margin-right: 10px; +} +.media > .pull-right { + margin-left: 10px; +} +.media-list { + padding-left: 0; + list-style: none; +} +.list-group { + padding-left: 0; + margin-bottom: 20px; +} +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #fff; + border: 1px solid #ddd; +} +.list-group-item:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +a.list-group-item { + color: #555; +} +a.list-group-item .list-group-item-heading { + color: #333; +} +a.list-group-item:hover, +a.list-group-item:focus { + color: #555; + text-decoration: none; + background-color: #f5f5f5; +} +.list-group-item.disabled, +.list-group-item.disabled:hover, +.list-group-item.disabled:focus { + color: #777; + background-color: #eee; +} +.list-group-item.disabled .list-group-item-heading, +.list-group-item.disabled:hover .list-group-item-heading, +.list-group-item.disabled:focus .list-group-item-heading { + color: inherit; +} +.list-group-item.disabled .list-group-item-text, +.list-group-item.disabled:hover .list-group-item-text, +.list-group-item.disabled:focus .list-group-item-text { + color: #777; +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + z-index: 2; + color: #fff; + background-color: #428bca; + border-color: #428bca; +} +.list-group-item.active .list-group-item-heading, +.list-group-item.active:hover .list-group-item-heading, +.list-group-item.active:focus .list-group-item-heading, +.list-group-item.active .list-group-item-heading > small, +.list-group-item.active:hover .list-group-item-heading > small, +.list-group-item.active:focus .list-group-item-heading > small, +.list-group-item.active .list-group-item-heading > .small, +.list-group-item.active:hover .list-group-item-heading > .small, +.list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; +} +.list-group-item.active .list-group-item-text, +.list-group-item.active:hover .list-group-item-text, +.list-group-item.active:focus .list-group-item-text { + color: #e1edf7; +} +.list-group-item-success { + color: #3c763d; + background-color: #dff0d8; +} +a.list-group-item-success { + color: #3c763d; +} +a.list-group-item-success .list-group-item-heading { + color: inherit; +} +a.list-group-item-success:hover, +a.list-group-item-success:focus { + color: #3c763d; + background-color: #d0e9c6; +} +a.list-group-item-success.active, +a.list-group-item-success.active:hover, +a.list-group-item-success.active:focus { + color: #fff; + background-color: #3c763d; + border-color: #3c763d; +} +.list-group-item-info { + color: #31708f; + background-color: #d9edf7; +} +a.list-group-item-info { + color: #31708f; +} +a.list-group-item-info .list-group-item-heading { + color: inherit; +} +a.list-group-item-info:hover, +a.list-group-item-info:focus { + color: #31708f; + background-color: #c4e3f3; +} +a.list-group-item-info.active, +a.list-group-item-info.active:hover, +a.list-group-item-info.active:focus { + color: #fff; + background-color: #31708f; + border-color: #31708f; +} +.list-group-item-warning { + color: #8a6d3b; + background-color: #fcf8e3; +} +a.list-group-item-warning { + color: #8a6d3b; +} +a.list-group-item-warning .list-group-item-heading { + color: inherit; +} +a.list-group-item-warning:hover, +a.list-group-item-warning:focus { + color: #8a6d3b; + background-color: #faf2cc; +} +a.list-group-item-warning.active, +a.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus { + color: #fff; + background-color: #8a6d3b; + border-color: #8a6d3b; +} +.list-group-item-danger { + color: #a94442; + background-color: #f2dede; +} +a.list-group-item-danger { + color: #a94442; +} +a.list-group-item-danger .list-group-item-heading { + color: inherit; +} +a.list-group-item-danger:hover, +a.list-group-item-danger:focus { + color: #a94442; + background-color: #ebcccc; +} +a.list-group-item-danger.active, +a.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus { + color: #fff; + background-color: #a94442; + border-color: #a94442; +} +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} +.panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); +} +.panel-body { + padding: 15px; +} +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} +.panel-title > a { + color: inherit; +} +.panel-footer { + padding: 10px 15px; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .list-group { + margin-bottom: 0; +} +.panel > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +.panel > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} +.list-group + .panel-footer { + border-top-width: 0; +} +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: 3px; +} +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: 3px; +} +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive { + border-top: 1px solid #ddd; +} +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +.panel > .table-responsive { + margin-bottom: 0; + border: 0; +} +.panel-group { + margin-bottom: 20px; +} +.panel-group .panel { + margin-bottom: 0; + border-radius: 4px; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-group .panel-heading { + border-bottom: 0; +} +.panel-group .panel-heading + .panel-collapse > .panel-body { + border-top: 1px solid #ddd; +} +.panel-group .panel-footer { + border-top: 0; +} +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid #ddd; +} +.panel-default { + border-color: #ddd; +} +.panel-default > .panel-heading { + color: #333; + background-color: #f5f5f5; + border-color: #ddd; +} +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ddd; +} +.panel-default > .panel-heading .badge { + color: #f5f5f5; + background-color: #333; +} +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ddd; +} +.panel-primary { + border-color: #428bca; +} +.panel-primary > .panel-heading { + color: #fff; + background-color: #428bca; + border-color: #428bca; +} +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #428bca; +} +.panel-primary > .panel-heading .badge { + color: #428bca; + background-color: #fff; +} +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #428bca; +} +.panel-success { + border-color: #d6e9c6; +} +.panel-success > .panel-heading { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #d6e9c6; +} +.panel-success > .panel-heading .badge { + color: #dff0d8; + background-color: #3c763d; +} +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #d6e9c6; +} +.panel-info { + border-color: #bce8f1; +} +.panel-info > .panel-heading { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #bce8f1; +} +.panel-info > .panel-heading .badge { + color: #d9edf7; + background-color: #31708f; +} +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #bce8f1; +} +.panel-warning { + border-color: #faebcc; +} +.panel-warning > .panel-heading { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #faebcc; +} +.panel-warning > .panel-heading .badge { + color: #fcf8e3; + background-color: #8a6d3b; +} +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #faebcc; +} +.panel-danger { + border-color: #ebccd1; +} +.panel-danger > .panel-heading { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.panel-danger > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ebccd1; +} +.panel-danger > .panel-heading .badge { + color: #f2dede; + background-color: #a94442; +} +.panel-danger > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ebccd1; +} +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; +} +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} +.embed-responsive.embed-responsive-16by9 { + padding-bottom: 56.25%; +} +.embed-responsive.embed-responsive-4by3 { + padding-bottom: 75%; +} +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, .15); +} +.well-lg { + padding: 24px; + border-radius: 6px; +} +.well-sm { + padding: 9px; + border-radius: 3px; +} +.close { + float: right; + font-size: 21px; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: .2; +} +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: .5; +} +button.close { + -webkit-appearance: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; +} +.modal-open { + overflow: hidden; +} +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transition: -webkit-transform .3s ease-out; + -o-transition: -o-transform .3s ease-out; + transition: transform .3s ease-out; + -webkit-transform: translate3d(0, -25%, 0); + -o-transform: translate3d(0, -25%, 0); + transform: translate3d(0, -25%, 0); +} +.modal.in .modal-dialog { + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} +.modal-content { + position: relative; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + outline: 0; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); + box-shadow: 0 3px 9px rgba(0, 0, 0, .5); +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000; +} +.modal-backdrop.fade { + filter: alpha(opacity=0); + opacity: 0; +} +.modal-backdrop.in { + filter: alpha(opacity=50); + opacity: .5; +} +.modal-header { + min-height: 16.42857143px; + padding: 15px; + border-bottom: 1px solid #e5e5e5; +} +.modal-header .close { + margin-top: -2px; +} +.modal-title { + margin: 0; + line-height: 1.42857143; +} +.modal-body { + position: relative; + padding: 15px; +} +.modal-footer { + padding: 15px; + text-align: right; + border-top: 1px solid #e5e5e5; +} +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} +@media (min-width: 768px) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + } + .modal-sm { + width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 900px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-size: 12px; + line-height: 1.4; + visibility: visible; + filter: alpha(opacity=0); + opacity: 0; +} +.tooltip.in { + filter: alpha(opacity=90); + opacity: .9; +} +.tooltip.top { + padding: 5px 0; + margin-top: -3px; +} +.tooltip.right { + padding: 0 5px; + margin-left: 3px; +} +.tooltip.bottom { + padding: 5px 0; + margin-top: 3px; +} +.tooltip.left { + padding: 0 5px; + margin-left: -3px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #fff; + text-align: center; + text-decoration: none; + background-color: #000; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + left: 5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-right .tooltip-arrow { + right: 5px; + bottom: 0; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + left: 5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + right: 5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + content: ""; + border-width: 10px; +} +.popover.top > .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, .25); + border-bottom-width: 0; +} +.popover.top > .arrow:after { + bottom: 1px; + margin-left: -10px; + content: " "; + border-top-color: #fff; + border-bottom-width: 0; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, .25); + border-left-width: 0; +} +.popover.right > .arrow:after { + bottom: -10px; + left: 1px; + content: " "; + border-right-color: #fff; + border-left-width: 0; +} +.popover.bottom > .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, .25); +} +.popover.bottom > .arrow:after { + top: 1px; + margin-left: -10px; + content: " "; + border-top-width: 0; + border-bottom-color: #fff; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, .25); +} +.popover.left > .arrow:after { + right: 1px; + bottom: -10px; + content: " "; + border-right-width: 0; + border-left-color: #fff; +} +.carousel { + position: relative; +} +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner > .item { + position: relative; + display: none; + -webkit-transition: .6s ease-in-out left; + -o-transition: .6s ease-in-out left; + transition: .6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + line-height: 1; +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, .6); + filter: alpha(opacity=50); + opacity: .5; +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); + background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); + background-repeat: repeat-x; +} +.carousel-control.right { + right: 0; + left: auto; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); + background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); + background-repeat: repeat-x; +} +.carousel-control:hover, +.carousel-control:focus { + color: #fff; + text-decoration: none; + filter: alpha(opacity=90); + outline: 0; + opacity: .9; +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; +} +.carousel-control .icon-prev:before { + content: '\2039'; +} +.carousel-control .icon-next:before { + content: '\203a'; +} +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); + border: 1px solid #fff; + border-radius: 10px; +} +.carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; +} +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, .6); +} +.carousel-caption .btn { + text-shadow: none; +} +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -15px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -15px; + } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; + } + .carousel-indicators { + bottom: 20px; + } +} +.clearfix:before, +.clearfix:after, +.dl-horizontal dd:before, +.dl-horizontal dd:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after, +.form-horizontal .form-group:before, +.form-horizontal .form-group:after, +.btn-toolbar:before, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after, +.nav:before, +.nav:after, +.navbar:before, +.navbar:after, +.navbar-header:before, +.navbar-header:after, +.navbar-collapse:before, +.navbar-collapse:after, +.pager:before, +.pager:after, +.panel-body:before, +.panel-body:after, +.modal-footer:before, +.modal-footer:after { + display: table; + content: " "; +} +.clearfix:after, +.dl-horizontal dd:after, +.container:after, +.container-fluid:after, +.row:after, +.form-horizontal .form-group:after, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:after, +.nav:after, +.navbar:after, +.navbar-header:after, +.navbar-collapse:after, +.pager:after, +.panel-body:after, +.modal-footer:after { + clear: both; +} +.center-block { + display: block; + margin-right: auto; + margin-left: auto; +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.affix { + position: fixed; + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@-ms-viewport { + width: device-width; +} +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + display: none !important; +} +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm { + display: block !important; + } + table.visible-sm { + display: table; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md { + display: block !important; + } + table.visible-md { + display: table; + } + tr.visible-md { + display: table-row !important; + } + th.visible-md, + td.visible-md { + display: table-cell !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} +@media (min-width: 1200px) { + .visible-lg { + display: block !important; + } + table.visible-lg { + display: table; + } + tr.visible-lg { + display: table-row !important; + } + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } +} +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none !important; + } +} +@media (min-width: 1200px) { + .hidden-lg { + display: none !important; + } +} +.visible-print { + display: none !important; +} +@media print { + .visible-print { + display: block !important; + } + table.visible-print { + display: table; + } + tr.visible-print { + display: table-row !important; + } + th.visible-print, + td.visible-print { + display: table-cell !important; + } +} +.visible-print-block { + display: none !important; +} +@media print { + .visible-print-block { + display: block !important; + } +} +.visible-print-inline { + display: none !important; +} +@media print { + .visible-print-inline { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; +} +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} +@media print { + .hidden-print { + display: none !important; + } +} +/*# sourceMappingURL=bootstrap.css.map */ diff --git a/run/resources/public/demo/h-box-demo-words.png b/run/resources/public/demo/h-box-demo-words.png new file mode 100644 index 00000000..7272e67a Binary files /dev/null and b/run/resources/public/demo/h-box-demo-words.png differ diff --git a/run/resources/public/index_dev.html b/run/resources/public/index_dev.html index d2ae98b0..835cdbf6 100644 --- a/run/resources/public/index_dev.html +++ b/run/resources/public/index_dev.html @@ -4,7 +4,8 @@ re-com Demo (dev) - + + diff --git a/src/re_com/alert.cljs b/src/re_com/alert.cljs index 5f02e480..2a299453 100644 --- a/src/re_com/alert.cljs +++ b/src/re_com/alert.cljs @@ -3,7 +3,7 @@ (:require [re-com.util :refer [deref-or-value]] [re-com.buttons :refer [button]] [re-com.box :refer [h-box v-box box scroller border flex-child-style]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? alert-types-list + [re-com.validate :refer [string-or-hiccup? alert-type? alert-types-list vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- @@ -22,8 +22,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles. Applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed. Applied to outer container"]}]) -;(def alert-box-args (extract-arg-data alert-box-args-desc)) - (defn alert-box "Displays one alert box. A close button allows the message to be removed" [& {:keys [id alert-type heading body padding closeable? on-close class style attr] @@ -31,7 +29,8 @@ :as args}] {:pre [(validate-args-macro alert-box-args-desc args "alert-box")]} (let [close-button [button - :label "×" + :label [:i {:class "md-close" + :style {:font-size "20px"}}] ;"×" :on-click (handler-fn (on-close id)) :class "close"] alert-type (if (= alert-type :info) @@ -75,8 +74,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles. Applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed. Applied to outer container"]}]) -;(def alert-list-args (extract-arg-data alert-list-args-desc)) - (defn alert-list "Displays a list of alert-box components in a v-box. Sample alerts object: [{:id 2 diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index dd92a6dd..5561446a 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -1,6 +1,6 @@ (ns re-com.box (:require [clojure.string :as string] - [re-com.validate :refer [extract-arg-data justify-style? justify-options-list align-style? align-options-list + [re-com.validate :refer [justify-style? justify-options-list align-style? align-options-list scroll-style? scroll-options-list string-or-hiccup? css-style? html-attr?] :refer-macros [validate-args-macro]])) (def debug false) @@ -114,31 +114,31 @@ (defn- box-base "This should generally NOT be used as it is the basis for the box, scroller and border components" - [& {:keys [size scroll h-scroll v-scroll width height min-width min-height justify align align-self + [& {:keys [size scroll h-scroll v-scroll width height min-width min-height max-width max-height justify align align-self margin padding border l-border r-border t-border b-border radius bk-color child class-name class style attr]}] (let [s (merge (flex-flow-style "inherit") (flex-child-style size) - (when scroll (scroll-style :overflow scroll)) - (when h-scroll (scroll-style :overflow-x h-scroll)) - (when v-scroll (scroll-style :overflow-y v-scroll)) - (when width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) - (when min-height {:min-height min-height}) - ;(when (and f-container justify) (justify-style justify)) - ;(when (and f-container align) (align-style :align-items align)) - (when justify (justify-style justify)) - (when align (align-style :align-items align)) - (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) + (when scroll (scroll-style :overflow scroll)) + (when h-scroll (scroll-style :overflow-x h-scroll)) + (when v-scroll (scroll-style :overflow-y v-scroll)) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) + (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) + (when justify (justify-style justify)) + (when align (align-style :align-items align)) + (when align-self (align-style :align-self align-self)) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) (when border {:border border}) (when l-border {:border-left l-border}) (when r-border {:border-right r-border}) (when t-border {:border-top t-border}) (when b-border {:border-bottom b-border}) - (when radius {:border-radius radius}) + (when radius {:border-radius radius}) (if bk-color {:background-color bk-color} (if debug {:background-color "lightblue"} {})) @@ -156,12 +156,12 @@ (def gap-args-desc [{:name :size :required true :type "string" :validate-fn string? :description "the length of the whitespace. Typically, an absolute CSS length like 10px or 10em, but can be a stretchy proportional amount like 2"} + {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} + {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def gap-args (extract-arg-data gap-args-desc)) - (defn gap "Returns a component which produces a gap between children in a v-box/h-box along the main axis" [& {:keys [size width height class style attr] @@ -190,8 +190,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def line-args (extract-arg-data line-args-desc)) - (defn line "Returns a component which produces a line between children in a v-box/h-box along the main axis. Specify size in pixels and a stancard CSS color. Defaults to a 1px lightgray line" @@ -215,11 +213,13 @@ (def h-box-args-desc [{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector (or list) of components"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -230,31 +230,33 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def h-box-args (extract-arg-data h-box-args-desc)) - (defn h-box "Returns hiccup which produces a horizontal box. It's primary role is to act as a container for components and lays it's children from left to right. By default, it also acts as a child under it's parent" - [& {:keys [size width height min-width min-height justify align align-self margin padding gap children class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr] :or {size "none" justify :start align :stretch} :as args}] {:pre [(validate-args-macro h-box-args-desc args "h-box")]} (let [s (merge (flex-flow-style "row nowrap") (flex-child-style size) - (if width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) (justify-style justify) (align-style :align-items align) - (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) - (when debug {:background-color "gold"}) + (when align-self (align-style :align-self align-self)) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) + (when debug {:background-color "gold"}) style) - gap-form (when gap [re-com.box/gap :size gap]) + gap-form (when gap [re-com.box/gap + :size gap + :width gap]) ;; required to get around a Chrome bug children (if gap (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps children)] @@ -271,11 +273,13 @@ (def v-box-args-desc [{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector (or list) of components"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -286,31 +290,33 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def v-box-args (extract-arg-data v-box-args-desc)) - (defn v-box "Returns hiccup which produces a vertical box. It's primary role is to act as a container for components and lays it's children from top to bottom. By default, it also acts as a child under it's parent" - [& {:keys [size width height min-width min-height justify align align-self margin padding gap children class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr] :or {size "none" justify :start align :stretch} :as args}] {:pre [(validate-args-macro v-box-args-desc args "v-box")]} (let [s (merge - (flex-flow-style "column nowrap") + (flex-flow-style "column nowrap") (flex-child-style size) - (when width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) - (when min-height {:min-height min-height}) - (justify-style justify) - (align-style :align-items align) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) + (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) + (justify-style justify) + (align-style :align-items align) (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) - (when debug {:background-color "antiquewhite"}) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) + (when debug {:background-color "antiquewhite"}) style) - gap-form (when gap [re-com.box/gap :size gap]) + gap-form (when gap [re-com.box/gap + :size gap + :height gap]) ;; required to get around a Chrome bug children (if gap (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps children)] @@ -327,11 +333,13 @@ (def box-args-desc [{:name :child :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "a component (or string)"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -341,12 +349,10 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def box-args (extract-arg-data box-args-desc)) - (defn box "Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box. By default, it also acts as a container for further child compenents, or another h-box or v-box" - [& {:keys [size width height min-width min-height justify align align-self margin padding child class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding child class style attr] :or {size "none"} :as args}] {:pre [(validate-args-macro box-args-desc args "box")]} @@ -355,6 +361,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :justify justify :align align :align-self align-self @@ -373,7 +381,7 @@ (def scroller-args-desc [{:name :child :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "a component (or string)"} - {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :scroll :required false :default "auto" :type "keyword" :validate-fn scroll-style? :description [:span "Sets both h-scroll and v-scroll at once: " [:br] [:code ":auto"] ": only show scroll bar(s) if the content is larger than the scroller" [:br] [:code ":on"] ": always show scroll bars" [:br] @@ -385,6 +393,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "initial height"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -394,8 +404,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def scroller-args (extract-arg-data scroller-args-desc)) - (defn scroller "Returns hiccup which produces a scoller component. This is the way scroll bars are added to boxes, in favour of adding the scroll attributes directly to the boxes themselves. @@ -409,7 +417,7 @@ :off Never show scroll bar(s). Content which is not in the bounds of the scroller can not be seen. :spill Never show scroll bar(s). Content which is not in the bounds of the scroller spills all over the place. Note: If scroll is set, then setting h-scroll or v-scroll overrides the scroll value" - [& {:keys [size scroll h-scroll v-scroll width height min-width min-height justify align align-self margin padding child class style attr] + [& {:keys [size scroll h-scroll v-scroll width height min-width min-height max-width max-height justify align align-self margin padding child class style attr] :or {size "auto"} :as args}] {:pre [(validate-args-macro scroller-args-desc args "scroller")]} @@ -423,6 +431,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :justify justify :align align :align-self align-self @@ -447,19 +457,19 @@ {:name :t-border :required false :type "string" :validate-fn string? :description [:span "a CSS border style for the top border. Overrides " [:code ":border"]]} {:name :b-border :required false :type "string" :validate-fn string? :description [:span "a CSS border style for the bottom. Overrides " [:code ":border"]]} {:name :radius :required false :type "string" :validate-fn string? :description "a CSS radius style eg.\"2px\""} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS style describing the initial width"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS style describing the initial height"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :margin :required false :type "string" :validate-fn string? :description "a CSS margin style"} {:name :padding :required false :type "string" :validate-fn string? :description "a CSS padding style"} {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def border-args (extract-arg-data border-args-desc)) - (defn border "Returns hiccup which produces a border component. This is the way borders are added to boxes, in favour of adding the border attributes directly to the boxes themselves. @@ -467,7 +477,7 @@ - border-width: thin, medium, thick or standard CSS size (e.g. 2px, 0.5em) - border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset - color: standard CSS color (e.g. grey #88ffee)" - [& {:keys [size width height min-width min-height margin padding border l-border r-border t-border b-border radius child class style attr] + [& {:keys [size width height min-width min-height max-width max-height margin padding border l-border r-border t-border b-border radius child class style attr] :or {size "none"} :as args}] {:pre [(validate-args-macro border-args-desc args "border")]} @@ -478,6 +488,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :margin margin :padding padding :border (if no-border default-border border) diff --git a/src/re_com/buttons.cljs b/src/re_com/buttons.cljs index 5c7cee90..ae8beb67 100644 --- a/src/re_com/buttons.cljs +++ b/src/re_com/buttons.cljs @@ -1,7 +1,7 @@ (ns re-com.buttons (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value px]] - [re-com.validate :refer [extract-arg-data position? position-options-list button-size? button-sizes-list + [re-com.validate :refer [position? position-options-list button-size? button-sizes-list string-or-hiccup? css-style? html-attr? string-or-atom?] :refer-macros [validate-args-macro]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style]] @@ -21,8 +21,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def button-args (extract-arg-data button-args-desc)) - (defn button "Returns the markup for a basic button" [] @@ -76,10 +74,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def md-circle-icon-button-args (extract-arg-data md-circle-icon-button-args-desc)) - -; XXX It should be possible for disabled? to be an atom? - (defn md-circle-icon-button "a circular button containing a material design icon" [] @@ -136,10 +130,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def md-icon-button-args (extract-arg-data md-icon-button-args-desc)) - -; XXX It should be possible for disabled? to be an atom? - (defn md-icon-button "a square button containing a material design icon" [] @@ -193,8 +183,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def info-button-args (extract-arg-data info-button-args-desc)) - (defn info-button "A tiny light grey button, with an 'i' in it. Meant to be unobrusive. When pressed, displays a popup assumidly containing helpful information. @@ -239,8 +227,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def row-button-args (extract-arg-data row-button-args-desc)) - (defn row-button "a circular button containing a material design icon" [] @@ -289,8 +275,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def hyperlink-args (extract-arg-data hyperlink-args-desc)) - (defn hyperlink "Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. @@ -343,8 +327,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def hyperlink-href-args (extract-arg-data hyperlink-href-args-desc)) - (defn hyperlink-href "Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index f7b34e76..2f81d2a3 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -3,7 +3,7 @@ (:require [reagent.core :as reagent] [cljs-time.core :refer [now minus plus months days year month day day-of-week first-day-of-the-month before? after?]] - [re-com.validate :refer [extract-arg-data goog-date? css-style? html-attr?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [goog-date? css-style? html-attr?] :refer-macros [validate-args-macro]] [cljs-time.predicates :refer [sunday?]] [cljs-time.format :refer [parse unparse formatters formatter]] [re-com.box :refer [border h-box flex-child-style]] @@ -214,8 +214,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def datepicker-args (extract-arg-data datepicker-args-desc)) - (defn datepicker [& {:keys [model] :as args}] {:pre [(validate-args-macro datepicker-args-desc args "datepicker")]} @@ -260,8 +258,6 @@ (conj datepicker-args-desc {:name :format :required false :default "yyyy MMM dd" :type "string" :description "a represenatation of a date format. See cljs_time.format"})) -;(def datepicker-dropdown-args (extract-arg-data datepicker-dropdown-args-desc)) - (defn datepicker-dropdown [& {:as args}] {:pre [(validate-args-macro datepicker-dropdown-args-desc args "datepicker-dropdown")]} diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 198122f4..8a5abaae 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value position-for-id item-for-id]] [re-com.box :refer [align-style flex-child-style]] - [re-com.validate :refer [extract-arg-data vector-of-maps? css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [vector-of-maps? css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] [clojure.string :as string] [reagent.core :as reagent])) @@ -203,8 +203,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def single-dropdown-args (extract-arg-data single-dropdown-args-desc)) - (defn single-dropdown "Render a single dropdown component which emulates the bootstrap-choosen style. Sample choices object: [{:id \"AU\" :label \"Australia\" :group \"Group 1\"} diff --git a/src/re_com/input_time.cljs b/src/re_com/input_time.cljs index ca711337..c720c870 100644 --- a/src/re_com/input_time.cljs +++ b/src/re_com/input_time.cljs @@ -1,7 +1,7 @@ (ns re-com.input-time (:require-macros [re-com.core :refer [handler-fn]]) (:require [reagent.core :as reagent] - [re-com.validate :refer [extract-arg-data css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] [re-com.text :refer [label]] [re-com.box :refer [h-box gap]] [re-com.util :refer [pad-zero-number deref-or-value]])) @@ -138,8 +138,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style. e.g. {:color \"red\" :width \"50px\"}" } {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def input-time-args (extract-arg-data input-time-args-desc)) - (defn input-time "I return the markup for an input box which will accept and validate times. Parameters - refer input-time-args above" diff --git a/src/re_com/misc.cljs b/src/re_com/misc.cljs index 79467c75..eb9ed283 100644 --- a/src/re_com/misc.cljs +++ b/src/re_com/misc.cljs @@ -3,7 +3,7 @@ (:require [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] - [re-com.validate :refer [extract-arg-data input-status-type? input-status-types-list regex? + [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? number-or-string? string-or-atom? throbber-size? throbber-sizes-list] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) @@ -31,8 +31,6 @@ {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]} {:name :input-type :required false :type "keyword" :validate-fn keyword? :description "ONLY applies to super function 'base-input-text': either :input or :textarea"}]) -;(def input-text-args (extract-arg-data input-text-args-desc)) - ;; Sample regex's: ;; - #"^(-{0,1})(\d*)$" ;; Signed integer ;; - #"^(\d{0,2})$|^(\d{0,2}\.\d{0,1})$" ;; Specific numeric value ##.# @@ -68,8 +66,7 @@ :warning "has-warning " :error "has-error " "") - (when (and status status-icon?) "has-feedback") - ) + (when (and status status-icon?) "has-feedback")) :style (flex-child-style "auto")} [input-type (merge @@ -164,8 +161,6 @@ {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "the CSS class applied overall to the component"} {:name :label-class :required false :type "string" :validate-fn string? :description "the CSS class applied to the label"}]) -;(def checkbox-args (extract-arg-data checkbox-args-desc)) - ;; TODO: when disabled?, should the text appear "disabled". (defn checkbox "I return the markup for a checkbox, with an optional RHS label" @@ -214,8 +209,6 @@ {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "the CSS class applied overall to the component"} {:name :label-class :required false :type "string" :validate-fn string? :description "the CSS class applied to the label"}]) -;(def radio-button-args (extract-arg-data radio-button-args-desc)) - (defn radio-button "I return the markup for a radio button, with an optional RHS label" [& {:keys [model on-change value label disabled? style label-class label-style] @@ -266,8 +259,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def slider-args (extract-arg-data slider-args-desc)) - (defn slider "Returns markup for an HTML5 slider input" [] @@ -316,8 +307,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def progress-bar-args (extract-arg-data progress-bar-args-desc)) - (defn progress-bar "Render a bootstrap styled progress bar" [& {:keys [model width striped? class style attr] @@ -353,8 +342,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def throbber-args (extract-arg-data throbber-args-desc)) - (defn throbber "Render an animated throbber using CSS" [& {:keys [size color class style attr] :as args}] diff --git a/src/re_com/modal_panel.cljs b/src/re_com/modal_panel.cljs index 61fd83c3..9ae3ce5a 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -1,5 +1,5 @@ (ns re-com.modal-panel - (:require [re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string? css-style? html-attr?] :refer-macros [validate-args-macro]])) + (:require [re-com.validate :refer [string-or-hiccup? number-or-string? css-style? html-attr?] :refer-macros [validate-args-macro]])) ;; ------------------------------------------------------------------------------------ ;; modal-panel @@ -14,8 +14,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def modal-panel-args (extract-arg-data modal-panel-args-desc)) - (defn modal-panel "Renders a modal window centered on screen. A dark transparent backdrop sits between this and the underlying main window to prevent UI interactivity and place user focus on the modal window. diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index e6fd4d6f..b4301072 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -1,8 +1,8 @@ (ns re-com.popover (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]] - [re-com.box :refer [h-box flex-child-style flex-flow-style align-style]] - [re-com.validate :refer [extract-arg-data position? position-options-list popover-status-type? popover-status-types-list number-or-string? + [re-com.box :refer [h-box v-box flex-child-style flex-flow-style align-style]] + [re-com.validate :refer [position? position-options-list popover-status-type? popover-status-types-list number-or-string? string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]] [clojure.string :as string] [reagent.core :as reagent])) @@ -25,7 +25,7 @@ (defn- close-button "A button with a big X in it, placed to the right of the popup" - [showing? close-callback] + [showing? close-callback style] ;; Can't use [button] because [button] already uses [popover] which would be a circular dependency. [:button {:on-click (handler-fn @@ -33,8 +33,12 @@ (close-callback) (reset! showing? false))) :class "close" - :style {:font-size "36px" :height "26px" :margin-top "-8px"}} - "×"]) + :style (merge {:font-size "34px" + :position "absolute" + :top "0px" + :right "0px"} + style)} + [:i {:class "md-close"}]]) (defn- calc-popover-pos @@ -105,8 +109,6 @@ [{:name :opacity :required false :default 0.0 :type "double | string" :validate-fn number-or-string? :description [:span "opacity of backdrop from:" [:br] "0.0 (transparent) to 1.0 (opaque)"]} {:name :on-click :required false :type "( ) -> nil" :validate-fn fn? :description "function to call when the backdrop is clicked"}]) -;(def backdrop-args (extract-arg-data backdrop-args-desc)) - (defn- backdrop "Renders a backdrop dive which fills the entire page and responds to clicks on it. Can also specify how tranparent it should be" [& {:keys [opacity on-click] :as args}] @@ -153,8 +155,6 @@ {:name :tooltip-style? :required false :default false :type "boolean" :description "setup popover styles for a tooltip"} {:name :title :required false :type "string | markup" :description "describes a title"}]) -;(def popover-border-args (extract-arg-data popover-border-args-desc)) - (defn popover-border "Renders an element or control along with a Bootstrap popover" [& {:keys [children position width height popover-color arrow-length arrow-width padding margin-left margin-top tooltip-style? title] @@ -230,13 +230,11 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-title-args-desc - [{:name :showing? :required true :type "boolean | atom" :description "when the value is true, the popover shows."} + [{:name :showing? :required true :type "boolean atom" :description "an atom. When the value is true, the popover shows."} {:name :title :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "describes the title of the popover. Default font size is 18px to make it stand out"} {:name :close-button? :required false :default true :type "boolean" :description "when true, displays the close button"} {:name :close-callback :required false :type "function" :validate-fn fn? :description "callback taking no parameters, used when the close button is pressed. Not required if :showing? atom passed in OR :close-button? is set to false"}]) -;(def popover-title-args (extract-arg-data popover-title-args-desc)) - (defn- popover-title "Renders a title at the top of a popover with an optional close button on the far right" [& {:keys [title showing? close-button? close-callback] @@ -258,7 +256,7 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-content-wrapper-args-desc - [{:name :showing? :required true :default false :type "boolean | atom" :description "an atom. when the value is true, the popover shows."} + [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows."} {:name :position :required true :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :no-clip? :required false :default false :type "boolean" :description "when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. By passing true for this parameter, re-com will use a different CSS method to show the popover. This method is slightly inferior because the popover can't track the anchor if it is repositioned"} {:name :width :required false :type "string" :validate-fn string? :description "a CSS style representing the popover width"} @@ -275,8 +273,6 @@ {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) -;(def popover-content-wrapper-args (extract-arg-data popover-content-wrapper-args-desc)) - (defn popover-content-wrapper "Abstracts several components to handle the 90% of cases for general popovers and dialog boxes" [& {:keys [showing? position no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width padding style] @@ -337,14 +333,12 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-anchor-wrapper-args-desc - [{:name :showing? :required true :default false :type "boolean | atom" :description "when the value is true, the popover shows"} + [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows"} {:name :position :required true :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :anchor :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the component the popover is attached to"} {:name :popover :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the popover body component"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) -;(def popover-anchor-wrapper-args (extract-arg-data popover-anchor-wrapper-args-desc)) - (defn popover-anchor-wrapper "Renders an element or control along with a Bootstrap popover" [& {:keys [showing? position anchor popover style] :as args}] @@ -357,7 +351,8 @@ style)} [:div ;; Wrapper around the anchor and the "point" {:class "rc-point-wrapper display-inline-flex" - :style (merge (flex-flow-style flex-flow) + :style (merge (flex-child-style "auto") + (flex-flow-style flex-flow) (align-style :align-items :center))} (when place-anchor-before? anchor) (when @showing? @@ -375,20 +370,19 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-tooltip-args-desc - [{:name :label :required true :type "string | hiccup | atom" :validate-fn string-or-hiccup? :description "the text (or component) for the tooltip"} - {:name :showing? :required true :default false :type "boolean" :description "when the value is true, the tooltip shows"} - {:name :on-cancel :required false :type "function" :validate-fn fn? :description "a callback taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)"} - {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} - {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} - {:name :position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} - {:name :width :required false :type "string" :validate-fn string? :description "specifies width of the tooltip"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) - -;(def popover-tooltip-args (extract-arg-data popover-tooltip-args-desc)) + [{:name :label :required true :type "string | hiccup | atom" :validate-fn string-or-hiccup? :description "the text (or component) for the tooltip"} + {:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the tooltip shows"} + {:name :on-cancel :required false :type "function" :validate-fn fn? :description "a callback taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)"} + {:name :close-button? :required false :default false :type "boolean" :description "when true, displays the close button"} + {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} + {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} + {:name :position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} + {:name :width :required false :type "string" :validate-fn string? :description "specifies width of the tooltip"} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) (defn popover-tooltip "Renders text as a tooltip in Bootstrap popover style" - [& {:keys [label showing? on-cancel status anchor position width style] :as args}] + [& {:keys [label showing? on-cancel close-button? status anchor position width style] :as args}] {:pre [(validate-args-macro popover-tooltip-args-desc args "popover-tooltip")]} (let [label (deref-or-value label) popover-color (case status @@ -411,13 +405,17 @@ :padding "3px 8px" :arrow-length 6 :arrow-width 12 - :body [:div - {:style (if (= status :info) - {:color "white" - :font-size "14px" - :padding "4px"} - {:color "white" - :font-size "12px" - :font-weight "bold" - :text-align "center"})} - label]]])) + :body [v-box + :style (if (= status :info) + {:color "white" + :font-size "14px" + :padding "4px"} + {:color "white" + :font-size "12px" + :font-weight "bold" + :text-align "center"}) + :children [label (when close-button? + [close-button showing? on-cancel {:font-size "20px" + :color "white" + :text-shadow "none" + :right "1px"}])]]]])) diff --git a/src/re_com/selection_list.cljs b/src/re_com/selection_list.cljs index 480ffa84..0411828d 100644 --- a/src/re_com/selection_list.cljs +++ b/src/re_com/selection_list.cljs @@ -3,7 +3,7 @@ (:require [re-com.text :refer [label]] [re-com.misc :refer [checkbox radio-button]] [re-com.box :refer [box border h-box v-box]] - [re-com.validate :refer [extract-arg-data vector-of-maps? string-or-atom? set-or-atom?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [vector-of-maps? string-or-atom? set-or-atom?] :refer-macros [validate-args-macro]] [re-com.util :refer [fmap deref-or-value]])) ;; ---------------------------------------------------------------------------- @@ -96,8 +96,6 @@ {:name :item-renderer :required false :type "function | atom" :validate-fn fn? :description "called for each element during setup, the returned component renders the element, responds to clicks etc."} {:name :label-fn :required false :default 'str :type "function | atom" :validate-fn ifn? :description "called for each element to get label string"}]) -;(def selection-list-args (extract-arg-data selection-list-args-desc)) - ;;TODO hide hover highlights for links when disabled (defn- list-container [{:keys [choices model on-change multi-select? disabled? hide-border? label-fn required? as-exclusions? item-renderer] diff --git a/src/re_com/splits.cljs b/src/re_com/splits.cljs index a62608e9..4c31e425 100644 --- a/src/re_com/splits.cljs +++ b/src/re_com/splits.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id sum-scroll-offsets]] [re-com.box :refer [flex-child-style flex-flow-style]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string? html-attr? css-style?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [string-or-hiccup? number-or-string? html-attr? css-style?] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) @@ -36,25 +36,26 @@ ;; Component: h-split ;; ------------------------------------------------------------------------------------ -(def h-split-args-desc - [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left panel"} - {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right panel"} - {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} - {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} - {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} - {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} - {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) - -;(def h-split-args (extract-arg-data h-split-args-desc)) +(def hv-split-args-desc + [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left (or top) panel"} + {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right (or bottom) panel"} + {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "applied to the outer container of the two panels. Equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} + {:name :width :required false :type "string" :validate-fn string? :description "width of the outer container of the two panels. A CSS width style"} + {:name :height :required false :type "string" :validate-fn string? :description "height of the outer container of the two panels. A CSS height style"} + {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} + {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} + {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} + {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} + {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} + {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) (defn h-split "Returns markup for a horizontal layout component" - [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] - :or {initial-split 50 splitter-size "8px" margin "8px"} + [& {:keys [panel-1 panel-2 size width height on-split-change initial-split splitter-size margin class style attr] + :or {size "auto" initial-split 50 splitter-size "8px" margin "8px"} :as args}] - {:pre [(validate-args-macro h-split-args-desc args "h-split")]} + {:pre [(validate-args-macro hv-split-args-desc args "h-split")]} (let [container-id (gensym "h-split-") split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of width dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)? @@ -91,9 +92,11 @@ make-container-attrs (fn [class style attr in-drag?] (merge {:class (str "rc-h-split display-flex " class) :id container-id - :style (merge (flex-child-style "auto") + :style (merge (flex-child-style size) (flex-flow-style "row nowrap") - {:margin margin} + {:margin margin + :width width + :height height} style)} (when in-drag? ;; only listen when we are dragging {:on-mouse-up (handler-fn (stop-drag)) @@ -130,25 +133,12 @@ ;; Component: v-split ;; ------------------------------------------------------------------------------------ -(def v-split-args-desc - [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the top panel"} - {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the bottom panel"} - {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} - {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} - {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} - {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} - {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) - -;(def v-split-args (extract-arg-data v-split-args-desc)) - (defn v-split "Returns markup for a vertical layout component" - [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] - :or {initial-split 50 splitter-size "8px" margin "8px"} + [& {:keys [panel-1 panel-2 size width height on-split-change initial-split splitter-size margin class style attr] + :or {size "auto" initial-split 50 splitter-size "8px" margin "8px"} :as args}] - {:pre [(validate-args-macro v-split-args-desc args "v-split")]} + {:pre [(validate-args-macro hv-split-args-desc args "v-split")]} (let [container-id (gensym "v-split-") split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of height dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)? @@ -185,9 +175,11 @@ make-container-attrs (fn [class style attr in-drag?] (merge {:class (str "rc-v-split display-flex " class) :id container-id - :style (merge (flex-child-style "auto") + :style (merge (flex-child-style size) (flex-flow-style "column nowrap") - {:margin margin} + {:margin margin + :width width + :height height} style)} (when in-drag? ;; only listen when we are dragging {:on-mouse-up (handler-fn (stop-drag)) diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index 55df4716..282b6446 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value]] [re-com.box :refer [flex-child-style]] - [re-com.validate :refer [extract-arg-data vector-of-maps?] :refer-macros [validate-args-macro]])) + [re-com.validate :refer [css-style? vector-of-maps?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- @@ -14,12 +14,11 @@ {:name :model :required true :type "unique-id | atom" :description "the unique identifier of the currently selected tab"} {:name :on-change :required true :type "(unique-id) -> nil" :validate-fn fn? :description "called when user alters the selection. Passed the unique identifier of the selection"} {:name :id-fn :required false :default :id :type "(map) -> anything" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns the unique identifier for this tab"]} - {:name :label-fn :required false :default :label :type "(map) -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]}]) - -;(def tabs-args (extract-arg-data tabs-args-desc)) + {:name :label-fn :required false :default :label :type "(map) -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (for each individual tab rather than the container)"}]) (defn horizontal-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -37,8 +36,9 @@ {:class (if selected? "active") :key (str id)} [:a - {:style {:cursor "pointer"} - :on-click (when on-change (handler-fn (on-change id)))} + {:style (merge {:cursor "pointer"} + style) + :on-click (when on-change (handler-fn (on-change id)))} label]]))])) @@ -47,7 +47,7 @@ ;;-------------------------------------------------------------------------------------------------- (defn- bar-tabs - [& {:keys [model tabs on-change id-fn label-fn vertical?]}] + [& {:keys [model tabs on-change id-fn label-fn style vertical?]}] (let [current (deref-or-value model) tabs (deref-or-value tabs) _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] @@ -58,16 +58,17 @@ (let [id (id-fn t) label (label-fn t) selected? (= id current)] ;; must use current instead of @model to avoid reagent warnings - [:button.btn.btn-default + [:button {:type "button" :key (str id) :class (str "btn btn-default " (if selected? "active")) - :on-click (when on-change (handler-fn (on-change id)))} + :style style + :on-click (when on-change (handler-fn (on-change id)))} label]))])) (defn horizontal-bar-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -75,12 +76,13 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? false)) (defn vertical-bar-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -88,6 +90,7 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? true)) @@ -98,10 +101,10 @@ ;;-------------------------------------------------------------------------------------------------- (defn- pill-tabs ;; tabs-like in action - [& {:keys [model tabs on-change id-fn label-fn vertical?]}] + [& {:keys [model tabs on-change id-fn label-fn style vertical?]}] (let [current (deref-or-value model) tabs (deref-or-value tabs) - _ (assert (not-empty (filter #(= current (:id %)) tabs)) "model not found in tabs vector")] + _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] [:ul {:class (str "rc-tabs noselect nav nav-pills" (when vertical? " nav-stacked")) :style (flex-child-style "none") @@ -114,15 +117,14 @@ {:class (if selected? "active" "") :key (str id)} [:a - {:style {:cursor "pointer"} - ;:on-click #(on-change id) - :on-click (when on-change (handler-fn (on-change id))) - } + {:style (merge {:cursor "pointer"} + style) + :on-click (when on-change (handler-fn (on-change id)))} label]]))])) (defn horizontal-pill-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn style label-fn] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -130,13 +132,14 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? false)) (defn vertical-pill-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn style label-fn] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -144,6 +147,7 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? true)) diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index 0595c54e..9e3985db 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -1,7 +1,7 @@ (ns re-com.text (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.box :refer [v-box box line flex-child-style]] - [re-com.validate :refer [extract-arg-data title-levels-list title-level-type? css-style? + [re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? string-or-hiccup?] :refer-macros [validate-args-macro]])) @@ -17,8 +17,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "additional CSS styles"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def label-args (extract-arg-data label-args-desc)) - (defn label "Returns markup for a basic label" [& {:keys [label on-click width class style attr] @@ -36,7 +34,7 @@ (when on-click {:on-click (handler-fn (on-click))}) attr) - (str label)]]) + label]]) ;; ------------------------------------------------------------------------------------ @@ -53,8 +51,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def title-args (extract-arg-data title-args-desc)) - (defn title "A title with four preset levels" [& {:keys [label level underline? margin-top margin-bottom class style attr] @@ -87,6 +83,9 @@ [m children] (if (map? f) [f (rest children)] [nil children]) - m (merge {:style {:width "450px" :min-width "450px" :font-size "15px"}} + m (merge {:style {:flex "none" + :width "450px" + :min-width "450px" + :font-size "15px"}} m)] [:span m (into [:p] children)])) ;; having the wrapping span allow children to contain [:ul] etc \ No newline at end of file diff --git a/src/re_demo/alert_list.cljs b/src/re_demo/alert_list.cljs index a3efdbfa..5cb9f1e5 100644 --- a/src/re_demo/alert_list.cljs +++ b/src/re_demo/alert_list.cljs @@ -44,7 +44,7 @@ [button :label "Add alert" :style {:width "100px"} - :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button ."})]] + :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]] [p "Also, try clicking the \"x\" on alerts."] [p [:code ":max-height"] " is set to 300px. A scroll bar will appear as necessary."] [p "For demonstration purposes, a 'dotted' " [:code ":border-style"] " is set."] diff --git a/src/re_demo/gap.cljs b/src/re_demo/gap.cljs index df7bcc14..f11d9f60 100644 --- a/src/re_demo/gap.cljs +++ b/src/re_demo/gap.cljs @@ -37,18 +37,36 @@ {:style {:width "40em"}} "[h-box :gap \"10px\" ; <-- in between each children - :children [[component-1] - [component-2] + :children [[grey-box] + [grey-box] [gap :size \"5px\"] ; <-- ad hoc - [component-3]]]"] + [grey-box]]]"] + [p "Result:"] + [h-box + :gap "10px" + :style {:border "dashed 1px red"} + :children [[box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 1"] + [box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 2"] + [gap :size "5px"] + [box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 3"]]] + [gap :size "10px"] [p "Notes:" [:ul [:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a given amount of white space between each child."] [:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."] [:li "In this example, the gap between components 2 and 3 will be 25px - because the [gap ] is a child of the h-box and will have 10px above and below."]]] + because the [gap] is a child of the h-box and will have 10px left and right of it."]]] [gap :size "10px"] [line] diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 26dee258..906c296e 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,53 +1,400 @@ (ns re-demo.h-box - (:require [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs]] + (:require [clojure.string :as string] + [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href + slider horizontal-bar-tabs info-button input-text input-textarea + popover-anchor-wrapper popover-content-wrapper popover-tooltip px] :refer-macros [handler-fn]] [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]] - [reagent.core :as reagent])) - - -(def rounded-panel (merge (flex-child-style "1") - {:background-color "#fff4f4" - :border "1px solid lightgray" - :border-radius "4px" - :padding "4px"})) - -(def h-box-style {}) ;{ :overflow "hidden"}) - -(def size-options [{:id :inital :label "initial"} - {:id :auto :label "auto"} - {:id :none :label "none"} - {:id :px :label "px"} - {:id :% :label "num"}]) - -(def box-state (reagent/atom - {:hbox {:width "500px" - :height "100px" - :justify :start - :gap "4px"} - :box1 {:size "none" - ; :min-width "200px" - ; :height "200px" - :text "Box1"} - :box2 {:size "0 1 50px" - :text "Box2" - :align-self :center} - :box3 {:size "0 1 100px" - :text "Box3"}})) + [re-com.validate :refer [string-or-hiccup? alert-type? vector-of-maps?]] + [reagent.core :as reagent] + [reagent.ratom :refer-macros [reaction]])) + + +(def h-box-style {;:background-color "yellow" + ;:padding "4px" + ;:overflow "hidden" + }) + +(def panel-style (merge (flex-child-style "1") + {:background-color "#fff4f4" + :border "1px solid lightgray" + :border-radius "4px" + :padding "0px" + :overflow "hidden"})) + +(def over-style {:background-color "#fcc"}) + +(def editor-style {:font-size "12px" + :line-height "20px" + :padding "6px 8px"}) + +(def current-demo (reagent/atom 0)) + +;(def paragraph-filler "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.") +;(def paragraph-filler "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.") +(def paragraph-filler [v-box + :children [[:p.bold "Lorem Ipsum"] + [:p "dolor sit amet, consectetur adipiscing elit."] + [:p "Sed do " [:strong "eiusmod"] " tempor incididunt ut labore et dolore magna aliqua."] + [:p [:strong "Ut enim "] " ad minim veniam " [:code "quis nostrud"] " exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."] + [:p.bold "Duis aute irure:"] + [:ul + [:li "Dolor in reprehenderit in voluptate velit esse."] + [:li "Cillum dolore eu fugiat nulla pariatur."] + [:li "Excepteur sint occaecat cupidatat non proident."] + ;[:li "Sunt in culpa qui officia deserunt mollit anim id est laborum."] + ]]]) + +(def buttons-filler [h-box + :children [[button + :label "Blue" + :class "btn-primary" + :on-click #()] + [gap :size "12px" :width "12px"] + [button + :label "White" + :on-click #()]]]) + +(def demos [;; Basic + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "300px" :omit? true :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}}} + + ;; Justify + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? false :editing? (atom true)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":justify"] " parameter"] + [:p "Specifies how children (the three boxes) are arranged horizontally."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Select different " [:code ":justify"] " values and notice how the children are repositioned."] + [:li "Untick " [:code ":justify"] ". When not specified, the default value is :start."]] + [:p [:code ":justify"] " is the analog of " [hyperlink-href + :label "Flexbox justify-content style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" + :target "_blank"] "."] + [:p [:strong "Note: "] "There is a bug in Chrome. When switching from :between to :around (or visa versa), the change is not shown. To get around this, select a different value beforehand."]]]} + + ;; Align + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? false :editing? (atom true)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :center :omit? false :editing? (atom true)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :end :omit? false :editing? (atom true)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":align"] " & " [:code ":align-self"] " parameters"] + [:p [:code ":align"] " specifies how children are arranged vertically."] + [:p [:code ":align-self"] " is used on individual children to override the :align value specified by their parent."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Select different " [:code ":align"] " values for the h-box and notice how this only affects Box1 because both other boxes have an overriding :align-self setting."] + [:li "Change the " [:code ":align-self"] " values for Box2 and Box3 to see them adjust their vertical position."] + [:li "Adjust the h-box " [:code ":height"] " and notice boxes 2 and 3 sticking to their specified alignment."]] + [:p [:code ":align"] " is the analog of " [hyperlink-href + :label "Flexbox align-items style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" + :target "_blank"] "."]]]} + + ;; Size + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "none" :omit? false :editing? (atom true) :type :none :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "100px" :omit? false :editing? (atom true) :type :px :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "1" :omit? false :editing? (atom true) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":size"] " parameter"] + [p "The " + [hyperlink-href + :label [:span "Layout page"] + :href "#/layout" + :target "_blank"] + " describes the importance of " [:code ":size"] "."] + [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much width as its content, in this case, the text \"Box1\"."] + [:p [:strong "Box2"] " has a fixed 100 pixel " [:code ":size"] ". Width in the case on an h-box."] + [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which means it will greedily take as much width as it can."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Adjust the h-box " [:code ":width"] " and notice how Box1 and Box2 don't change in width, and Box3 greedily takes any excess space and squeezes down to nothing as the h-box width is reduced further."] + [:li "Set the Box2 " [:code ":size"] " to a ratio value of \"2\" and notice how it will always take up double the width of Box3 (ratio \"1\") as you adjust the h-box " [:code ":width"] "."] + [:li "Set the Box2 " [:code ":size"] " to a gsb value of \"0 0 80%\". Its width is fixed to 80% of its parent h-box, with no growing or shrinking. Box1 and Box2 now have fixed widths. Box3 can grow and shrink. See this in action as you adjust the h-box " [:code ":width"] "."] + ] + [:p [:code ":size"] " is the analog of " [hyperlink-href + :label "Flexbox flex style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/flex" + :target "_blank"] "."]]]} + + ;; Size2 + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "500px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "5 1 200px" :omit? false :editing? (atom true) :type :gsb :px "100px" :ratio "2" :gsb "5 1 200px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "1 3 200px" :omit? false :editing? (atom true) :type :gsb :px "150px" :ratio "1" :gsb "1 3 200px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":size"] " parameter - Advanced GSB"] + [:p "This demonstrates a complex example of gsb."] + [:p [:strong "Box1"] " has a " [:code ":size"] " fixed to \"100px\"."] + [:p [:strong "Box2"] " has a gsb of \"5 1 200px\" so its natural width is 200px and when it grows, it will do so with a ratio of 5, compared with other growable siblings. When it shrinks, it will do so at a ratio of 1, compared with other shrinkable siblings."] + [:p [:strong "Box3"] " has a gsb of \"1 3 200px\" so its natural width is also 200px and when it grows, it will do so with a ratio of 1. When it shrinks, it will do so at a ratio of 3."] + [:p "Notice that the width of the h-box is initially set to 500px. Box1 (100px) + Box2 (200px basis) + Box3 (200px basis) = 500px so this width is the point of equilibrium. There is no shrinking or growing required so we see that Box2 and Box3 have exactly the same width of 200px."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Increase the h-box " [:code ":width"] " from the initial 500px. The extra space (excluding the initial 200px for Box2 and Box3) will be distributed between Box2 and Box3 in a ratio of 5 to 1, so Box2 will grow faster than Box3."] + [:li "Decrease the h-box " [:code ":width"] " from the initial 500px. The space to be removed from Box2 and Box3 will be removed in a ratio of 1 to 3, so Box3 will shrink faster than Box2 until it reaches 0px. Box2 will then continue to reduce until it too gets to 0px."] + ]]]} + + ;; Width + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom true ) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom true) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "100px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "200px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :max-width {:value "200px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "25px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "75px" :omit? false :editing? (atom true) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":width"] " & " [:code ":min/max-width"] " parameters"] + [:p "It's interesting to see how child :min-width and :max-width parameters affect layout."] + [:p "All three boxes have " [:code ":size"] " set to :auto so they can grow and shrink as required."] + [:p "Box1 has no width restrictions, Box2 has a :min-width and Box3 has a :max-width."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Decrease the h-box " [:code ":width"] " and notice how Box2 shrinks only until it reaches the minimum of 100px."] + [:li "Increase the h-box " [:code ":width"] " and notice how Box3 grows only until it reaches the maximum of 75px."] + [:li "Turn on " [:code ":min-width"] " for Box3 and while adjusting the h-box " [:code ":width"] ", notice how Box3 grows & shrinks only between the min and max values."] + ]]]} + + ;; Height + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? false :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "40px" :omit? false :editing? (atom true) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "80px" :omit? false :editing? (atom true) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "110px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":height"] " parameter"] + [:p "It's interesting to see how the child :height parameter affects layout."] + [:p "A specific :height has been set for Box1 and Box2, while Box3 has none, so its height is being set by the h-box :align :stretch setting."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Turn on the Box3 " [:code ":height"] " parameter and see how it can spill outside the h-box when it has a :height set."] + [:li "Turn off the h-box " [:code ":height"] " parameter then adjust the :height of one or more boxes. Notice how h-box :height is now determined by the height on the maximum box heights."] + ]]]} + + ;; Children + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "600px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom true) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value paragraph-filler :omit? false :editing? (atom true) :type :paras :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value buttons-filler :omit? false :editing? (atom true) :type :buttons :text "Box3"} + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "100px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :end :omit? false :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":children"] " & " [:code ":child"] " parameters"] + [:p "The content of an h-box is specified by the " [:code ":children"] " parameter. It's a vector of n components."] + [:p "The content of a box is specified by the " [:code ":child"] " parameter. It is a single component."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Adjust the h-box " [:code ":width"] " parameter to see how Box2 is the only one that shrinks and grows."] + [:li "Turn off the h-box " [:code ":height"] " parameter to see how it automatically expands to show the rest of the content in Box2."] + [:li "Edit the box " [:code ":child"] " parameters to change the content to see how the current layout handles more or less content."] + ]]]} + ]) + +(def box-state (reaction (get demos @current-demo))) + +(def show-desc? (reagent/atom true)) (defn merge-named-params "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v - (merge-named-params [box :a 1] {:b 2 :c 3}) - ;; => [box :a 1 :b 2 :c 3] + the values in the map, are in turn maps + if, in the value map, :omit? is true, omit this parameter altogether + otherwise use :value for the value of the parameter + Example: + (merge-named-params [box :a 1] {:b {:value 2} :c {:value 3 :omit? true}}) + ;; => [box :a 1 :b 2] " [v m] - (->> m - (filter second) ;; remove nil valued members - (reduce concat []) - (into v) - vec)) - + (let [m (remove (comp :omit? second) m) + names (keys m) + values (map :value (vals m))] + (into v (interleave names values)))) (defn make-box "produces something like: @@ -58,151 +405,414 @@ :child [:div {:style rounded-panel} \"Box 1\"]] " [box-parameters] - (-> [box :style h-box-style] - (merge-named-params (dissoc box-parameters :text)) - (conj :child) - (conj [:div {:style rounded-panel} (:text box-parameters)]))) - - - -(defn demo - "creates the hiccup for the real demo, with its child boxes and all" - [] - (-> [h-box - :padding "4px" - :style {:border "dashed 1px red"}] - (merge-named-params (:hbox @box-state)) - (conj :children) - (conj [(make-box (:box1 @box-state)) - (make-box (:box2 @box-state)) - (make-box (:box3 @box-state)) ]))) - + (let [over? (:over? box-parameters)] + (-> [box :style h-box-style] + (merge-named-params (dissoc box-parameters :over? :text)) + (conj :child) + (conj [:div {:style (merge panel-style + (when over? over-style))} (get-in box-parameters [:text :value])])))) + +(defn close-button + "close button used for all the editors" + [on-close] + [button + :label [:i {:class "md-close" + :style {:font-size "20px" + :margin-left "8px"}}] + :on-click #(on-close) + :class "close"]) + +(defn px-editor + "provides a single slider to edit pixel value in the state atom" + [path] + (let [model (reaction (js/parseInt (get-in @box-state (conj path :value)))) + [min max] (get-in @box-state (conj path :range))] + (fn [path on-close] + [h-box + :align :center + :children [[slider + :model model + :min min + :max max + :width "200px" + :on-change #(swap! box-state assoc-in (conj path :value) (px %))] + [close-button on-close]]]))) + +(defn justify-editor + "provides horizontal bar tabs to set the :justify value in the state atom" + [path] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :between :label ":between"} + {:id :around :label ":around"}] + model (reaction (get-in @box-state (conj path :value)))] + (fn + [path on-close] + [h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(swap! box-state assoc-in (conj path :value) %)] + [close-button on-close]]]))) + +(defn align-editor + "provides horizontal bar tabs to set the :align OR :align-self values in the state atom" + [path] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :baseline :label ":baseline"} + {:id :stretch :label ":stretch"}] + model (reaction (get-in @box-state (conj path :value)))] + (fn + [path on-close] + [h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(swap! box-state assoc-in (conj path :value) %)] + [close-button on-close]]]))) + +(defn child-editor + "provides several options for the :child parameters, including typing your own text" + [path] + (let [opts [{:id :text :label "Text"} + {:id :paras :label "Paragraphs"} + {:id :buttons :label "Buttons"}] + model (reaction (get-in @box-state (conj path :type))) + text-model (reaction (get-in @box-state (conj path :text))) + update-model (fn [path item new-model] + (swap! box-state assoc-in (conj path item) new-model) + (swap! box-state assoc-in (conj path :value) (case (get-in @box-state (conj path :type)) + :text @text-model + :paras paragraph-filler + :buttons buttons-filler)))] + (fn + [path on-close] + [h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(update-model path :type %)] + (when (= @model :text) [gap :size "8px" :width "8px"]) + (when (= @model :text) + [input-text + :model text-model + :change-on-blur? false + :style editor-style + :on-change #(update-model path :text %)]) + [close-button on-close]]]))) + +(defn box-size + "works out what to pass to :size from a map like {:value \"none\" :omit? false :type :none :px \"\100px\" :ratio \"1\" :gsb \"\"}" + [size-spec] + (cond (= (:type size-spec) :px) (:px size-spec) + (= (:type size-spec) :ratio) (:ratio size-spec) + (= (:type size-spec) :gsb) (:gsb size-spec) + :else (name (:type size-spec)))) + +(defn size-editor + "a more complex component to edit :size values in the state atom" + [path] + (let [opts [{:id :inital :label "initial"} + {:id :auto :label "auto"} + {:id :none :label "none"} + {:id :px :label "px"} + {:id :ratio :label "ratio"} + {:id :gsb :label "g s b"}] + model (reaction (get-in @box-state (conj path :type))) + px-model (reaction (js/parseInt (get-in @box-state (conj path :px)))) + ratio-model (reaction (js/parseInt (get-in @box-state (conj path :ratio)))) + gsb-model (reaction (get-in @box-state (conj path :gsb))) + update-model (fn [path item new-model] + (swap! box-state assoc-in (conj path item) new-model) + (swap! box-state assoc-in (conj path :value) (box-size (get-in @box-state path)))) + size-status (reagent/atom nil)] + (fn + [path on-close] + [v-box + :gap "4px" + :children [[h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(do (update-model path :type %) + (reset! size-status nil))] + (when (contains? #{:px :ratio :gsb} @model) + [gap :size "8px" :width "8px"]) + (when (= @model :px) + [slider + :model px-model + :min 0 + :max 800 + :width "200px" + :style editor-style + :on-change #(update-model path :px (px %))]) + (when (= @model :ratio) + [slider + :model ratio-model + :min 0 + :max 10 + :width "200px" + :style editor-style + :on-change #(update-model path :ratio (str %))]) + (when (= @model :gsb) + [input-text + :model gsb-model + :change-on-blur? false + :status @size-status + :status-icon? true + :status-tooltip "Ignored - please enter 1 or 3 values" + :width "200px" + :style editor-style + :on-change #(let [valid? (contains? #{1 3} (count (string/split (string/trim %) #"\s+")))] + (if valid? + (do (reset! size-status nil) + (update-model path :gsb %)) + (reset! size-status :warning)))]) + [close-button on-close]]] + [:span + {:style {:font-family "Segoe UI, Roboto, sans-serif" + :font-size "10px" + :color "#aaa"}} + "GSB: " (case @model + :inital "0 1 auto" + :auto "1 1 auto" + :none "0 0 auto" + :px (str "0 0 " @px-model "px") + :ratio (str @ratio-model " 1 0px") + :gsb @gsb-model)]]]))) -(defn gap-editor - [overrow? path] - (let [open (reagent/atom false)] - )) -(defn editor-button - [mouse-over-row? open?] - [box - :size "100px" - :align-self :center - :justify :center - :child [:div {:class "md-play-arrow rc-icon-smaller" - :style {:color "lightgrey" - :XXXX 1}}]]) (defn indent-px [ident] (ident {:0 "0px" - :1 "15px" - :2 "25px" - :3 "35px"})) + :1 "14px" + :2 "28px" + :3 "42px"})) (defn code-row - "A code row consists of: - - up to three pieces of text (all optional), typically: + "Render a single code row consisting of: + - up to three pieces of text, typically: 1. parameter name - 2. parameter value - 3. rarely, a closing ']' - - an editor openn" - [indent text1 text2 text3 on-over editor] - - (let [mouse-over-row? (reagent/atom false) + 2. parameter value, specified as a path into the state atom + 3. end text, usually, a closing ']' + - an editor to open" + [active? indent text1 path text3 on-over editor] + (let [editing?-path (when editor (conj path :editing?)) + toggle-editor (handler-fn (swap! box-state update-in editing?-path (fn [v] (atom (not @v))))) + mouse-over-row? (reagent/atom false) mouse-over-fn (fn [val] (reset! mouse-over-row? val) (if on-over (on-over val)) nil) - editor-open? (reagent/atom false) - ] - (fn [indent text1 text2 text3 on-over editor] + omit? (reaction (and (vector? path) + (map? (get-in @box-state path)) + (get-in @box-state (conj path :omit?))))] + (fn [active? indent text1 path text2 on-over editor] + (let [arg-val (when editor + (let [val (get-in @box-state (conj path :value))] + (cond + (nil? val) "-" + (keyword? val) (str val) + (vector? val) "[hiccup]" + :else (str "\"" val "\"")))) + row-active? (and @mouse-over-row? active?) + mouse-over-group? (= (nth path 0) (:over-group @box-state)) + show-checkbox? (and row-active? (not (contains? (set path) :text))) + allow-edit? (and row-active? (not @omit?)) + editing? (if editor (get-in @box-state editing?-path) (reagent/atom false)) + arg-hiccup [h-box + :width "242px" + :style (merge {:overflow "hidden"} + (when @editing? {:background-color "#e8e8e8"}) + (when mouse-over-group? {:background-color "#e8e8e8"}) + (when row-active? {:background-color "#d8d8d8" + :cursor "pointer"}) + (when @omit? {:color "#c0c0c0"})) + :attr {:on-mouse-over #(mouse-over-fn true) + :on-mouse-out #(mouse-over-fn false)} + :children [[box + :size "20px" + :child (if (and editor (not (contains? (set path) :text))) ;show-checkbox? ;; TODO: Cleanup here if we like always showing checkboxes + [checkbox + :model (not @omit?) + :style {:opacity "0.6"} + :on-change #(do (swap! box-state assoc-in (conj path :omit?) (not %)) + (swap! box-state assoc-in editing?-path (atom %)))] + [:span])] ;; when no checkbox, use a filler + [gap :size (indent-px indent)] + [box + :size "100px" + :attr (when allow-edit? {:on-click toggle-editor}) + :style (when @omit? {:text-decoration "line-through"}) + :child text1] + [box + :attr (when allow-edit? {:on-click toggle-editor}) + :style (when @omit? {:text-decoration "line-through"}) + :child [:span + [:span {:style (when allow-edit? {:color "blue"})} arg-val] + text2]]]]] + (if editor + [popover-anchor-wrapper + :showing? editing? + :position :right-center + :anchor arg-hiccup + :popover [popover-content-wrapper + :showing? editing? + :position :right-center + :body [editor path #(swap! box-state assoc-in editing?-path (atom false))]]] + arg-hiccup))))) + + +(defn choose-a-demo + "choose a demo to show" + [] + (let [opts [{:id 0 :label "Basic"} + {:id 1 :label ":justify"} + {:id 2 :label ":align"} + {:id 3 :label ":size"} + {:id 4 :label ":size2"} + {:id 5 :label ":width"} + {:id 6 :label ":height"} + {:id 7 :label ":children"} + ]] + (fn + [] [h-box - :attr {:on-mouse-over #(mouse-over-fn true) - :on-mouse-out #(mouse-over-fn false)} - :style {:background-color (if @mouse-over-row? "#f0f0f0")} - :children [[gap :size (indent-px indent)] ;; leading indent - [box :size "100px" :child text1] ;; often the parameter - [box :size "100px" :child text2] ;; often the parameter value - [box :size "5px" :child text3] ;; often the parameter value - #_(if editor editor) - ]]))) + :gap "8px" + :align :center + :children [[:span.bold "Show me:"] + [horizontal-bar-tabs + :model current-demo + :tabs opts + :on-change #(do (reset! current-demo %) + (reset! show-desc? true))]]]))) +(defn demo + "creates the hiccup for the actual demo, with its child boxes and all" + [] + (let [over? (:over? (:hbox @box-state))] + (-> [h-box + :padding "4px" + :style (merge {:border "dashed 1px red"} + (when over? over-style))] + (merge-named-params (dissoc (:hbox @box-state) :over?)) + (conj :children) + (conj [(make-box (:box1 @box-state)) + (make-box (:box2 @box-state)) + (make-box (:box3 @box-state))])))) (defn editable-code - "Shows the code in a way that values can be edited, allowing for an interactive demo." + "Shows the code in a way that values can be edited, allowing for an interactive demo" [] - (let [over-hbox (fn [over?] ) - over-box1 (fn [over?] ) - over-box2 (fn [over?] )] + (let [over-hbox (fn [over?] (swap! box-state assoc-in [:hbox :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :hbox))) + over-box1 (fn [over?] (swap! box-state assoc-in [:box1 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box1))) + over-box2 (fn [over?] (swap! box-state assoc-in [:box2 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box2))) + over-box3 (fn [over?] (swap! box-state assoc-in [:box3 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box3)))] (fn [] - [v-box - :children [[gap :size "20px"] - + [h-box + :align :start + :children [(when (:desc @box-state) + [popover-tooltip + :showing? show-desc? + :position :left-below + :width "460px" + :status :info + :close-button? true + :anchor [:div {:style {:height "42px"}}] ;; Position the popover down the page a little + :label (:desc @box-state)]) [v-box + :width "260px" :style {:font-family "Consolas, \"Courier New\", monospace" + :font-size "12px" :background-color "#f5f5f5" :border "1px solid lightgray" :border-radius "4px" :padding "8px"} - :children [[code-row :0 "[h-box" "" "" over-hbox :indent :0 :indent2 "80px" ] - [code-row :1 " :size" "\"500px\"" "" over-hbox :indent :1 :indent2 "100px" ] - [code-row :1 " :gap" "\"1px\"" "" over-hbox :indent :1 :indent2 "100px" :editor [gap-editor]] - [code-row :1 " :children" " [" "" over-hbox :indent :1 :indent2 "100px" ] - - [code-row :2 "[box " "" "" over-box1] - [code-row :3 " :child" "\"Box1\"" "" over-box1] - [code-row :3 " :size" "\"auto\"" "" over-box1] - [code-row :3 " :align-self" ":center" "" over-box1] - [code-row :3 " :height" "\"50px\"" "" over-box1] - [code-row :3 " :min-width" "100px" "]" over-box1] - - [code-row :2 "[box " "" "" over-box2] - [code-row :3 " :child" "\"Box2\"" "" over-box2] - [code-row :3 " :size" "\"auto\"" "" over-box2] - [code-row :3 " :align-self" ":center" "" over-box2] - [code-row :3 " :height" "\"50px\"" "" over-box2] - [code-row :3 " :min-width" "100px" "]" over-box2] - - [code-row :0 "]" "" "" over-hbox ] - ]]]]))) - - - - (defn panel + :children [[code-row false :0 "[h-box" [:hbox] "" over-hbox] + [code-row true :1 ":height" [:hbox :height] "" over-hbox px-editor] + [code-row true :1 ":width" [:hbox :width] "" over-hbox px-editor] + [code-row true :1 ":justify" [:hbox :justify] "" over-hbox justify-editor] + [code-row true :1 ":align" [:hbox :align] "" over-hbox align-editor] + [code-row true :1 ":gap" [:hbox :gap] "" over-hbox px-editor] + [code-row false :1 ":children [" [:hbox] "" over-hbox] + + [code-row false :2 "[box " [:box1] "" over-box1] + [code-row true :3 ":child" [:box1 :text] "" over-box1 child-editor] + [code-row true :3 ":size" [:box1 :size] "" over-box1 size-editor] + [code-row true :3 ":align-self" [:box1 :align-self] "" over-box1 align-editor] + [code-row true :3 ":height" [:box1 :height] "" over-box1 px-editor] + [code-row true :3 ":min-width" [:box1 :min-width] "" over-box1 px-editor] + [code-row true :3 ":max-width" [:box1 :max-width] "]" over-box1 px-editor] + + [code-row false :2 "[box " [:box2] "" over-box2] + [code-row true :3 ":child" [:box2 :text] "" over-box2 child-editor] + [code-row true :3 ":size" [:box2 :size] "" over-box2 size-editor] + [code-row true :3 ":align-self" [:box2 :align-self] "" over-box2 align-editor] + [code-row true :3 ":height" [:box2 :height] "" over-box2 px-editor] + [code-row true :3 ":min-width" [:box2 :min-width] "" over-box2 px-editor] + [code-row true :3 ":max-width" [:box2 :max-width] "]" over-box2 px-editor] + + [code-row false :2 "[box " [:box3] "" over-box3] + [code-row true :3 ":child" [:box3 :text] "" over-box3 child-editor] + [code-row true :3 ":size" [:box3 :size] "" over-box3 size-editor] + [code-row true :3 ":align-self" [:box3 :align-self] "" over-box3 align-editor] + [code-row true :3 ":height" [:box3 :height] "" over-box3 px-editor] + [code-row true :3 ":min-width" [:box3 :min-width] "" over-box3 px-editor] + [code-row true :3 ":max-width" [:box3 :max-width] "]]" over-box3 px-editor]]] + (when (= @current-demo 0) + [:img {:src "demo/h-box-demo-words.png" + :style {:flex "none" + :margin-left "20px"}}])]]))) + + +(defn panel + [] + (fn [] - - (fn - [] - [v-box - :size "auto" - :gap "10px" - :children [[panel-title "[h-box ... ]" - "src/re_com/box.cljs" - "src/re_demo/h_box.cljs"] - - [h-box - :gap "100px" - :children [[v-box - :gap "10px" - :width "450px" - :children [[title2 "Notes"] - [status-text "Stable"] - [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] - - [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] "The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] - [p "Todo: Nestability with v-box"] - - [args-table h-box-args-desc]]] - [v-box - :gap "10px" - :width "500px" - :children [[title2 "Demo"] - [p "An interactive demo is coming ..."] - #_[p "This is an intereactive demo. Edit the \"code\" (in grey) and watch the boxes change. The red-dashed box is an h-box whch contains up to four children."] - #_[demo] - #_[editable-code]]] - ]] - [gap :size "30px"]]])) + [v-box + :size "auto" + :gap "10px" + :children [[panel-title "[h-box ... ]" + "src/re_com/box.cljs" + "src/re_demo/h_box.cljs"] + + [h-box + :gap "100px" + :children [[v-box + :gap "10px" + :width "450px" + :children [[title2 "Notes"] + [status-text "Stable"] + [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] + [p "The " + [hyperlink-href + :label [:span.bold "Layout page"] + :href "#/layout"] + " describes the importance of " [:span.bold ":size"] "."] + [args-table h-box-args-desc]]] + [v-box + :gap "10px" + :width "650px" + :height "800px" + ;:style {:border "dashed 1px #ddd"} + :children [[title2 "Demo"] + [editable-code] + [gap :size "0px"] + [demo] + [gap :size "0px"] + [choose-a-demo] + ]]]]]])) diff --git a/src/re_demo/input_text.cljs b/src/re_demo/input_text.cljs index 5168993f..9ab70a46 100644 --- a/src/re_demo/input_text.cljs +++ b/src/re_demo/input_text.cljs @@ -121,15 +121,16 @@ (reset! status :error) (reset! status-tooltip "Error tooltip - this (optionally) appears when there are errors on input-text components.")) :style {:margin-left "20px"}]]] - [checkbox - :label [h-box - :align :start - :gap "5px" - :children [[:code ":status-icon?"] - [:span " (notice the tooltips on the icons)"]]] - :model status-icon? - :on-change (fn [val] - (reset! status-icon? val))] + [h-box + :align :start + :gap "5px" + :children [[checkbox + :label [:code ":status-icon?"] + :model status-icon? + :on-change (fn [val] + (reset! status-icon? val))] + [:span " (notice the tooltips on the icons)"]]] + [v-box :children [[box :align :start :child [:code ":validation-regex"]] [radio-button diff --git a/src/re_demo/layout.cljs b/src/re_demo/layout.cljs index fcc702a3..12bd8d1d 100644 --- a/src/re_demo/layout.cljs +++ b/src/re_demo/layout.cljs @@ -9,10 +9,10 @@ [v-box :children [[title :level :level2 :label "The Components"] [p "Re-com has layout components which are not themselves visible - - they just arrange other components."] + they just arrange other components."] [p "The key components are " [:span.bold "h-box"] " and " [:span.bold "v-box"] " which arange - their children horizontally and vertically respectively. Because they are - mutually nestable, you can combine them to create arbitrarily complex layouts."]]]) + their children horizontally and vertically respectively. Because they are + mutually nestable, you can combine them to create arbitrarily complex layouts."]]]) (defn example-layout @@ -26,7 +26,7 @@ [p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."] [:pre {:style {:width "460px"}} - "[v-box +"[v-box :children [[box :child \"Header\"] [h-box :height \"100px\" @@ -65,17 +65,17 @@ [p "To fully understand Re-com's layout components and use them powerfully, you " [:span.bold "will"] " need to have a strong understanding of Flexbox. You should do these tutorials very soon:" - [:ul - [:li - [hyperlink-href - :label "CSS-Tricks guide to flexbox" - :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox" - :target "_blank"]] - [:li - [hyperlink-href - :label "The Ultimate Flexbox Cheat Sheet" - :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html" - :target "_blank"]]]]]] + [:ul + [:li + [hyperlink-href + :label "CSS-Tricks guide to flexbox" + :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox" + :target "_blank"]] + [:li + [hyperlink-href + :label "The Ultimate Flexbox Cheat Sheet" + :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html" + :target "_blank"]]]]]] [v-box :style {:font-size "13px" :color "#aaa"} @@ -90,20 +90,18 @@ :label "25 years ago" :href "http://i.stanford.edu/pub/cstr/reports/csl/tr/88/358/CSL-TR-88-358.pdf" :target "_blank"] - ", and yet HTML5 only has a weak, half-arsed version?"] - ]]]] + ", and yet HTML5 only has a weak, half-arsed version?"]]]]] [v-box :children [[title :level :level2 :label "Warning: Be All In"] - [p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] " (children). - Invariably, DOM nodes act as both a container for the level below, and an item for the level above."] + [p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] + " (children). Invariably, DOM nodes act as both a container for the level below, and an item for the level above."] [p "If block-level elements (divs?) are present in this tree, they - can break the flex style interplay up and down the DOM hierarchy, and cause problems."] + can break the flex style interplay up and down the DOM hierarchy, and cause problems."] [p [:span.bold "As a result, we have found Flexbox use to be viral."] " Once you start using it, you - end up using it everywhere - right up and down the DOM tree."] + end up using it everywhere - right up and down the DOM tree."] [p "So, we recommend you go 100% all-in on using h-box and v-box. If you do, everything should \"just work\"."] [p "Never mint your own container " [:span.bold "[:div]"] " or " [:span.bold "[:span]"] " unless - you also give them the correct flex styles, which is arduous and error prone."] - ]]]]) + you also give them the correct flex styles, which is arduous and error prone."]]]]]) (defn key-style-section @@ -112,30 +110,27 @@ :children [[title :level :level2 :label "The Key Style"] [p "Flexbox is about styles on " [:span.bold "containers"] " and their child " [:span.bold "items"] "."] [p "While tutorials will walk you through the menagerie of flexbox related styles, - we've found that one, more than any other, is - critical to getting what you want: the " [:span.bold "flex"] " style of the items."] + we've found that one, more than any other, is critical to getting what you want: the " [:span.bold "flex"] " style of the items."] [p "Worth repeating: if you are having trouble with a layout, pay particular attention to the " [:span.bold "flex"] " styles on the items within that layout."] [title :level :level2 :label "flex=GSB"] - [p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] " or " [:span.bold "auto"] ". - But those are shortcuts. Every flex style resolves to a triple of sub-values:" + [p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] " or " [:span.bold "auto"] + ". But those are shortcuts. Every flex style resolves to a triple of sub-values:" [:ul - [:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (proportionally to its siblngs) if there is - extra container space to distribute. 0 for no growing."]] - [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (proportionally to its siblngs) if container - space is reduced. 0 for no shrinking."]] - [:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or - shrinking. Can be:" + [:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (in proportion to its siblings) if there is + extra container space to distribute. 0 for no growing."]] + [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container + space is reduced. 0 for no shrinking."]] + [:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or shrinking. Can be:" [:ul - [:li "absolute length values like \"100px\" or \"40em\"" ] - [:li [:span.bold "auto"] " which means use the natural size of the item" ] + [:li "absolute length values like \"100px\" or \"40em\""] + [:li [:span.bold "auto"] " which means use the natural size of the item"] [:li "proporational values like \"60\""]]]]]] [p "Shortcut values are always transformed into a triple. For example:" [:ul - [:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""] ] - [:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""] ] - ]] + [:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""]] + [:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""]]]] [p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."] [gap :size "10px"]]]) @@ -146,84 +141,83 @@ col2 "130px" col3 "500px" col3-style {:style {:width col3}}] - [h-box - :class (if header? "rc-div-table-header" "rc-div-table-row") - :children [[label :width col1 :label size] - [label :width col2 :label gsb] - (if header? - [label :width col3 :label description] - [:span col3-style description])]])) + [h-box + :class (if header? "rc-div-table-header" "rc-div-table-row") + :children [[label :width col1 :label size] + [label :width col2 :label gsb] + (if header? + [label :width col3 :label description] + [:span col3-style description])]])) (defn size-table [] - [v-box - :children [[title :level :level2 :label ":size is flex"] - [p "Various layout components, such as " [:span.bold "v-box"] " and " [:span.bold "h-box"] " and " [:span.bold "gap"] " take a " [:span.bold ":size"] " parameter which " - "exactly matches the " [:span.bold "flex"] " style talked about to the left."] - [gap :size "10px"] - [:pre - {:style {:width "460px"}} - "[v-box - :size \"auto\" ;; <-- equivalent of \"flex\" style - :children [...]]"] - [p "Look again at the Simple Example up the top of this page, and you'll see " - [:span.bold ":size"] " being used. Values like \"70px\" and \"1\" are provided."] - [gap :size "10px"] - [p "This table of useful shortcuts might help."] - [v-box - :class "rc-div-table" - :align-self :start - :children [[table-row - ":size" - "G S B" - "Description" - true] - [table-row - "initial" - "0 1 auto" - "Use the item's length. Never grow. Shrink if necessary. - Good for creating items with a natural maximum size, which can - shrink to some smaller size, typically given by min-width/height, if space becomes tight. "] - [table-row - "auto" - "1 1 auto" - "Use the item's length. Grow if necessary. Shrink (to min-size) if necessary. - Good for creating items that happily take as much - space as they are allowed, or can shrink as much as they are forced to. - If necessary, use min-width/height to provide limits."] - [table-row - "none" - "0 0 auto" - "Use the item's length. Never grow. Never shrink. - Good for creating rigid items that stick to their width/height if specified, otherwise their content size."] - [table-row - "100px" - "0 0 100px" - "Item is given a fixed length of 100px (in the flex direction). - Good for headers/footers of fixed size, or LHS nav columns."] - - [table-row - "60" - "60 1 0px" - [:span "Set the item's default length to be 60 sibling-proportional units. - Allow it to streach. And it can shrink to nothing." - [:br] - "Look back at the \"Sample Example\" up the - top. Notice that the \"content\" part has a :size of \"1\". Because the other child had a fixed - size of 70px, the Content streaches to fill all available space. No other sibling is making claims for space, so \"1\" might as well be \"100%\"."]] - [table-row - "g s b" - "grow shrink basis" - "If none of the shortcut values above meet your needs, - you can always provide the triple yourself, to gain precise control. For example, the following item ..."] - [table-row - "1 0 auto" - "1 0 auto" - [:span "In this very app, the light grey part of the LHS nav has this " [:span.bold ":size"] ". The light - grey background colour must always strech to the bottom of the page, hence - the streach. The basis comes from its child nav items, hence the auto. - But it can't go smaller than its children, hence shrink of 0."]] - ]]]]) + [v-box + :children [[title :level :level2 :label ":size is flex"] + [p "Various layout components, such as " [:span.bold "v-box"] " and " [:span.bold "h-box"] " and " [:span.bold "gap"] " take a " [:span.bold ":size"] " parameter which " + "exactly matches the " [:span.bold "flex"] " style talked about to the left."] + [gap :size "10px"] + [:pre + {:style {:width "460px"}} +"[v-box +:size \"auto\" ;; <-- equivalent of \"flex\" style +:children [...]]"] + [p "Look again at the Simple Example up the top of this page, and you'll see " + [:span.bold ":size"] " being used. Values like \"70px\" and \"1\" are provided."] + [gap :size "10px"] + [p "This table of useful shortcuts might help."] + [v-box + :class "rc-div-table" + :align-self :start + :children [[table-row + ":size" + "G S B" + "Description" + true] + [table-row + "initial" + "0 1 auto" + "Use the item's length. Never grow. Shrink if necessary. + Good for creating items with a natural maximum size, which can + shrink to some smaller size, typically given by min-width/height, if space becomes tight. "] + [table-row + "auto" + "1 1 auto" + "Use the item's length. Grow if necessary. Shrink (to min-size) if necessary. + Good for creating items that happily take as much + space as they are allowed, or can shrink as much as they are forced to. + If necessary, use min-width/height to provide limits."] + [table-row + "none" + "0 0 auto" + "Use the item's length. Never grow. Never shrink. + Good for creating rigid items that stick to their width/height if specified, otherwise their content size."] + [table-row + "100px" + "0 0 100px" + "Item is given a fixed length of 100px (in the flex direction). + Good for headers/footers of fixed size, or LHS nav columns."] + + [table-row + "60" + "60 1 0px" + [:span "Set the item's default length to be 60 sibling-proportional units. + Allow it to stretch. And it can shrink to nothing." + [:br] + "Look back at the \"Sample Example\" up the + top. Notice that the \"content\" part has a :size of \"1\". Because the other child had a fixed + size of 70px, the Content stretches to fill all available space. No other sibling is making claims for space, so \"1\" might as well be \"100%\"."]] + [table-row + "g s b" + "grow shrink basis" + "If none of the shortcut values above meet your needs, + you can always provide the triple yourself, to gain precise control. For example, the following item ..."] + [table-row + "1 0 auto" + "1 0 auto" + [:span "In this very app, the light grey part of the LHS nav has this " [:span.bold ":size"] ". The light + grey background colour must always strech to the bottom of the page, hence + the stretch. The basis comes from its child nav items, hence the auto. + But it can't go smaller than its children, hence shrink of 0."]]]]]]) @@ -242,7 +236,6 @@ :gap "100px" :children [[key-style-section] [size-table]]] - [gap :size "20px"]]]) diff --git a/src/re_demo/line.cljs b/src/re_demo/line.cljs index 106c7291..259efdc0 100644 --- a/src/re_demo/line.cljs +++ b/src/re_demo/line.cljs @@ -26,18 +26,18 @@ [v-box :gap "10px" :children [[title2 "Demo"] - [p "For an example, look at the top of this page, there's a title " [:span.bold "[Line ...]"] + [p "For an example, look at the top of this page. There's a title " [:span.bold "[line ...]"] ", and notice the line under it."] [p "Here is some sample code..."] [:pre {:style {:width "40em"}} "[h-box :gap \"10px\" - :children [[grey-box-1] + :children [[grey-box] [line :size \"3px\" :color \"red\"] - [grey-box-2]]]"] + [grey-box]]]"] [p "Here is the result..."] [h-box :gap "10px" diff --git a/src/re_demo/popover_dialog_demo.cljs b/src/re_demo/popover_dialog_demo.cljs index 08f96e1e..1ed2d734 100644 --- a/src/re_demo/popover_dialog_demo.cljs +++ b/src/re_demo/popover_dialog_demo.cljs @@ -24,7 +24,7 @@ :body [(fn [] ;; NOTE: THIS IS NASTY BUT REQUIRED (OTHERWISE DIALOG WILL NOT BE UPDATED WHEN ATOMS CHANGES) [v-box :children [[label - :label "The body of a popover can act like a dialog box containg standard input controls."] + :label "The body of a popover can act like a dialog box containing standard input controls."] [gap :size "15px"] [h-box :children [[v-box diff --git a/src/re_demo/row_button.cljs b/src/re_demo/row_button.cljs index c5ef1d2c..7d29ef8e 100644 --- a/src/re_demo/row_button.cljs +++ b/src/re_demo/row_button.cljs @@ -73,8 +73,7 @@ [v-box :class "rc-div-table" :style {:font-size (when @large-font "24px")} - :children [^{:key "0"} - [h-box + :children [[h-box :class "rc-div-table-header" :children [[label :label "Sort" :width (:sort col-widths)] [label :label "Name" :width (:name col-widths)] diff --git a/src/re_demo/selection_list.cljs b/src/re_demo/selection_list.cljs index 310916ea..03a5b45d 100644 --- a/src/re_demo/selection_list.cljs +++ b/src/re_demo/selection_list.cljs @@ -65,7 +65,7 @@ :multi-select? multi-select? :disabled? disabled? :required? required? - :on-change #(reset! selections %)]]] + :on-change #(do (println "selections: '" % "'") (reset! selections %))]]] multi-select? disabled? required? diff --git a/src/re_demo/splits.cljs b/src/re_demo/splits.cljs index 3dc9024b..2397b856 100644 --- a/src/re_demo/splits.cljs +++ b/src/re_demo/splits.cljs @@ -1,6 +1,6 @@ (ns re-demo.splits (:require [re-com.core :refer [h-box v-box box gap line scroller border h-split v-split title flex-child-style p]] - [re-com.splits :refer [h-split-args-desc v-split-args-desc]] + [re-com.splits :refer [hv-split-args-desc]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]])) @@ -63,34 +63,25 @@ :children [[v-box :gap "10px" :width "450px" - :children [[title2 "[h-split ...]"] + :children [[title2 "[h-split ... ] & [v-split ... ]"] [status-text "Stable"] - [p "Arranges two components horizontally and provides a splitter bar between them."] - [p "By dragging the splitter bar, a user can change the width allocated to each."] + [p "Arranges two components horizontally (or vertically) and provides a splitter bar between them."] + [p "By dragging the splitter bar, a user can change the width (or height) allocated to each."] [p "Can contain further nested layout components."] - [args-table h-split-args-desc]]] + [args-table hv-split-args-desc]]] [v-box :size "auto" :gap "10px" + :height "800px" :children [[title2 "Demo"] + [title :level :level3 :label "[h-split]"] [h-split :panel-1 [left-panel] - :panel-2 [right-panel]]]]]] - [line :style {:margin-top "20px"}] - [h-box - :gap "100px" - :children [[v-box - :gap "10px" - :width "450px" - :children [[title2 "[v-split ...]"] - [p "Same as above, but vertical."] - [args-table v-split-args-desc]]] - [v-box - :size "auto" - :gap "10px" - :children [[title2 "Demo"] + :panel-2 [right-panel] + :size "300px"] + [title :level :level3 :label "[v-split]"] [v-split :panel-1 [top-panel] :panel-2 [bottom-panel] - :initial-split "25%"]]]]] - [gap :size "30px"]]]) + :size "300px" + :initial-split "25%"]]]]]]]) diff --git a/src/re_demo/tabs.cljs b/src/re_demo/tabs.cljs index d2eb6f12..6b502180 100644 --- a/src/re_demo/tabs.cljs +++ b/src/re_demo/tabs.cljs @@ -43,8 +43,8 @@ "[horizontal-tabs ... ]" {:width fn-name-width :font-size "20px"}] [horizontal-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center @@ -52,8 +52,8 @@ "[horizontal-bar-tabs ... ]" {:width fn-name-width :font-size "20px"}] [horizontal-bar-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center @@ -61,8 +61,8 @@ "[vertical-bar-tabs ... ]" {:width fn-name-width :font-size "20px"}] [vertical-bar-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center diff --git a/src/re_demo/v_box.cljs b/src/re_demo/v_box.cljs index f76200cd..b86d1155 100644 --- a/src/re_demo/v_box.cljs +++ b/src/re_demo/v_box.cljs @@ -20,10 +20,10 @@ :width "450px" :children [[title2 "Notes"] [status-text "Stable"] - [p "TBA..."] + [p "Same as [h-box] except in the vertical direction."] + [p "See [h-box] for further details."] [args-table v-box-args-desc]]] [v-box :gap "10px" :children [[title2 "Demo"] - [:span.all-small-caps "TBA..."]]]]] - [gap :size "30px"]]]) + [p "Refer to the full interactive demo in the [h-box] section, then tilt your head 90 degrees."]]]]]]])