diff options
Diffstat (limited to 'examples/hybrid-html5/app/Frontend/styles')
6 files changed, 1338 insertions, 0 deletions
diff --git a/examples/hybrid-html5/app/Frontend/styles/README.md b/examples/hybrid-html5/app/Frontend/styles/README.md new file mode 100644 index 0000000..dc50ced --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/README.md @@ -0,0 +1,28 @@ +WARNING note about global style dir +------------------------------------- + + - styles placed in Frontend/styles is global and will be posted in dist.prod/styles + - styles defined within widget or page directory will be place in dist.prof/opa/styles + +This model allows to share global styles by multiple applications. + +To change this behaviour just rename styles directory on something else [eg: appstyles] + + + |---- /Frontend + | | + | |---- /styles + | | | + | | |---- _settings.scss + | | |---- app.scss + | | + | |---- /Widgets + | | | + | | |--- widget.js + | | |--- widget.sccs + | | + | |-----/Pages + | |--- page-partial.html + | |--- page-cntrl.js + | |--- page-style.scss + | diff --git a/examples/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss b/examples/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss new file mode 100644 index 0000000..b2fb2ec --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss @@ -0,0 +1,52 @@ +/* + Every SCSS files will be injected into main HTML page +*/ +shadow-transition { + transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + border-radius: 5px; +} + +@mixin ibz-box-content { + border: 2px solid gainsboro !important; + border-radius: 5px; + + margin-left: auto; + margin-right: auto; + min-width: 98% !important; + margin: .5rem .5rem .5rem .5rem; + background: rgba(200,205,200,.3); +} + +@mixin ibz-button ($color, $size:2rem) { + display: inline-block; + border: 1px solid darken($color,10%); + box-shadow: 2px 2px 1px adjust-hue($color,20deg); + color: $color; + border-radius: 5px; + font-style: italic; + padding: 0rem .5rem 0rem .5rem; + margin:.5rem; + background: lighten(#9494b7, 20%); + i { + padding-right: 0.3rem; + font-size: $size; + } + span {font-size: 1rem} + + &:hover { + background: lighten($color, 45%); + border: 2px solid darken($color,20%); + + } +} + +@mixin ibz-input-alert ($color, $background) { + position :fixed; + margin: -2.2rem 0 0 15rem; + border-radius: 5px; + font-style: italic; + border-color: darken($background,10%); + color: $color; + background-color: $background !important; + padding: 0.2rem !important; +} diff --git a/examples/hybrid-html5/app/Frontend/styles/app/ibz-global.scss b/examples/hybrid-html5/app/Frontend/styles/app/ibz-global.scss new file mode 100644 index 0000000..1f5017e --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/app/ibz-global.scss @@ -0,0 +1,43 @@ +/* +Copyright (C) 2015 "IoT.bzh" +Author "Fulup Ar Foll" + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ + +@import "app/ibz-mixins"; + +submit-button { + float: right; + @include ibz-button(grey); +} + +zf-modal { + background-color: rgba(180,180,180,.5); +} + +.box-content { + @include ibz-box-content; + + .box-title { + display: block; + font-size: 1.3rem; + } +} + +// Change Notifications default size +.ui-notification { + width: auto; + border-radius: 5px; +}
\ No newline at end of file diff --git a/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss b/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss new file mode 100644 index 0000000..d401f3c --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss @@ -0,0 +1,591 @@ +/* + * Foundation Icons v 3.0 + * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3 + * MIT License + */ + +@font-face { + font-family: "foundation-icons"; + src: url("/bower_components/foundation-icons.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + + +.fi-address-book:before, +.fi-alert:before, +.fi-align-center:before, +.fi-align-justify:before, +.fi-align-left:before, +.fi-align-right:before, +.fi-anchor:before, +.fi-annotate:before, +.fi-archive:before, +.fi-arrow-down:before, +.fi-arrow-left:before, +.fi-arrow-right:before, +.fi-arrow-up:before, +.fi-arrows-compress:before, +.fi-arrows-expand:before, +.fi-arrows-in:before, +.fi-arrows-out:before, +.fi-asl:before, +.fi-asterisk:before, +.fi-at-sign:before, +.fi-background-color:before, +.fi-battery-empty:before, +.fi-battery-full:before, +.fi-battery-half:before, +.fi-bitcoin-circle:before, +.fi-bitcoin:before, +.fi-blind:before, +.fi-bluetooth:before, +.fi-bold:before, +.fi-book-bookmark:before, +.fi-book:before, +.fi-bookmark:before, +.fi-braille:before, +.fi-burst-new:before, +.fi-burst-sale:before, +.fi-burst:before, +.fi-calendar:before, +.fi-camera:before, +.fi-check:before, +.fi-checkbox:before, +.fi-clipboard-notes:before, +.fi-clipboard-pencil:before, +.fi-clipboard:before, +.fi-clock:before, +.fi-closed-caption:before, +.fi-cloud:before, +.fi-comment-minus:before, +.fi-comment-quotes:before, +.fi-comment-video:before, +.fi-comment:before, +.fi-comments:before, +.fi-compass:before, +.fi-contrast:before, +.fi-credit-card:before, +.fi-crop:before, +.fi-crown:before, +.fi-css3:before, +.fi-database:before, +.fi-die-five:before, +.fi-die-four:before, +.fi-die-one:before, +.fi-die-six:before, +.fi-die-three:before, +.fi-die-two:before, +.fi-dislike:before, +.fi-dollar-bill:before, +.fi-dollar:before, +.fi-download:before, +.fi-eject:before, +.fi-elevator:before, +.fi-euro:before, +.fi-eye:before, +.fi-fast-forward:before, +.fi-female-symbol:before, +.fi-female:before, +.fi-filter:before, +.fi-first-aid:before, +.fi-flag:before, +.fi-folder-add:before, +.fi-folder-lock:before, +.fi-folder:before, +.fi-foot:before, +.fi-foundation:before, +.fi-graph-bar:before, +.fi-graph-horizontal:before, +.fi-graph-pie:before, +.fi-graph-trend:before, +.fi-guide-dog:before, +.fi-hearing-aid:before, +.fi-heart:before, +.fi-home:before, +.fi-html5:before, +.fi-indent-less:before, +.fi-indent-more:before, +.fi-info:before, +.fi-italic:before, +.fi-key:before, +.fi-laptop:before, +.fi-layout:before, +.fi-lightbulb:before, +.fi-like:before, +.fi-link:before, +.fi-list-bullet:before, +.fi-list-number:before, +.fi-list-thumbnails:before, +.fi-list:before, +.fi-lock:before, +.fi-loop:before, +.fi-magnifying-glass:before, +.fi-mail:before, +.fi-male-female:before, +.fi-male-symbol:before, +.fi-male:before, +.fi-map:before, +.fi-marker:before, +.fi-megaphone:before, +.fi-microphone:before, +.fi-minus-circle:before, +.fi-minus:before, +.fi-mobile-signal:before, +.fi-mobile:before, +.fi-monitor:before, +.fi-mountains:before, +.fi-music:before, +.fi-next:before, +.fi-no-dogs:before, +.fi-no-smoking:before, +.fi-page-add:before, +.fi-page-copy:before, +.fi-page-csv:before, +.fi-page-delete:before, +.fi-page-doc:before, +.fi-page-edit:before, +.fi-page-export-csv:before, +.fi-page-export-doc:before, +.fi-page-export-pdf:before, +.fi-page-export:before, +.fi-page-filled:before, +.fi-page-multiple:before, +.fi-page-pdf:before, +.fi-page-remove:before, +.fi-page-search:before, +.fi-page:before, +.fi-paint-bucket:before, +.fi-paperclip:before, +.fi-pause:before, +.fi-paw:before, +.fi-paypal:before, +.fi-pencil:before, +.fi-photo:before, +.fi-play-circle:before, +.fi-play-video:before, +.fi-play:before, +.fi-plus:before, +.fi-pound:before, +.fi-power:before, +.fi-previous:before, +.fi-price-tag:before, +.fi-pricetag-multiple:before, +.fi-print:before, +.fi-prohibited:before, +.fi-projection-screen:before, +.fi-puzzle:before, +.fi-quote:before, +.fi-record:before, +.fi-refresh:before, +.fi-results-demographics:before, +.fi-results:before, +.fi-rewind-ten:before, +.fi-rewind:before, +.fi-rss:before, +.fi-safety-cone:before, +.fi-save:before, +.fi-share:before, +.fi-sheriff-badge:before, +.fi-shield:before, +.fi-shopping-bag:before, +.fi-shopping-cart:before, +.fi-shuffle:before, +.fi-skull:before, +.fi-social-500px:before, +.fi-social-adobe:before, +.fi-social-amazon:before, +.fi-social-android:before, +.fi-social-apple:before, +.fi-social-behance:before, +.fi-social-bing:before, +.fi-social-blogger:before, +.fi-social-delicious:before, +.fi-social-designer-news:before, +.fi-social-deviant-art:before, +.fi-social-digg:before, +.fi-social-dribbble:before, +.fi-social-drive:before, +.fi-social-dropbox:before, +.fi-social-evernote:before, +.fi-social-facebook:before, +.fi-social-flickr:before, +.fi-social-forrst:before, +.fi-social-foursquare:before, +.fi-social-game-center:before, +.fi-social-github:before, +.fi-social-google-plus:before, +.fi-social-hacker-news:before, +.fi-social-hi5:before, +.fi-social-instagram:before, +.fi-social-joomla:before, +.fi-social-lastfm:before, +.fi-social-linkedin:before, +.fi-social-medium:before, +.fi-social-myspace:before, +.fi-social-orkut:before, +.fi-social-path:before, +.fi-social-picasa:before, +.fi-social-pinterest:before, +.fi-social-rdio:before, +.fi-social-reddit:before, +.fi-social-skillshare:before, +.fi-social-skype:before, +.fi-social-smashing-mag:before, +.fi-social-snapchat:before, +.fi-social-spotify:before, +.fi-social-squidoo:before, +.fi-social-stack-overflow:before, +.fi-social-steam:before, +.fi-social-stumbleupon:before, +.fi-social-treehouse:before, +.fi-social-tumblr:before, +.fi-social-twitter:before, +.fi-social-vimeo:before, +.fi-social-windows:before, +.fi-social-xbox:before, +.fi-social-yahoo:before, +.fi-social-yelp:before, +.fi-social-youtube:before, +.fi-social-zerply:before, +.fi-social-zurb:before, +.fi-sound:before, +.fi-star:before, +.fi-stop:before, +.fi-strikethrough:before, +.fi-subscript:before, +.fi-superscript:before, +.fi-tablet-landscape:before, +.fi-tablet-portrait:before, +.fi-target-two:before, +.fi-target:before, +.fi-telephone-accessible:before, +.fi-telephone:before, +.fi-text-color:before, +.fi-thumbnails:before, +.fi-ticket:before, +.fi-torso-business:before, +.fi-torso-female:before, +.fi-torso:before, +.fi-torsos-all-female:before, +.fi-torsos-all:before, +.fi-torsos-female-male:before, +.fi-torsos-male-female:before, +.fi-torsos:before, +.fi-trash:before, +.fi-trees:before, +.fi-trophy:before, +.fi-underline:before, +.fi-universal-access:before, +.fi-unlink:before, +.fi-unlock:before, +.fi-upload-cloud:before, +.fi-upload:before, +.fi-usb:before, +.fi-video:before, +.fi-volume-none:before, +.fi-volume-strike:before, +.fi-volume:before, +.fi-web:before, +.fi-wheelchair:before, +.fi-widget:before, +.fi-wrench:before, +.fi-x-circle:before, +.fi-x:before, +.fi-yen:before, +.fi-zoom-in:before, +.fi-zoom-out:before { + font-family: "foundation-icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + display: inline-block; + text-decoration: inherit; +} + +.fi-address-book:before { content: "\f100"; } +.fi-alert:before { content: "\f101"; } +.fi-align-center:before { content: "\f102"; } +.fi-align-justify:before { content: "\f103"; } +.fi-align-left:before { content: "\f104"; } +.fi-align-right:before { content: "\f105"; } +.fi-anchor:before { content: "\f106"; } +.fi-annotate:before { content: "\f107"; } +.fi-archive:before { content: "\f108"; } +.fi-arrow-down:before { content: "\f109"; } +.fi-arrow-left:before { content: "\f10a"; } +.fi-arrow-right:before { content: "\f10b"; } +.fi-arrow-up:before { content: "\f10c"; } +.fi-arrows-compress:before { content: "\f10d"; } +.fi-arrows-expand:before { content: "\f10e"; } +.fi-arrows-in:before { content: "\f10f"; } +.fi-arrows-out:before { content: "\f110"; } +.fi-asl:before { content: "\f111"; } +.fi-asterisk:before { content: "\f112"; } +.fi-at-sign:before { content: "\f113"; } +.fi-background-color:before { content: "\f114"; } +.fi-battery-empty:before { content: "\f115"; } +.fi-battery-full:before { content: "\f116"; } +.fi-battery-half:before { content: "\f117"; } +.fi-bitcoin-circle:before { content: "\f118"; } +.fi-bitcoin:before { content: "\f119"; } +.fi-blind:before { content: "\f11a"; } +.fi-bluetooth:before { content: "\f11b"; } +.fi-bold:before { content: "\f11c"; } +.fi-book-bookmark:before { content: "\f11d"; } +.fi-book:before { content: "\f11e"; } +.fi-bookmark:before { content: "\f11f"; } +.fi-braille:before { content: "\f120"; } +.fi-burst-new:before { content: "\f121"; } +.fi-burst-sale:before { content: "\f122"; } +.fi-burst:before { content: "\f123"; } +.fi-calendar:before { content: "\f124"; } +.fi-camera:before { content: "\f125"; } +.fi-check:before { content: "\f126"; } +.fi-checkbox:before { content: "\f127"; } +.fi-clipboard-notes:before { content: "\f128"; } +.fi-clipboard-pencil:before { content: "\f129"; } +.fi-clipboard:before { content: "\f12a"; } +.fi-clock:before { content: "\f12b"; } +.fi-closed-caption:before { content: "\f12c"; } +.fi-cloud:before { content: "\f12d"; } +.fi-comment-minus:before { content: "\f12e"; } +.fi-comment-quotes:before { content: "\f12f"; } +.fi-comment-video:before { content: "\f130"; } +.fi-comment:before { content: "\f131"; } +.fi-comments:before { content: "\f132"; } +.fi-compass:before { content: "\f133"; } +.fi-contrast:before { content: "\f134"; } +.fi-credit-card:before { content: "\f135"; } +.fi-crop:before { content: "\f136"; } +.fi-crown:before { content: "\f137"; } +.fi-css3:before { content: "\f138"; } +.fi-database:before { content: "\f139"; } +.fi-die-five:before { content: "\f13a"; } +.fi-die-four:before { content: "\f13b"; } +.fi-die-one:before { content: "\f13c"; } +.fi-die-six:before { content: "\f13d"; } +.fi-die-three:before { content: "\f13e"; } +.fi-die-two:before { content: "\f13f"; } +.fi-dislike:before { content: "\f140"; } +.fi-dollar-bill:before { content: "\f141"; } +.fi-dollar:before { content: "\f142"; } +.fi-download:before { content: "\f143"; } +.fi-eject:before { content: "\f144"; } +.fi-elevator:before { content: "\f145"; } +.fi-euro:before { content: "\f146"; } +.fi-eye:before { content: "\f147"; } +.fi-fast-forward:before { content: "\f148"; } +.fi-female-symbol:before { content: "\f149"; } +.fi-female:before { content: "\f14a"; } +.fi-filter:before { content: "\f14b"; } +.fi-first-aid:before { content: "\f14c"; } +.fi-flag:before { content: "\f14d"; } +.fi-folder-add:before { content: "\f14e"; } +.fi-folder-lock:before { content: "\f14f"; } +.fi-folder:before { content: "\f150"; } +.fi-foot:before { content: "\f151"; } +.fi-foundation:before { content: "\f152"; } +.fi-graph-bar:before { content: "\f153"; } +.fi-graph-horizontal:before { content: "\f154"; } +.fi-graph-pie:before { content: "\f155"; } +.fi-graph-trend:before { content: "\f156"; } +.fi-guide-dog:before { content: "\f157"; } +.fi-hearing-aid:before { content: "\f158"; } +.fi-heart:before { content: "\f159"; } +.fi-home:before { content: "\f15a"; } +.fi-html5:before { content: "\f15b"; } +.fi-indent-less:before { content: "\f15c"; } +.fi-indent-more:before { content: "\f15d"; } +.fi-info:before { content: "\f15e"; } +.fi-italic:before { content: "\f15f"; } +.fi-key:before { content: "\f160"; } +.fi-laptop:before { content: "\f161"; } +.fi-layout:before { content: "\f162"; } +.fi-lightbulb:before { content: "\f163"; } +.fi-like:before { content: "\f164"; } +.fi-link:before { content: "\f165"; } +.fi-list-bullet:before { content: "\f166"; } +.fi-list-number:before { content: "\f167"; } +.fi-list-thumbnails:before { content: "\f168"; } +.fi-list:before { content: "\f169"; } +.fi-lock:before { content: "\f16a"; } +.fi-loop:before { content: "\f16b"; } +.fi-magnifying-glass:before { content: "\f16c"; } +.fi-mail:before { content: "\f16d"; } +.fi-male-female:before { content: "\f16e"; } +.fi-male-symbol:before { content: "\f16f"; } +.fi-male:before { content: "\f170"; } +.fi-map:before { content: "\f171"; } +.fi-marker:before { content: "\f172"; } +.fi-megaphone:before { content: "\f173"; } +.fi-microphone:before { content: "\f174"; } +.fi-minus-circle:before { content: "\f175"; } +.fi-minus:before { content: "\f176"; } +.fi-mobile-signal:before { content: "\f177"; } +.fi-mobile:before { content: "\f178"; } +.fi-monitor:before { content: "\f179"; } +.fi-mountains:before { content: "\f17a"; } +.fi-music:before { content: "\f17b"; } +.fi-next:before { content: "\f17c"; } +.fi-no-dogs:before { content: "\f17d"; } +.fi-no-smoking:before { content: "\f17e"; } +.fi-page-add:before { content: "\f17f"; } +.fi-page-copy:before { content: "\f180"; } +.fi-page-csv:before { content: "\f181"; } +.fi-page-delete:before { content: "\f182"; } +.fi-page-doc:before { content: "\f183"; } +.fi-page-edit:before { content: "\f184"; } +.fi-page-export-csv:before { content: "\f185"; } +.fi-page-export-doc:before { content: "\f186"; } +.fi-page-export-pdf:before { content: "\f187"; } +.fi-page-export:before { content: "\f188"; } +.fi-page-filled:before { content: "\f189"; } +.fi-page-multiple:before { content: "\f18a"; } +.fi-page-pdf:before { content: "\f18b"; } +.fi-page-remove:before { content: "\f18c"; } +.fi-page-search:before { content: "\f18d"; } +.fi-page:before { content: "\f18e"; } +.fi-paint-bucket:before { content: "\f18f"; } +.fi-paperclip:before { content: "\f190"; } +.fi-pause:before { content: "\f191"; } +.fi-paw:before { content: "\f192"; } +.fi-paypal:before { content: "\f193"; } +.fi-pencil:before { content: "\f194"; } +.fi-photo:before { content: "\f195"; } +.fi-play-circle:before { content: "\f196"; } +.fi-play-video:before { content: "\f197"; } +.fi-play:before { content: "\f198"; } +.fi-plus:before { content: "\f199"; } +.fi-pound:before { content: "\f19a"; } +.fi-power:before { content: "\f19b"; } +.fi-previous:before { content: "\f19c"; } +.fi-price-tag:before { content: "\f19d"; } +.fi-pricetag-multiple:before { content: "\f19e"; } +.fi-print:before { content: "\f19f"; } +.fi-prohibited:before { content: "\f1a0"; } +.fi-projection-screen:before { content: "\f1a1"; } +.fi-puzzle:before { content: "\f1a2"; } +.fi-quote:before { content: "\f1a3"; } +.fi-record:before { content: "\f1a4"; } +.fi-refresh:before { content: "\f1a5"; } +.fi-results-demographics:before { content: "\f1a6"; } +.fi-results:before { content: "\f1a7"; } +.fi-rewind-ten:before { content: "\f1a8"; } +.fi-rewind:before { content: "\f1a9"; } +.fi-rss:before { content: "\f1aa"; } +.fi-safety-cone:before { content: "\f1ab"; } +.fi-save:before { content: "\f1ac"; } +.fi-share:before { content: "\f1ad"; } +.fi-sheriff-badge:before { content: "\f1ae"; } +.fi-shield:before { content: "\f1af"; } +.fi-shopping-bag:before { content: "\f1b0"; } +.fi-shopping-cart:before { content: "\f1b1"; } +.fi-shuffle:before { content: "\f1b2"; } +.fi-skull:before { content: "\f1b3"; } +.fi-social-500px:before { content: "\f1b4"; } +.fi-social-adobe:before { content: "\f1b5"; } +.fi-social-amazon:before { content: "\f1b6"; } +.fi-social-android:before { content: "\f1b7"; } +.fi-social-apple:before { content: "\f1b8"; } +.fi-social-behance:before { content: "\f1b9"; } +.fi-social-bing:before { content: "\f1ba"; } +.fi-social-blogger:before { content: "\f1bb"; } +.fi-social-delicious:before { content: "\f1bc"; } +.fi-social-designer-news:before { content: "\f1bd"; } +.fi-social-deviant-art:before { content: "\f1be"; } +.fi-social-digg:before { content: "\f1bf"; } +.fi-social-dribbble:before { content: "\f1c0"; } +.fi-social-drive:before { content: "\f1c1"; } +.fi-social-dropbox:before { content: "\f1c2"; } +.fi-social-evernote:before { content: "\f1c3"; } +.fi-social-facebook:before { content: "\f1c4"; } +.fi-social-flickr:before { content: "\f1c5"; } +.fi-social-forrst:before { content: "\f1c6"; } +.fi-social-foursquare:before { content: "\f1c7"; } +.fi-social-game-center:before { content: "\f1c8"; } +.fi-social-github:before { content: "\f1c9"; } +.fi-social-google-plus:before { content: "\f1ca"; } +.fi-social-hacker-news:before { content: "\f1cb"; } +.fi-social-hi5:before { content: "\f1cc"; } +.fi-social-instagram:before { content: "\f1cd"; } +.fi-social-joomla:before { content: "\f1ce"; } +.fi-social-lastfm:before { content: "\f1cf"; } +.fi-social-linkedin:before { content: "\f1d0"; } +.fi-social-medium:before { content: "\f1d1"; } +.fi-social-myspace:before { content: "\f1d2"; } +.fi-social-orkut:before { content: "\f1d3"; } +.fi-social-path:before { content: "\f1d4"; } +.fi-social-picasa:before { content: "\f1d5"; } +.fi-social-pinterest:before { content: "\f1d6"; } +.fi-social-rdio:before { content: "\f1d7"; } +.fi-social-reddit:before { content: "\f1d8"; } +.fi-social-skillshare:before { content: "\f1d9"; } +.fi-social-skype:before { content: "\f1da"; } +.fi-social-smashing-mag:before { content: "\f1db"; } +.fi-social-snapchat:before { content: "\f1dc"; } +.fi-social-spotify:before { content: "\f1dd"; } +.fi-social-squidoo:before { content: "\f1de"; } +.fi-social-stack-overflow:before { content: "\f1df"; } +.fi-social-steam:before { content: "\f1e0"; } +.fi-social-stumbleupon:before { content: "\f1e1"; } +.fi-social-treehouse:before { content: "\f1e2"; } +.fi-social-tumblr:before { content: "\f1e3"; } +.fi-social-twitter:before { content: "\f1e4"; } +.fi-social-vimeo:before { content: "\f1e5"; } +.fi-social-windows:before { content: "\f1e6"; } +.fi-social-xbox:before { content: "\f1e7"; } +.fi-social-yahoo:before { content: "\f1e8"; } +.fi-social-yelp:before { content: "\f1e9"; } +.fi-social-youtube:before { content: "\f1ea"; } +.fi-social-zerply:before { content: "\f1eb"; } +.fi-social-zurb:before { content: "\f1ec"; } +.fi-sound:before { content: "\f1ed"; } +.fi-star:before { content: "\f1ee"; } +.fi-stop:before { content: "\f1ef"; } +.fi-strikethrough:before { content: "\f1f0"; } +.fi-subscript:before { content: "\f1f1"; } +.fi-superscript:before { content: "\f1f2"; } +.fi-tablet-landscape:before { content: "\f1f3"; } +.fi-tablet-portrait:before { content: "\f1f4"; } +.fi-target-two:before { content: "\f1f5"; } +.fi-target:before { content: "\f1f6"; } +.fi-telephone-accessible:before { content: "\f1f7"; } +.fi-telephone:before { content: "\f1f8"; } +.fi-text-color:before { content: "\f1f9"; } +.fi-thumbnails:before { content: "\f1fa"; } +.fi-ticket:before { content: "\f1fb"; } +.fi-torso-business:before { content: "\f1fc"; } +.fi-torso-female:before { content: "\f1fd"; } +.fi-torso:before { content: "\f1fe"; } +.fi-torsos-all-female:before { content: "\f1ff"; } +.fi-torsos-all:before { content: "\f200"; } +.fi-torsos-female-male:before { content: "\f201"; } +.fi-torsos-male-female:before { content: "\f202"; } +.fi-torsos:before { content: "\f203"; } +.fi-trash:before { content: "\f204"; } +.fi-trees:before { content: "\f205"; } +.fi-trophy:before { content: "\f206"; } +.fi-underline:before { content: "\f207"; } +.fi-universal-access:before { content: "\f208"; } +.fi-unlink:before { content: "\f209"; } +.fi-unlock:before { content: "\f20a"; } +.fi-upload-cloud:before { content: "\f20b"; } +.fi-upload:before { content: "\f20c"; } +.fi-usb:before { content: "\f20d"; } +.fi-video:before { content: "\f20e"; } +.fi-volume-none:before { content: "\f20f"; } +.fi-volume-strike:before { content: "\f210"; } +.fi-volume:before { content: "\f211"; } +.fi-web:before { content: "\f212"; } +.fi-wheelchair:before { content: "\f213"; } +.fi-widget:before { content: "\f214"; } +.fi-wrench:before { content: "\f215"; } +.fi-x-circle:before { content: "\f216"; } +.fi-x:before { content: "\f217"; } +.fi-yen:before { content: "\f218"; } +.fi-zoom-in:before { content: "\f219"; } +.fi-zoom-out:before { content: "\f21a"; } diff --git a/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss b/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss new file mode 100644 index 0000000..d4c6415 --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss @@ -0,0 +1,605 @@ +// FOUNDATION FOR APPS SETTINGS +// ---------------------------- +// +// Table of Contents: +// +// 1. CSS Exports +// 2. Global Styles +// 3. Breakpoints +// 4. Typography +// 5. Grid +// 6. Button +// 7. Accordion +// 8. Action Sheet +// 9. Block List +// 10. Button Group +// 11. Card +// 12. Extras +// 13. Forms +// 14. Iconic +// 15. Label +// 16. Menu Bar +// 17. Modal +// 18. Motion UI +// 19. Notification +// 20. Off-canvas +// 21. Panel +// 22. Popup +// 23. Switch +// 24. Tabs +// 25. Title Bar + +@import "helpers/functions"; + +// 1. CSS Exports +// - - - - - - - - - - - - - - - + +// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS. + + $include-css: ( + accordion: true, + action-sheet: true, + block-list: true, + button: true, + button-group: true, + card: true, + coloring: true, + extras: true, + forms: true, + grid: true, + iconic: true, + label: true, + badge: true, + list: true, + menu-bar: true, + modal: true, + motion: true, + notification: true, + off-canvas: true, + panel: true, + popup: true, + switch: true, + tabs: true, + title-bar: true, + typography: true, + utilities: true, + ); + +// 2. Global Styles +// - - - - - - - - - - - - - - - + +// This sets 1rem to be 16px +// $rem-base: 16px; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +// $base-font-size: 100%; + +// $base-line-height is 24px while $base-font-size is 16px +// $base-line-height: 1.5; + +// Text selector helpers +// $headers: "h1,h2,h3,h4,h5,h6"; + +// We use these to define default font weights +// $font-weight-normal: normal; +// $font-weight-bold: bold; + +// We use these to control various global styles +// $body-background: #fff; +// $body-font-color: #222; +// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; +// $body-font-weight: $font-weight-normal; +// $body-font-style: normal; +// $body-antialiased: true; + +// Application Colors +// $primary-color: #00558b; +// $secondary-color: #f1f1f1; +// $alert-color: #F04124; +// $info-color: #A0D3E8; +// $success-color: #43AC6A; +// $warning-color: #F08A24; +// $dark-color: #232323; +// $gray: #dfdfdf; +// $gray-dark: darken($gray, 8); +// $gray-light: lighten($gray, 8); + +// We use these to make sure border radius matches unless we want it different. +// $global-radius: 4px; +// $global-rounded: 1000px; + +// We use this for default spacing +// $global-padding: 1rem; +// $global-spacing: rem-calc(15); + +// 3. Breakpoints +// - - - - - - - - - - - - - - - + +// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles } +// $breakpoints: ( +// small: rem-calc(0), +// medium: rem-calc(640), +// large: rem-calc(1200), +// xlarge: rem-calc(1440), +// xxlarge: rem-calc(1920), +// ); + +// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on. +// $breakpoint-classes: (small medium large); + +// 4. Typography +// - - - - - - - - - - - - - - - + +// We use these to control header font styles +// $header-font-family: $body-font-family; +// $header-font-weight: $font-weight-normal; +// $header-font-style: $font-weight-normal; +// $header-font-color: #222; +// $header-line-height: 1.4; +// $header-top-margin: .2rem; +// $header-bottom-margin: .5rem; +// $header-text-rendering: optimizeLegibility; + +// We use these to control header font sizes +// $h1-font-size: rem-calc(44); +// $h2-font-size: rem-calc(37); +// $h3-font-size: rem-calc(27); +// $h4-font-size: rem-calc(23); +// $h5-font-size: rem-calc(18); +// $h6-font-size: 1rem; + +// We use these to control header size reduction on small screens +// $h1-font-reduction: rem-calc(10); +// $h2-font-reduction: rem-calc(10); +// $h3-font-reduction: rem-calc(5); +// $h4-font-reduction: rem-calc(5); +// $h5-font-reduction: 0; +// $h6-font-reduction: 0; + +// These control how subheaders are styled. +// $subheader-line-height: 1.4; +// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); +// $subheader-font-weight: $font-weight-normal; +// $subheader-top-margin: .2rem; +// $subheader-bottom-margin: .5rem; + +// A general <small> styling +// $small-font-size: 60%; +// $small-font-color: scale-color($header-font-color, $lightness: 35%); + +// We use these to style paragraphs +// $paragraph-font-family: inherit; +// $paragraph-font-weight: $font-weight-normal; +// $paragraph-font-size: 1rem; +// $paragraph-line-height: 1.6; +// $paragraph-margin-bottom: rem-calc(20); +// $paragraph-aside-font-size: rem-calc(14); +// $paragraph-aside-line-height: 1.35; +// $paragraph-aside-font-style: italic; +// $paragraph-text-rendering: optimizeLegibility; + +// We use these to style <code> tags +// $code-color: grayscale($primary-color); +// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; +// $code-font-weight: $font-weight-normal; +// $code-background-color: scale-color($secondary-color, $lightness: 70%); +// $code-border-size: 1px; +// $code-border-style: solid; +// $code-border-color: scale-color($code-background-color, $lightness: -10%); +// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); + +// We use these to style anchors +// $anchor-text-decoration: none; +// $anchor-text-decoration-hover: none; +// $anchor-font-color: $primary-color; +// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); + +// We use these to style the <hr> element +// $hr-border-width: 1px; +// $hr-border-style: solid; +// $hr-border-color: #ddd; +// $hr-margin: rem-calc(20); + +// We use these to style lists +// $list-font-family: $paragraph-font-family; +// $list-font-size: $paragraph-font-size; +// $list-line-height: $paragraph-line-height; +// $list-margin-bottom: $paragraph-margin-bottom; +// $list-style-position: outside; +// $list-side-margin: 1.1rem; +// $list-ordered-side-margin: 1.4rem; +// $list-side-margin-no-bullet: 0; +// $list-nested-margin: rem-calc(20); +// $definition-list-header-weight: $font-weight-bold; +// $definition-list-header-margin-bottom: .3rem; +// $definition-list-margin-bottom: rem-calc(12); + +// We use these to style blockquotes +// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); +// $blockquote-padding: rem-calc(9 20 0 19); +// $blockquote-border: 1px solid #ddd; +// $blockquote-cite-font-size: rem-calc(13); +// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); +// $blockquote-cite-link-color: $blockquote-cite-font-color; + +// Acronym styles +// $acronym-underline: 1px dotted #ddd; + +// 5. Grid +// - - - - - - - - - - - - - - - + +// $container-width: rem-calc(900); +// $block-padding: $global-padding; +// $total-columns: 12; +// $block-grid-max-size: 6; + +// 6. Button +// - - - - - - - - - - - - - - - + +// $button-padding: 0.85em 1em; +// $button-margin: 0 $global-padding $global-padding 0; +// $button-style: solid; +// $button-background: $primary-color; +// $button-color: auto; +// $button-radius: 0; +// $button-sizes: ( +// tiny: 0.7, +// small: 0.8, +// medium: 1, +// large: 1.3, +// ); +// $button-font-size: 0.9rem; +// $button-opacity-disabled: 0.5; +// $button-tag-selector: false; + +// 7. Accordion +// - - - - - - - - - - - - - - - + +// $accordion-border: 1px solid $gray-dark; + +// $accordion-title-background: $gray-light; +// $accordion-title-background-hover: smartscale($accordion-title-background, 5%); +// $accordion-title-background-active: smartscale($accordion-title-background, 3%); +// $accordion-title-color: isitlight($accordion-title-background); +// $accordion-title-color-active: isitlight($accordion-title-background); + +// $accordion-title-padding: $global-padding; +// $accordion-content-padding: $global-padding; + +// 8. Action Sheet +// - - - - - - - - - - - - - - - + +// $actionsheet-background: white; +// $actionsheet-border-color: #ccc; +// $actionsheet-animate: transform opacity; +// $actionsheet-animation-speed: 0.25s; +// $actionsheet-width: 300px; +// $actionsheet-radius: 4px; +// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25); +// $actionsheet-padding: $global-padding; +// $actionsheet-tail-size: 10px; + +// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25); + +// $actionsheet-link-color: #000; +// $actionsheet-link-background-hover: smartscale($actionsheet-background); + +// 9. Block List +// - - - - - - - - - - - - - - - + +// $blocklist-background: #fff; +// $blocklist-fullbleed: true; +// $blocklist-fontsize: 1rem; + +// $blocklist-item-padding: 0.8rem 1rem; +// $blocklist-item-color: isitlight($blocklist-background, #000, #fff); +// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%); +// $blocklist-item-color-disabled: #999; +// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%); + +// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%); +// $blocklist-item-icon-size: 0.8; + +// $blocklist-header-fontsize: 0.8em; +// $blocklist-header-color: smartscale($blocklist-item-color, 40%); +// $blocklist-header-uppercase: true; + +// $blocklist-check-icons: true; + +// 10. Button Group +// - - - - - - - - - - - - - - - + +// $btngroup-background: $primary-color; +// $btngroup-color: #fff; +// $btngroup-radius: $button-radius; + +// 11. Card +// - - - - - - - - - - - - - - - + +// $card-background: #fff; +// $card-color: isitlight($card-background); +// $card-border: 1px solid smartscale($card-background, 7%); +// $card-radius: $global-radius; +// $card-shadow: 0 1px 2px rgba(#000, 0.2); +// $card-padding: $global-padding; +// $card-margin: 0.5rem; + +// $card-divider-background: smartscale($card-background, 7%); + +// 12. Extras +// - - - - - - - - - - - - - - - + +// $closebutton-position: (top right); +// $closebutton-size: 2em; +// $closebutton-lineheight: 0.5; +// $closebutton-color: #999; +// $closebutton-color-hover: #333; + +// $thumbnail-padding: 0.5rem; +// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); + +// 13. Forms +// - - - - - - - - - - - - - - - + +// Basic form variables +// $form-fontsize: 1rem; +// $form-padding: 0.5rem; + +// Text fields +// $input-color: #000; +// $input-color-hover: $input-color; +// $input-color-focus: $input-color; +// $input-background: #fff; +// $input-background-hover: $input-background; +// $input-background-focus: $input-background; +// $input-border: 1px solid #ccc; +// $input-border-hover: 1px solid #bbb; +// $input-border-focus: 1px solid #999; + +// Select menus +// $select-color: #000; +// $select-background: #fafafa; +// $select-background-hover: smartscale($select-background, 4%); +// $select-arrow: true; +// $select-arrow-color: $select-color; + +// Labels +// $form-label-fontsize: 0.9rem; +// $form-label-margin: 0.5rem; +// $form-label-color: #333; + +// Inline labels +// $inlinelabel-color: #333; +// $inlinelabel-background: #eee; +// $inlinelabel-border: $input-border; + +// Range slider +// $slider-background: #ddd; +// $slider-height: 1rem; +// $slider-radius: 0px; +// $slider-thumb-height: 1.5rem; +// $slider-thumb-color: $primary-color; +// $slider-thumb-radius: 0px; + +// Progress and meter +// $meter-height: 1.5rem; +// $meter-background: #ccc; +// $meter-fill: $primary-color; +// $meter-fill-high: $success-color; +// $meter-fill-medium: #e7cf00; +// $meter-fill-low: $alert-color; +// $meter-radius: 0; + +// 14. Iconic +// - - - - - - - - - - - - - - - + +// $iconic-primary-fill: $primary-color; +// $iconic-primary-stroke: $primary-color; +// $iconic-accent-fill: $iconic-primary-fill; +// $iconic-accent-stroke: $iconic-accent-fill; + +// 15. Label +// - - - - - - - - - - - - - - - + +// $label-fontsize: 0.8rem; +// $label-padding: ($global-padding / 3) ($global-padding / 2); +// $label-radius: 0; +// $label-background: $primary-color; +// $label-color: isitlight($primary-color); + +// $badge-fontsize: 0.8em; +// $badge-diameter: 1.5rem; +// $badge-background: $primary-color; +// $badge-color: #fff; + +// DEPRECATED: these variables will be removed in v1.1. +// $badge-padding: .1em .61em; +// $badge-radius: $global-rounded; +// $badge-font-color: #fff; + +// 16. Menu Bar +// - - - - - - - - - - - - - - - + +// $menubar-fontsize: 1rem; +// $menubar-background: #fff; +// $menubar-background-hover: smartscale($menubar-background, 7%); +// $menubar-background-active: $menubar-background-hover; +// $menubar-color: isitlight($menubar-background); +// $menubar-color-hover: $menubar-color; +// $menubar-color-active: $menubar-color-hover; + +// $menubar-item-padding: $global-padding; +// $menubar-icon-size: 25px; +// $menubar-icon-spacing: $menubar-item-padding; + +// 17. Modal +// - - - - - - - - - - - - - - - + +// $modal-background: #fff; +// $modal-border: 0; +// $modal-radius: 0px; +// $modal-shadow: none; +// $modal-zindex: 1000; +// $modal-sizes: ( +// tiny: 300px, +// small: 500px, +// medium: 600px, +// large: 800px, +// ); + +// $modal-overlay-class: 'modal-overlay'; +// $modal-overlay-background: rgba(#333, 0.7); + +// 18. Motion UI +// - - - - - - - - - - - - - - - + +// Classes to use when triggering in/out animations +// $motion-class: ( +// in: "ng-enter", +// out: "ng-leave", +// ); +// $motion-class-active: ( +// in: "ng-enter-active", +// out: "ng-leave-active", +// ); +// $motion-class-stagger: ( +// in: "ng-enter-stagger", +// out: "ng-leave-stagger", +// ); + +// Set if movement-based transitions should also fade the element in and out +// $motion-slide-and-fade: false; +// $motion-hinge-and-fade: true; +// $motion-scale-and-fade: true; +// $motion-spin-and-fade: true; + +// Default speed for transitions and animations +// $motion-duration-default: 500ms; +// Slow and fast modifiders +// $motion-duration-slow: 750ms; +// $motion-duration-fast: 250ms; +// $motion-stagger-duration-default: 150ms; +// $motion-stagger-duration-short: 50ms; +// $motion-stagger-duration-long: 300ms; + +// Default timing function for transitions and animations +// $motion-timing-default: ease; +// Built-in and custom easing functions +// Every item in this map becomes a CSS class +// $motion-timings: ( +// linear: linear, +// ease: ease, +// easeIn: ease-in, +// easeOut: ease-out, +// easeInOut: ease-in-out, +// bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245), +// bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845), +// bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245), +// ); + +// Default delay for all transitions and animations +// $motion-delay-default: 0; +// Short and long delay modifiers +// $motion-delay-short: 300ms; +// $motion-delay-long: 700ms; + +// 19. Notification +// - - - - - - - - - - - - - - - + +// $notification-default-position: right top; +// $notification-width: rem-calc(400); +// $notification-offset: $global-padding; + +// $notification-background: $primary-color; +// $notification-color: white; +// $notification-padding: $global-padding; +// $notification-radius: 4px; + +// $notification-icon-size: 60px; +// $notification-icon-margin: $global-padding; +// $notification-icon-align: top; + + +// 20. Off-canvas +// - - - - - - - - - - - - - - - + +// $offcanvas-size-horizontal: 250px; +// $offcanvas-size-vertical: 250px; + +// $offcanvas-background: #fff; +// $offcanvas-color: isitlight($offcanvas-background); +// $offcanvas-padding: 0; +// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25); +// $offcanvas-animation-speed: 0.25s; + +// $offcanvas-frame-selector: '.grid-frame'; + +// 21. Panel +// - - - - - - - - - - - - - - - + +// $panel-size-horizontal: 300px; +// $panel-size-vertical: 300px; +// $panel-padding: 0; + +// $panel-background: #fff; +// $panel-shadow: 3px 0 10px rgba(black, 0.25); +// $panel-animation-speed: 0.25s; + +// 22. Popup +// - - - - - - - - - - - - - - - + +// $popup-width: rem-calc(300); +// $popup-background: #fff; +// $popup-border: 0; +// $popup-radius: 0; +// $popup-shadow: 0 0 10px rgba(#000, 0.25); + +// 23. Switch +// - - - - - - - - - - - - - - - + +// $switch-width: rem-calc(50); +// $switch-height: rem-calc(32); +// $switch-background: #ccc; +// $switch-background-active: $primary-color; +// $switch-border: 0; +// $switch-radius: 9999px; +// $switch-animation-speed: 0.15s; + +// $switch-paddle-color: white; +// $switch-paddle-offset: 4px; + +// 24. Tabs +// - - - - - - - - - - - - - - - + +// $tabstrip-background: transparent; + +// $tab-title-background: $gray-light; +// $tab-title-background-hover: smartscale($tab-title-background, 5%); +// $tab-title-background-active: smartscale($tab-title-background, 3%); +// $tab-title-color: isitlight($tab-title-background); +// $tab-title-color-active: $tab-title-color; + +// $tab-title-padding: $global-padding; +// $tab-content-padding: $global-padding; + +// 25. Title Bar +// - - - - - - - - - - - - - - - + +// $titlebar-center-width: 50%; +// $titlebar-side-width: (100% - $titlebar-center-width) / 2; +// $titlebar-background: #eee; +// $titlebar-color: #000; +// $titlebar-border: 1px solid #ccc; +// $titlebar-padding: $global-padding; +// $titlebar-item-classes: ( +// center: 'center', +// left: 'left', +// right: 'right', +// title: 'title', +// ); + diff --git a/examples/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss b/examples/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss new file mode 100644 index 0000000..bdcfe1f --- /dev/null +++ b/examples/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss @@ -0,0 +1,19 @@ +@import "foundation-settings"; +@import "foundation-icons"; +@import "foundation"; + + +/*.sidebar { + // Panel on small screens + @extend %panel-base; + @include panel-position(left); + // Override styles to become a block on medium screens + @include breakpoint(medium) { + @include grid-panel-reset; + @include grid-block(4); + } + // Change size to 3 columns on large screens + @include breakpoint(large) { + @include grid-size(3); + } +}*/
\ No newline at end of file |