├── LICENSE ├── README.md └── src ├── css ├── _custom.scss ├── _foundation547 │ ├── foundation.scss │ ├── foundation │ │ ├── _functions.scss │ │ ├── _settings.scss │ │ └── components │ │ │ ├── _accordion.scss │ │ │ ├── _alert-boxes.scss │ │ │ ├── _block-grid.scss │ │ │ ├── _breadcrumbs.scss │ │ │ ├── _button-groups.scss │ │ │ ├── _buttons.scss │ │ │ ├── _clearing.scss │ │ │ ├── _dropdown-buttons.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _flex-video.scss │ │ │ ├── _forms.scss │ │ │ ├── _global.scss │ │ │ ├── _grid.scss │ │ │ ├── _icon-bar.scss │ │ │ ├── _inline-lists.scss │ │ │ ├── _joyride.scss │ │ │ ├── _keystrokes.scss │ │ │ ├── _labels.scss │ │ │ ├── _magellan.scss │ │ │ ├── _offcanvas.scss │ │ │ ├── _orbit.scss │ │ │ ├── _pagination.scss │ │ │ ├── _panels.scss │ │ │ ├── _pricing-tables.scss │ │ │ ├── _progress-bars.scss │ │ │ ├── _range-slider.scss │ │ │ ├── _reveal.scss │ │ │ ├── _side-nav.scss │ │ │ ├── _split-buttons.scss │ │ │ ├── _sub-nav.scss │ │ │ ├── _switches.scss │ │ │ ├── _tables.scss │ │ │ ├── _tabs.scss │ │ │ ├── _thumbs.scss │ │ │ ├── _toolbar.scss │ │ │ ├── _tooltips.scss │ │ │ ├── _top-bar.scss │ │ │ ├── _type.scss │ │ │ └── _visibility.scss │ └── normalize.scss ├── _ibmSettings.scss ├── _settings547.scss ├── app.css └── main.scss ├── images └── icons │ ├── ibmdesign │ ├── back-right-previous_128-orange.png │ ├── back-right-previous_128.png │ ├── bee_128.png │ ├── booklet-guide_128.png │ ├── clock-time_128.png │ ├── close-cancel-error_128-red.png │ ├── close-cancel-error_128.png │ ├── flow_128.png │ └── success-confirmation_128.png │ └── iib │ ├── changePerspective.png │ ├── dfdlInheritedProperty.png │ ├── dfdlTestPlay.png │ ├── exitNestedMapping.png │ ├── sendMessage.png │ ├── startFlowExerciser.png │ ├── stopFlowExerciser.png │ └── viewPath.png ├── js ├── js2java.js ├── js2java_steps.js ├── json2.js ├── main.js └── vendor │ ├── fastclick.js │ ├── foundation.min.js │ ├── jquery.cookie.js │ ├── jquery.js │ ├── modernizr.js │ └── placeholder.js ├── tutorialManager ├── _data.json ├── _layout.ejs └── en │ ├── TutorialManager.ejs │ ├── _data.json │ └── repo_metadata.json └── tutorials ├── _data.json ├── _includes ├── details.ejs └── steps.ejs ├── _layout.ejs └── tutorialExample └── en ├── _data.json ├── details.ejs └── steps.ejs /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Open Technologies for Integration 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iib-tutorials 2 | Templates and code that are central to all tutorials developed for the IBM Integration Bus tutorial manager 3 | -------------------------------------------------------------------------------- /src/css/_custom.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Author's custom styles 3 | ========================================================================== */ 4 | //Declare variables. 5 | $orange-dusty : #e88a37; 6 | $orange-custom : #eb974e; 7 | $blue-dusty : #0094d9; 8 | 9 | //Assign variables. 10 | $action-button: $orange-dusty; 11 | $button-main-color : $primary-color; 12 | 13 | //Set ovverrides variables. 14 | $top-bar-bg : $white-smoke; 15 | $top-bar-outline: $iron; 16 | //$topbar-link-color: $oil; 17 | $topbar-link-color: $white-smoke; 18 | 19 | //Core HTML overrides 20 | hr 21 | { 22 | margin-top: 0.5rem; 23 | margin-bottom: 0.5rem; 24 | } 25 | 26 | //Style Overrides 27 | .top-bar 28 | { 29 | height: 44px; 30 | background: $top-bar-bg; 31 | text-align: center; 32 | top:0; 33 | z-index:1; 34 | border-bottom: 1px solid $top-bar-outline; 35 | box-shadow: rgba(0, 0, 0, .25) 0 1px 2px; 36 | } 37 | 38 | .top-bar .name h1 a 39 | { 40 | color: $oil; 41 | } 42 | 43 | //Style Extends 44 | .panel-thin 45 | { 46 | @extend .panel; 47 | 48 | margin: 0px; 49 | margin-bottom: 5px; 50 | padding-top: 5px; 51 | padding-left: 10px; 52 | padding-right: 10px; 53 | padding-bottom: 5px; 54 | 55 | min-height:200px; 56 | 57 | img 58 | { 59 | height:150px; 60 | } 61 | } 62 | 63 | //Style Custom 64 | //-LVHT 65 | action .button 66 | { 67 | border: 0; 68 | background: $orange-custom; 69 | -webkit-box-shadow: 0; 70 | -moz-box-shadow: 0; 71 | box-shadow: 0; 72 | color: rgba(0, 0, 0, 0.8); 73 | padding-top: 5px; 74 | padding-bottom: 5px; 75 | margin:5px; 76 | } 77 | action .button:link 78 | { 79 | background: $orange-custom; 80 | } 81 | action .button:visited 82 | { 83 | -webkit-box-shadow: 0px 4px 0px #a74d46; 84 | -moz-box-shadow: 0px 4px 0px #a74d46; 85 | box-shadow: 0px 4px 0px #a74d46; 86 | background: #e78129; 87 | } 88 | action .button:hover 89 | { 90 | background: $orange-custom; 91 | color: white; 92 | } 93 | action .button:active 94 | { 95 | -webkit-box-shadow: 0px 4px 0px #a74d46; 96 | -moz-box-shadow: 0px 4px 0px #a74d46; 97 | box-shadow: 0px 4px 0px #a74d46; 98 | background: #e78129; 99 | } 100 | 101 | .button.small 102 | { 103 | padding: 5px 10px; 104 | } 105 | 106 | //Custom 107 | #tutorialDropDown 108 | { 109 | height:5rem; 110 | } 111 | 112 | //Special Characters, use with span tag. 113 | .font-small 114 | { 115 | font-size:2em; 116 | } 117 | 118 | .font-medium 119 | { 120 | font-size:4em; 121 | } 122 | 123 | .simple-arrow-right 124 | { 125 | &::after{ 126 | content:"\2192"; 127 | } 128 | } 129 | 130 | .arrowhead-right 131 | { 132 | &::after 133 | { 134 | content:"\2192"; 135 | } 136 | } 137 | 138 | .outline-up 139 | { 140 | margin: 0px; 141 | padding: 0px; 142 | 143 | &::after 144 | { 145 | content:"\21E7"; 146 | } 147 | } 148 | 149 | .rotate90 150 | { 151 | -webkit-transform: rotate(90deg); 152 | -moz-transform: rotate(90deg); 153 | -ms-transform: rotate(90deg); 154 | -o-transform: rotate(90deg); 155 | transform: rotate(90deg); 156 | } 157 | 158 | .rotate180 159 | { 160 | -webkit-transform: rotate(180deg); 161 | -moz-transform: rotate(180deg); 162 | -ms-transform: rotate(180deg); 163 | -o-transform: rotate(180deg); 164 | transform: rotate(180deg); 165 | } 166 | 167 | .placeholder 168 | { 169 | background-color: #ccc; 170 | border-radius: 100px; 171 | width: 60px; 172 | height: 60px; 173 | float: left; 174 | margin-right: 10px; 175 | } 176 | 177 | select 178 | { 179 | height: 100px; 180 | } 181 | 182 | ul.tabs 183 | { 184 | line-height:0.8; 185 | } 186 | 187 | p 188 | { 189 | margin-bottom: 0.5rem; 190 | } 191 | 192 | .tab-title-big 193 | { 194 | width: 45%; 195 | border-top: 2px solid $ibmdesign-blue-60; 196 | margin-left:10px; 197 | text-align: center; 198 | } 199 | 200 | .tab-title-small 201 | { 202 | border-top: 2px solid $ibmdesign-blue-60; 203 | margin-left: 5px; 204 | text-align: center; 205 | } 206 | 207 | /* Set styles for browser widths below 640px (40.063em) */ 208 | .tabs-content.vertical { 209 | width: 100%; 210 | max-width: 100% 211 | } 212 | 213 | .tabs.vertical { 214 | display: flex; 215 | justify-content: flex-start; 216 | width: 100%; 217 | max-width: 100%; 218 | } 219 | 220 | .tab-title { 221 | border-right: 2px solid #325C80; 222 | margin-left: 0; 223 | border-top: 0; 224 | } 225 | 226 | /* Reset styles to previous values for browser widths above 640px (40.063em) */ 227 | @media only screen and (min-width: 40.063em) { 228 | .tabs-content.vertical { 229 | width: 85%; 230 | max-width: 85%; 231 | } 232 | 233 | .tabs.vertical { 234 | display: block; 235 | width: 15%; 236 | max-width: 15%; 237 | } 238 | 239 | .tab-title { 240 | border-right: 0; 241 | border-top: 2px solid #325C80; 242 | margin-left: 5px; 243 | } 244 | } 245 | 246 | .tabs .tab-title.active a { 247 | background-color: $ibmdesign-blue-60; 248 | color: #ffffff; 249 | } 250 | 251 | .video-wrapper { 252 | position: relative; 253 | height: 0; 254 | width: 0; 255 | padding: 13% 30%; 256 | display: block; 257 | margin: 0 auto; 258 | } 259 | 260 | .video-wrapper iframe { 261 | position: absolute; 262 | top: 0; 263 | left: 0; 264 | width: 100%; 265 | height: 100%; 266 | } 267 | 268 | .panel-thin 269 | { 270 | margin: 0px; 271 | padding: 5px 272 | } 273 | 274 | .panel-thin-blue 275 | { 276 | margin: 0px; 277 | padding: 5px; 278 | border: 2px solid $ibmdesign-blue-60; 279 | } 280 | 281 | .divider 282 | { 283 | border-right: 1px solid $ibmdesign-blue-60; 284 | margin-bottom:1rem 285 | } 286 | 287 | .icon-image 288 | { 289 | width: 30px; 290 | height: 30px; 291 | 292 | display: block; 293 | margin-left: auto; 294 | margin-right: auto 295 | } 296 | 297 | .content-details 298 | { 299 | padding: 0rem 0.5rem; 300 | } -------------------------------------------------------------------------------- /src/css/_foundation547/foundation.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | // Foundation by ZURB 3 | // foundation.zurb.com 4 | // Licensed under MIT Open Source 5 | 6 | // Make sure the charset is set appropriately 7 | 8 | // Behold, here are all the Foundation components. 9 | @import "foundation/components/grid"; 10 | @import "foundation/components/accordion"; 11 | @import "foundation/components/alert-boxes"; 12 | @import "foundation/components/block-grid"; 13 | @import "foundation/components/breadcrumbs"; 14 | @import "foundation/components/button-groups"; 15 | @import "foundation/components/buttons"; 16 | @import "foundation/components/clearing"; 17 | @import "foundation/components/dropdown"; 18 | @import "foundation/components/dropdown-buttons"; 19 | @import "foundation/components/flex-video"; 20 | @import "foundation/components/forms"; 21 | @import "foundation/components/icon-bar"; 22 | @import "foundation/components/inline-lists"; 23 | @import "foundation/components/joyride"; 24 | @import "foundation/components/keystrokes"; 25 | @import "foundation/components/labels"; 26 | @import "foundation/components/magellan"; 27 | @import "foundation/components/orbit"; 28 | @import "foundation/components/pagination"; 29 | @import "foundation/components/panels"; 30 | @import "foundation/components/pricing-tables"; 31 | @import "foundation/components/progress-bars"; 32 | @import "foundation/components/range-slider"; 33 | @import "foundation/components/reveal"; 34 | @import "foundation/components/side-nav"; 35 | @import "foundation/components/split-buttons"; 36 | @import "foundation/components/sub-nav"; 37 | @import "foundation/components/switches"; 38 | @import "foundation/components/tables"; 39 | @import "foundation/components/tabs"; 40 | @import "foundation/components/thumbs"; 41 | @import "foundation/components/tooltips"; 42 | @import "foundation/components/top-bar"; 43 | @import "foundation/components/type"; 44 | @import "foundation/components/offcanvas"; 45 | @import "foundation/components/visibility"; 46 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/_functions.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | // This is the default html and body font-size for the base rem value. 6 | $rem-base: 16px !default; 7 | 8 | // IMPORT ONCE 9 | // We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 10 | $modules: () !default; 11 | @mixin exports($name) { 12 | $module_index: index($modules, $name); 13 | @if (($module_index == null) or ($module_index == false)) { 14 | $modules: append($modules, $name); 15 | @content; 16 | } 17 | } 18 | 19 | // 20 | // @functions 21 | // 22 | 23 | 24 | // RANGES 25 | // We use these functions to define ranges for various things, like media queries. 26 | @function lower-bound($range){ 27 | @if length($range) <= 0 { 28 | @return 0; 29 | } 30 | @return nth($range,1); 31 | } 32 | 33 | @function upper-bound($range) { 34 | @if length($range) < 2 { 35 | @return 999999999999; 36 | } 37 | @return nth($range, 2); 38 | } 39 | 40 | // STRIP UNIT 41 | // It strips the unit of measure and returns it 42 | @function strip-unit($num) { 43 | @return $num / ($num * 0 + 1); 44 | } 45 | 46 | // CONVERT TO REM 47 | @function convert-to-rem($value, $base-value: $rem-base) { 48 | $value: strip-unit($value) / strip-unit($base-value) * 1rem; 49 | @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 50 | @return $value; 51 | } 52 | 53 | @function data($attr) { 54 | @if $namespace { 55 | @return '[data-' + $namespace + '-' + $attr + ']'; 56 | } 57 | 58 | @return '[data-' + $attr + ']'; 59 | } 60 | 61 | // REM CALC 62 | 63 | // New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's. 64 | // Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported: 65 | // 66 | // rem-calc(10 20 30px 40); 67 | // 68 | // Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets 69 | // 70 | // rem-calc((10, 20, 30, 40px)); 71 | // 72 | // Optionally call with a different base (eg: 8px) to calculate rem. 73 | // 74 | // rem-calc(16px 32px 48px, 8px); 75 | // 76 | // If you require to comma separate your list 77 | // 78 | // rem-calc((16px, 32px, 48), 8px); 79 | 80 | @function rem-calc($values, $base-value: $rem-base) { 81 | $max: length($values); 82 | 83 | @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); } 84 | 85 | $remValues: (); 86 | @for $i from 1 through $max { 87 | $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value)); 88 | } 89 | @return $remValues; 90 | } 91 | 92 | // OLD EM CALC 93 | // Deprecated: We'll drop support for this in 5.1.0, use rem-calc() 94 | @function emCalc($values){ 95 | @return rem-calc($values); 96 | } 97 | 98 | // OLD EM CALC 99 | // Deprecated: We'll drop support for this in 5.1.0, use rem-calc() 100 | @function em-calc($values){ 101 | @return rem-calc($values); 102 | } 103 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_accordion.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | 11 | $include-html-accordion-classes: $include-html-classes !default; 12 | 13 | $accordion-navigation-padding: rem-calc(16) !default; 14 | $accordion-navigation-bg-color: $silver !default; 15 | $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default; 16 | $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default; 17 | $accordion-navigation-font-color: $jet !default; 18 | $accordion-navigation-font-size: rem-calc(16) !default; 19 | $accordion-navigation-font-family: $body-font-family !default; 20 | 21 | $accordion-content-padding: $column-gutter/2 !default; 22 | $accordion-content-active-bg-color: $white !default; 23 | 24 | 25 | // Mixin: accordion-container() 26 | // Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix 27 | // Explicit Dependencies: a clearfix mixin *is* defined. 28 | // Implicit Dependencies: None 29 | 30 | @mixin accordion-container() { 31 | @include clearfix; 32 | margin-bottom: 0; 33 | } 34 | 35 | // Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){ 36 | // @params $bg-color: [ color or string ]: Specify the background color for the navigation element 37 | // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered 38 | // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released. 39 | // @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible 40 | // @params $font-color [ color or string ]: Color of the font for accordion 41 | // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element 42 | // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion 43 | 44 | @mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){ 45 | display: block; 46 | margin-bottom: 0 !important; 47 | @if type-of($active_class) != "string" { 48 | @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component." 49 | } 50 | @else { 51 | &.#{ $active_class } > a { 52 | background: $active-bg; 53 | } 54 | } 55 | > a { 56 | background: $bg; 57 | color: $font-color; 58 | @if type-of($padding) != number { 59 | @warn "`#{$padding}` was read as #{type-of($padding)}"; 60 | @if $accordion-navigation-padding != null { 61 | @warn "#{$padding} was read as a #{type-of($padding)}"; 62 | @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)"; 63 | padding: $accordion-navigation-padding; 64 | } 65 | @else { 66 | @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding"; 67 | padding: null; 68 | } 69 | } 70 | @else { 71 | padding: $padding; 72 | } 73 | display: block; 74 | font-family: $font-family; 75 | @if type-of($font-size) != number { 76 | @warn "`#{$font-size}` was read as a #{type-of($font-size)}"; 77 | @if $accordion-navigation-font-size != null { 78 | @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size})."; 79 | font-size: $accordion-navigation-font-size; 80 | } 81 | @else{ 82 | @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size."; 83 | font-size: null; 84 | 85 | } 86 | } 87 | @else { 88 | font-size: $font-size; 89 | } 90 | &:hover { 91 | background: $hover-bg; 92 | } 93 | } 94 | } 95 | 96 | // Mixin: accordion-content($bg, $padding, $active-class) 97 | // @params $padding [ number ]: Padding for the content of the container 98 | // @params $bg [ color ]: Background color for the content when it's visible 99 | // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible. 100 | 101 | @mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){ 102 | display: none; 103 | @if type-of($padding) != "number" { 104 | @warn "#{$padding} was read as a #{type-of($padding)}"; 105 | @if $accordion-content-padding != null { 106 | @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead"; 107 | padding: $accordion-content-padding; 108 | } @else { 109 | @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding."; 110 | padding: null; 111 | } 112 | } @else { 113 | padding: $padding; 114 | } 115 | 116 | @if type-of($active_class) != "string" { 117 | @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. " 118 | } 119 | @else { 120 | &.#{$active_class} { 121 | display: block; 122 | background: $bg; 123 | } 124 | } 125 | } 126 | 127 | @include exports("accordion") { 128 | @if $include-html-accordion-classes { 129 | .accordion { 130 | @include clearfix; 131 | margin-bottom: 0; 132 | .accordion-navigation, dd { 133 | display: block; 134 | margin-bottom: 0 !important; 135 | &.active > a { background: $accordion-navigation-active-bg-color; } 136 | > a { 137 | background: $accordion-navigation-bg-color; 138 | color: $accordion-navigation-font-color; 139 | padding: $accordion-navigation-padding; 140 | display: block; 141 | font-family: $accordion-navigation-font-family; 142 | font-size: $accordion-navigation-font-size; 143 | &:hover { background: $accordion-navigation-hover-bg-color; } 144 | } 145 | 146 | > .content { 147 | display: none; 148 | padding: $accordion-content-padding; 149 | &.active { 150 | display: block; 151 | background: $accordion-content-active-bg-color; 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_alert-boxes.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // Alert Box Variables 9 | // 10 | $include-html-alert-classes: $include-html-classes !default; 11 | 12 | // We use this to control alert padding. 13 | $alert-padding-top: rem-calc(14) !default; 14 | $alert-padding-default-float: $alert-padding-top !default; 15 | $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default; 16 | $alert-padding-bottom: $alert-padding-top !default; 17 | 18 | // We use these to control text style. 19 | $alert-font-weight: $font-weight-normal !default; 20 | $alert-font-size: rem-calc(13) !default; 21 | $alert-font-color: $white !default; 22 | $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default; 23 | 24 | // We use this for close hover effect. 25 | $alert-function-factor: -14% !default; 26 | 27 | // We use these to control border styles. 28 | $alert-border-style: solid !default; 29 | $alert-border-width: 1px !default; 30 | $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default; 31 | $alert-bottom-margin: rem-calc(20) !default; 32 | 33 | // We use these to style the close buttons 34 | $alert-close-color: $oil !default; 35 | $alert-close-top: 50% !default; 36 | $alert-close-position: rem-calc(4) !default; 37 | $alert-close-font-size: rem-calc(22) !default; 38 | $alert-close-opacity: 0.3 !default; 39 | $alert-close-opacity-hover: 0.5 !default; 40 | $alert-close-padding: 9px 6px 4px !default; 41 | $alert-close-background: inherit !default; 42 | 43 | // We use this to control border radius 44 | $alert-radius: $global-radius !default; 45 | 46 | $alert-transition-speed: 300ms !default; 47 | $alert-transition-ease: ease-out !default; 48 | 49 | // 50 | // Alert Mixins 51 | // 52 | 53 | // We use this mixin to create a default alert base. 54 | @mixin alert-base { 55 | border-style: $alert-border-style; 56 | border-width: $alert-border-width; 57 | display: block; 58 | font-weight: $alert-font-weight; 59 | margin-bottom: $alert-bottom-margin; 60 | position: relative; 61 | padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float; 62 | font-size: $alert-font-size; 63 | @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease) 64 | } 65 | 66 | // We use this mixin to add alert styles 67 | // 68 | // $bg - The background of the alert. Default: $primary-color. 69 | @mixin alert-style($bg:$primary-color) { 70 | 71 | // This finds the lightness percentage of the background color. 72 | $bg-lightness: lightness($bg); 73 | 74 | // We control which background color and border come through. 75 | background-color: $bg; 76 | border-color: scale-color($bg, $lightness: $alert-function-factor); 77 | 78 | // We control the text color for you based on the background color. 79 | @if $bg-lightness > 70% { color: $alert-font-color-alt; } 80 | @else { color: $alert-font-color; } 81 | 82 | } 83 | 84 | // We use this to create the close button. 85 | @mixin alert-close { 86 | font-size: $alert-close-font-size; 87 | padding: $alert-close-padding; 88 | line-height: 0; 89 | position: absolute; 90 | top: $alert-close-top; 91 | margin-top: -($alert-close-font-size / 2); 92 | #{$opposite-direction}: $alert-close-position; 93 | color: $alert-close-color; 94 | opacity: $alert-close-opacity; 95 | background: $alert-close-background; 96 | &:hover, 97 | &:focus { opacity: $alert-close-opacity-hover; } 98 | } 99 | 100 | // We use this to quickly create alerts with a single mixin. 101 | // 102 | // $bg - Background of alert. Default: $primary-color. 103 | // $radius - Radius of alert box. Default: false. 104 | @mixin alert($bg:$primary-color, $radius:false) { 105 | @include alert-base; 106 | @include alert-style($bg); 107 | @include radius($radius); 108 | } 109 | 110 | @include exports("alert-box") { 111 | @if $include-html-alert-classes { 112 | .alert-box { 113 | @include alert; 114 | 115 | .close { @include alert-close; } 116 | 117 | &.radius { @include radius($alert-radius); } 118 | &.round { @include radius($global-rounded); } 119 | 120 | &.success { @include alert-style($success-color); } 121 | &.alert { @include alert-style($alert-color); } 122 | &.secondary { @include alert-style($secondary-color); } 123 | &.warning { @include alert-style($warning-color); } 124 | &.info { @include alert-style($info-color); } 125 | &.alert-close { opacity: 0} 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_block-grid.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // Block Grid Variables 9 | // 10 | $include-html-block-grid-classes: $include-html-classes !default; 11 | $include-xl-html-block-grid-classes: false !default; 12 | 13 | // We use this to control the maximum number of block grid elements per row 14 | $block-grid-elements: 12 !default; 15 | $block-grid-default-spacing: rem-calc(20) !default; 16 | 17 | $align-block-grid-to-grid: false !default; 18 | @if $align-block-grid-to-grid { 19 | $block-grid-default-spacing: $column-gutter; 20 | } 21 | 22 | // Enables media queries for block-grid classes. Set to false if writing semantic HTML. 23 | $block-grid-media-queries: true !default; 24 | 25 | // 26 | // Block Grid Mixins 27 | // 28 | 29 | // Create a custom block grid 30 | // 31 | // $per-row - # of items to display per row. Default: false. 32 | // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20). 33 | // $base-style - Apply a base style to block grid. Default: true. 34 | @mixin block-grid( 35 | $per-row:false, 36 | $spacing:$block-grid-default-spacing, 37 | $include-spacing:true, 38 | $base-style:true) { 39 | 40 | @if $base-style { 41 | display: block; 42 | padding: 0; 43 | @if $align-block-grid-to-grid { 44 | margin: 0; 45 | } @else { 46 | margin: 0 (-$spacing/2); 47 | } 48 | @include clearfix; 49 | 50 | &>li { 51 | display: block; 52 | height: auto; 53 | float: $default-float; 54 | @if $include-spacing { 55 | padding: 0 ($spacing/2) $spacing; 56 | } 57 | } 58 | } 59 | 60 | @if $per-row { 61 | &>li { 62 | width: 100%/$per-row; 63 | @if $include-spacing { 64 | padding: 0 ($spacing/2) $spacing; 65 | } 66 | list-style: none; 67 | 68 | &:nth-of-type(1n) { clear: none; } 69 | &:nth-of-type(#{$per-row}n+1) { clear: both; } 70 | @if $align-block-grid-to-grid { 71 | @include block-grid-aligned($per-row, $spacing); 72 | } 73 | } 74 | } 75 | } 76 | 77 | @mixin block-grid-aligned($per-row, $spacing) { 78 | @for $i from 1 through $block-grid-elements { 79 | @if $per-row >= $i { 80 | $grid-column: '+' + $i; 81 | @if $per-row == $i { 82 | $grid-column: ''; 83 | } 84 | &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) { 85 | padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1)))); 86 | padding-right: ($spacing - (($spacing / $per-row) * $i)); 87 | } 88 | } 89 | } 90 | } 91 | 92 | // Generate presentational markup for block grid. 93 | // 94 | // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc. 95 | @mixin block-grid-html-classes($size,$include-spacing) { 96 | @for $i from 1 through $block-grid-elements { 97 | .#{$size}-block-grid-#{($i)} { 98 | @include block-grid($i,$block-grid-default-spacing,$include-spacing,false); 99 | } 100 | } 101 | } 102 | 103 | @include exports("block-grid") { 104 | @if $include-html-block-grid-classes { 105 | 106 | [class*="block-grid-"] { @include block-grid; } 107 | 108 | @if $block-grid-media-queries { 109 | @media #{$small-up} { 110 | @include block-grid-html-classes($size:small,$include-spacing:false); 111 | } 112 | 113 | @media #{$medium-up} { 114 | @include block-grid-html-classes($size:medium,$include-spacing:false); 115 | } 116 | 117 | @media #{$large-up} { 118 | @include block-grid-html-classes($size:large,$include-spacing:false); 119 | } 120 | 121 | @if $include-xl-html-block-grid-classes { 122 | @media #{$xlarge-up} { 123 | @include block-grid-html-classes($size:xlarge,$include-spacing:false); 124 | } 125 | 126 | @media #{$xxlarge-up} { 127 | @include block-grid-html-classes($size:xxlarge,$include-spacing:false); 128 | } 129 | } 130 | } 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // Breadcrumb Variables 9 | // 10 | $include-html-nav-classes: $include-html-classes !default; 11 | 12 | // We use this to set the background color for the breadcrumb container. 13 | $crumb-bg: scale-color($secondary-color, $lightness: 55%) !default; 14 | 15 | // We use these to set the padding around the breadcrumbs. 16 | $crumb-padding: rem-calc(9 14 9) !default; 17 | $crumb-side-padding: rem-calc(12) !default; 18 | 19 | // We use these to control border styles. 20 | $crumb-function-factor: -10% !default; 21 | $crumb-border-size: 1px !default; 22 | $crumb-border-style: solid !default; 23 | $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default; 24 | $crumb-radius: $global-radius !default; 25 | 26 | // We use these to set various text styles for breadcrumbs. 27 | $crumb-font-size: rem-calc(11) !default; 28 | $crumb-font-color: $primary-color !default; 29 | $crumb-font-color-current: $oil !default; 30 | $crumb-font-color-unavailable: $aluminum !default; 31 | $crumb-font-transform: uppercase !default; 32 | $crumb-link-decor: underline !default; 33 | 34 | // We use these to control the slash between breadcrumbs 35 | $crumb-slash-color: $base !default; 36 | $crumb-slash: "/" !default; 37 | 38 | // 39 | // Breadcrumb Mixins 40 | // 41 | 42 | // We use this mixin to create a container around our breadcrumbs 43 | @mixin crumb-container { 44 | display: block; 45 | padding: $crumb-padding; 46 | overflow: hidden; 47 | margin-#{$default-float}: 0; 48 | list-style: none; 49 | border-style: $crumb-border-style; 50 | border-width: $crumb-border-size; 51 | 52 | // We control which background color and border come through. 53 | background-color: $crumb-bg; 54 | border-color: $crumb-border-color; 55 | } 56 | 57 | // We use this mixin to create breadcrumb styles from list items. 58 | @mixin crumbs { 59 | 60 | // A normal state will make the links look and act like clickable breadcrumbs. 61 | margin: 0; 62 | float: $default-float; 63 | font-size: $crumb-font-size; 64 | line-height: $crumb-font-size; 65 | text-transform: $crumb-font-transform; 66 | color: $crumb-font-color; 67 | 68 | &:hover a, &:focus a { text-decoration: $crumb-link-decor; } 69 | 70 | a { 71 | color: $crumb-font-color; 72 | } 73 | 74 | // Current is for the link of the current page 75 | &.current { 76 | cursor: $cursor-default-value; 77 | color: $crumb-font-color-current; 78 | a { 79 | cursor: $cursor-default-value; 80 | color: $crumb-font-color-current; 81 | } 82 | 83 | &:hover, &:hover a, 84 | &:focus, &:focus a { text-decoration: none; } 85 | } 86 | 87 | // Unavailable removed color and link styles so it looks inactive. 88 | &.unavailable { 89 | color: $crumb-font-color-unavailable; 90 | a { color: $crumb-font-color-unavailable; } 91 | 92 | &:hover, 93 | &:hover a, 94 | &:focus, 95 | a:focus { 96 | text-decoration: none; 97 | color: $crumb-font-color-unavailable; 98 | cursor: $cursor-default-value; 99 | } 100 | } 101 | 102 | &:before { 103 | content: "#{$crumb-slash}"; 104 | color: $crumb-slash-color; 105 | margin: 0 $crumb-side-padding; 106 | position: relative; 107 | top: 1px; 108 | } 109 | 110 | &:first-child:before { 111 | content: " "; 112 | margin: 0; 113 | } 114 | } 115 | 116 | @include exports("breadcrumbs") { 117 | @if $include-html-nav-classes { 118 | .breadcrumbs { 119 | @include crumb-container; 120 | @include radius($crumb-radius); 121 | 122 | &>* { 123 | @include crumbs; 124 | } 125 | } 126 | } 127 | } 128 | 129 | /* Accessibility - hides the forward slash */ 130 | [aria-label="breadcrumbs"] [aria-hidden="true"]:after { 131 | content: "/"; 132 | } 133 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_button-groups.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | @import "buttons"; 7 | 8 | // 9 | // Button Group Variables 10 | // 11 | $include-html-button-classes: $include-html-classes !default; 12 | 13 | // Sets the margin for the right side by default, and the left margin if right-to-left direction is used 14 | $button-bar-margin-opposite: rem-calc(10) !default; 15 | $button-group-border-width: 1px !default; 16 | 17 | // 18 | // Button Group Mixins 19 | // 20 | 21 | // We use this to add styles for a button group container 22 | @mixin button-group-container($styles:true, $float:false) { 23 | @if $styles { 24 | list-style: none; 25 | margin: 0; 26 | #{$default-float}: 0; 27 | @include clearfix(); 28 | } 29 | @if $float { 30 | float: #{$default-float}; 31 | margin-#{$opposite-direction}: $button-bar-margin-opposite; 32 | & div { overflow: hidden; } 33 | } 34 | } 35 | 36 | // We use this to control styles for button groups 37 | @mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) { 38 | 39 | > button, .button { 40 | border-#{$default-float}: $button-group-border-width solid; 41 | border-color: rgba(255, 255, 255, 0.5); 42 | } 43 | 44 | &:first-child { 45 | button, .button { 46 | border-#{$default-float}: 0; 47 | } 48 | } 49 | 50 | // We use this to control the flow, or remove those styles completely. 51 | @if $float { 52 | margin: 0; 53 | float: $float; 54 | display: list-item; 55 | // Make sure the first child doesn't get the negative margin. 56 | &:first-child { margin-#{$default-float}: 0; } 57 | } 58 | @else { 59 | margin: 0 -2px; 60 | display: inline-block; 61 | } 62 | 63 | @if $orientation == vertical { 64 | display:block; 65 | margin:0; 66 | > button, .button { 67 | border-top: $button-group-border-width solid; 68 | border-color: rgba(255, 255, 255, 0.5); 69 | border-left-width: 0px; 70 | margin:0; 71 | display: block; 72 | } 73 | 74 | &:first-child { 75 | button, .button { 76 | border-top: 0; 77 | } 78 | } 79 | } 80 | 81 | // We use these to control left and right radius on first/last buttons in the group. 82 | @if $radius == true { 83 | &, 84 | & > a, 85 | & > button, 86 | & > .button { @include radius(0); } 87 | &:first-child, 88 | &:first-child > a, 89 | &:first-child > button, 90 | &:first-child > .button { 91 | @if $orientation == vertical { 92 | @include side-radius(top, $button-radius); 93 | } 94 | @else { 95 | @include side-radius($default-float, $button-radius); 96 | } 97 | } 98 | &:last-child, 99 | &:last-child > a, 100 | &:last-child > button, 101 | &:last-child > .button { 102 | @if $orientation == vertical { 103 | @include side-radius(bottom, $button-radius); 104 | } 105 | @else { 106 | @include side-radius($opposite-direction, $button-radius); 107 | } 108 | } 109 | } 110 | @else if $radius { 111 | &, 112 | & > a, 113 | & > button, 114 | & > .button { @include radius(0); } 115 | &:first-child, 116 | &:first-child > a, 117 | &:first-child > button, 118 | &:first-child > .button { 119 | @if $orientation == vertical { 120 | @include side-radius(top, $radius); 121 | } 122 | @else { 123 | @include side-radius($default-float, $radius); 124 | } 125 | } 126 | &:last-child, 127 | &:last-child > a, 128 | &:last-child > button, 129 | &:last-child > .button { 130 | @if $orientation == vertical { 131 | @include side-radius(bottom, $radius); 132 | } 133 | @else { 134 | @include side-radius($opposite-direction, $radius); 135 | } 136 | } 137 | } 138 | 139 | // We use this to make the buttons even width across their container 140 | @if $even { 141 | width: percentage((100/$even) / 100); 142 | button, .button { width: 100%; } 143 | } 144 | } 145 | 146 | @include exports("button-group") { 147 | @if $include-html-button-classes { 148 | .button-group { @include button-group-container; 149 | 150 | & > li { @include button-group-style(); } 151 | 152 | &.stack { 153 | & > li { @include button-group-style($orientation:vertical); float: none; } 154 | } 155 | 156 | &.stack-for-small { 157 | & > li { 158 | @include button-group-style($orientation:horizontal); 159 | @media #{$small-only} { 160 | @include button-group-style($orientation:vertical); 161 | } 162 | } 163 | } 164 | 165 | &.radius > * { @include button-group-style($radius:$button-radius, $float:null); } 166 | &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); } 167 | &.radius.stack-for-small > * { 168 | @media #{$medium-up} { 169 | @include button-group-style($radius:$button-radius, $orientation:horizontal); 170 | } 171 | @media #{$small-only} { 172 | @include button-group-style($radius:$button-radius, $orientation:vertical); 173 | } 174 | } 175 | 176 | &.round > * { @include button-group-style($radius:$button-round, $float:null); } 177 | &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); } 178 | &.round.stack-for-small > * { 179 | @media #{$medium-up} { 180 | @include button-group-style($radius:$button-round, $orientation:horizontal); 181 | } 182 | @media #{$small-only} { 183 | @include button-group-style($radius:$button-med, $orientation:vertical); 184 | } 185 | } 186 | 187 | @for $i from 2 through 8 { 188 | &.even-#{$i} li { @include button-group-style($even:$i, $float:null); } 189 | } 190 | } 191 | 192 | .button-bar { 193 | @include clearfix; 194 | .button-group { @include button-group-container($styles:false, $float:true); } 195 | } 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_clearing.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-clearing-classes: $include-html-classes !default; 11 | 12 | // We use these to set the background colors for parts of Clearing. 13 | $clearing-bg: $oil !default; 14 | $clearing-caption-bg: $clearing-bg !default; 15 | $clearing-carousel-bg: rgba(51,51,51,0.8) !default; 16 | $clearing-img-bg: $clearing-bg !default; 17 | 18 | // We use these to style the close button 19 | $clearing-close-color: $iron !default; 20 | $clearing-close-size: 30px !default; 21 | 22 | // We use these to style the arrows 23 | $clearing-arrow-size: 12px !default; 24 | $clearing-arrow-color: $clearing-close-color !default; 25 | 26 | // We use these to style captions 27 | $clearing-caption-font-color: $iron !default; 28 | $clearing-caption-font-size: 0.875em !default; 29 | $clearing-caption-padding: 10px 30px 20px !default; 30 | 31 | // We use these to make the image and carousel height and style 32 | $clearing-active-img-height: 85% !default; 33 | $clearing-carousel-height: 120px !default; 34 | $clearing-carousel-thumb-width: 120px !default; 35 | $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; 36 | 37 | @include exports("clearing") { 38 | @if $include-html-clearing-classes { 39 | // We decided to not create a mixin for Clearing because it relies 40 | // on predefined classes and structure to work properly. 41 | // The variables above should give enough control. 42 | 43 | /* Clearing Styles */ 44 | .clearing-thumbs, #{data('clearing')} { 45 | @include clearfix; 46 | margin-bottom: 0; 47 | margin-#{$default-float}: 0; 48 | list-style: none; 49 | 50 | li { 51 | float: $default-float; 52 | margin-#{$opposite-direction}: 10px; 53 | } 54 | 55 | &[class*="block-grid-"] li { 56 | margin-#{$opposite-direction}: 0; 57 | } 58 | } 59 | 60 | .clearing-blackout { 61 | background: $clearing-bg; 62 | position: fixed; 63 | width: 100%; 64 | height: 100%; 65 | top: 0; 66 | #{$default-float}: 0; 67 | z-index: 998; 68 | 69 | .clearing-close { display: block; } 70 | } 71 | 72 | .clearing-container { 73 | position: relative; 74 | z-index: 998; 75 | height: 100%; 76 | overflow: hidden; 77 | margin: 0; 78 | } 79 | 80 | .clearing-touch-label { 81 | position: absolute; 82 | top: 50%; 83 | left: 50%; 84 | color: $base; 85 | font-size: 0.6em; 86 | } 87 | 88 | .visible-img { 89 | height: 95%; 90 | position: relative; 91 | 92 | img { 93 | position: absolute; 94 | #{$default-float}: 50%; 95 | top: 50%; 96 | margin-#{$default-float}: -50%; 97 | max-height: 100%; 98 | max-width: 100%; 99 | } 100 | } 101 | 102 | .clearing-caption { 103 | color: $clearing-caption-font-color; 104 | font-size: $clearing-caption-font-size; 105 | line-height: 1.3; 106 | margin-bottom: 0; 107 | text-align: center; 108 | bottom: 0; 109 | background: $clearing-caption-bg; 110 | width: 100%; 111 | padding: $clearing-caption-padding; 112 | position: absolute; 113 | #{$default-float}: 0; 114 | } 115 | 116 | .clearing-close { 117 | z-index: 999; 118 | padding-#{$default-float}: 20px; 119 | padding-top: 10px; 120 | font-size: $clearing-close-size; 121 | line-height: 1; 122 | color: $clearing-close-color; 123 | display: none; 124 | 125 | &:hover, 126 | &:focus { color: $iron; } 127 | } 128 | 129 | .clearing-assembled .clearing-container { height: 100%; 130 | .carousel > ul { display: none; } 131 | } 132 | 133 | // If you want to show a lightbox, but only have a single image come through as the thumbnail 134 | .clearing-feature li { 135 | display: none; 136 | &.clearing-featured-img { 137 | display: block; 138 | } 139 | } 140 | 141 | // Large screen overrides 142 | @media #{$medium-up} { 143 | .clearing-main-prev, 144 | .clearing-main-next { 145 | position: absolute; 146 | height: 100%; 147 | width: 40px; 148 | top: 0; 149 | & > span { 150 | position: absolute; 151 | top: 50%; 152 | display: block; 153 | width: 0; 154 | height: 0; 155 | border: solid $clearing-arrow-size; 156 | &:hover { opacity: 0.8; } 157 | } 158 | } 159 | .clearing-main-prev { 160 | #{$default-float}: 0; 161 | & > span { 162 | #{$default-float}: 5px; 163 | border-color: transparent; 164 | border-#{$opposite-direction}-color: $clearing-arrow-color; 165 | } 166 | } 167 | .clearing-main-next { 168 | #{$opposite-direction}: 0; 169 | & > span { 170 | border-color: transparent; 171 | border-#{$default-float}-color: $clearing-arrow-color; 172 | } 173 | } 174 | 175 | .clearing-main-prev.disabled, 176 | .clearing-main-next.disabled { opacity: 0.3; } 177 | 178 | .clearing-assembled .clearing-container { 179 | 180 | .carousel { 181 | background: $clearing-carousel-bg; 182 | height: $clearing-carousel-height; 183 | margin-top: 10px; 184 | text-align: center; 185 | 186 | & > ul { 187 | display: inline-block; 188 | z-index: 999; 189 | height: 100%; 190 | position: relative; 191 | float: none; 192 | 193 | li { 194 | display: block; 195 | width: $clearing-carousel-thumb-width; 196 | min-height: inherit; 197 | float: $default-float; 198 | overflow: hidden; 199 | margin-#{$opposite-direction}: 0; 200 | padding: 0; 201 | position: relative; 202 | cursor: $cursor-pointer-value; 203 | opacity: 0.4; 204 | clear: none; 205 | 206 | &.fix-height { 207 | img { 208 | height: 100%; 209 | max-width: none; 210 | } 211 | } 212 | 213 | a.th { 214 | border: none; 215 | box-shadow: none; 216 | display: block; 217 | } 218 | 219 | img { 220 | cursor: $cursor-pointer-value !important; 221 | width: 100% !important; 222 | } 223 | 224 | &.visible { opacity: 1; } 225 | &:hover { opacity: 0.8; } 226 | } 227 | } 228 | } 229 | 230 | .visible-img { 231 | background: $clearing-img-bg; 232 | overflow: hidden; 233 | height: $clearing-active-img-height; 234 | } 235 | } 236 | 237 | .clearing-close { 238 | position: absolute; 239 | top: 10px; 240 | #{$opposite-direction}: 20px; 241 | padding-#{$default-float}: 0; 242 | padding-top: 0; 243 | } 244 | } 245 | 246 | } 247 | } 248 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_dropdown-buttons.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-button-classes: $include-html-classes !default; 11 | 12 | // We use these to set the color of the pip in dropdown buttons 13 | $dropdown-button-pip-color: $white !default; 14 | $dropdown-button-pip-color-alt: $oil !default; 15 | 16 | $button-pip-tny: rem-calc(6) !default; 17 | $button-pip-sml: rem-calc(7) !default; 18 | $button-pip-med: rem-calc(9) !default; 19 | $button-pip-lrg: rem-calc(11) !default; 20 | 21 | // We use these to style tiny dropdown buttons 22 | $dropdown-button-padding-tny: $button-pip-tny * 7 !default; 23 | $dropdown-button-pip-size-tny: $button-pip-tny !default; 24 | $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default; 25 | $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default; 26 | 27 | // We use these to style small dropdown buttons 28 | $dropdown-button-padding-sml: $button-pip-sml * 7 !default; 29 | $dropdown-button-pip-size-sml: $button-pip-sml !default; 30 | $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default; 31 | $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default; 32 | 33 | // We use these to style medium dropdown buttons 34 | $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default; 35 | $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default; 36 | $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default; 37 | $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default; 38 | 39 | // We use these to style large dropdown buttons 40 | $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default; 41 | $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; 42 | $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default; 43 | $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default; 44 | 45 | // @mixins 46 | // 47 | // Dropdown Button Mixin 48 | // 49 | // We use this mixin to build off of the button mixin and add dropdown button styles 50 | // 51 | // $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large] 52 | // $pip-color - Color of the little triangle that points to the dropdown. Default: $white. 53 | // $base-style - Add in base-styles. This can be set to false. Default:true 54 | 55 | @mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) { 56 | 57 | // We add in base styles, but they can be negated by setting to 'false'. 58 | @if $base-style { 59 | position: relative; 60 | outline: none; 61 | 62 | // This creates the base styles for the triangle pip 63 | &::after { 64 | position: absolute; 65 | content: ""; 66 | width: 0; 67 | height: 0; 68 | display: block; 69 | border-style: solid; 70 | border-color: $dropdown-button-pip-color transparent transparent transparent; 71 | top: 50%; 72 | } 73 | } 74 | 75 | // If we're dealing with tiny buttons, use these styles 76 | @if $padding == tiny { 77 | padding-#{$opposite-direction}: $dropdown-button-padding-tny; 78 | &:after { 79 | border-width: $dropdown-button-pip-size-tny; 80 | #{$opposite-direction}: $dropdown-button-pip-opposite-tny; 81 | margin-top: $dropdown-button-pip-top-tny; 82 | } 83 | } 84 | 85 | // If we're dealing with small buttons, use these styles 86 | @if $padding == small { 87 | padding-#{$opposite-direction}: $dropdown-button-padding-sml; 88 | &::after { 89 | border-width: $dropdown-button-pip-size-sml; 90 | #{$opposite-direction}: $dropdown-button-pip-opposite-sml; 91 | margin-top: $dropdown-button-pip-top-sml; 92 | } 93 | } 94 | 95 | // If we're dealing with default (medium) buttons, use these styles 96 | @if $padding == medium { 97 | padding-#{$opposite-direction}: $dropdown-button-padding-med; 98 | &::after { 99 | border-width: $dropdown-button-pip-size-med; 100 | #{$opposite-direction}: $dropdown-button-pip-opposite-med; 101 | margin-top: $dropdown-button-pip-top-med; 102 | } 103 | } 104 | 105 | // If we're dealing with large buttons, use these styles 106 | @if $padding == large { 107 | padding-#{$opposite-direction}: $dropdown-button-padding-lrg; 108 | &::after { 109 | border-width: $dropdown-button-pip-size-lrg; 110 | #{$opposite-direction}: $dropdown-button-pip-opposite-lrg; 111 | margin-top: $dropdown-button-pip-top-lrg; 112 | } 113 | } 114 | 115 | // We can control the pip color. We didn't use logic in this case, just set it and forget it. 116 | @if $pip-color { 117 | &::after { border-color: $pip-color transparent transparent transparent; } 118 | } 119 | } 120 | 121 | @include exports("dropdown-button") { 122 | @if $include-html-button-classes { 123 | .dropdown.button, button.dropdown { @include dropdown-button; 124 | &.tiny { @include dropdown-button(tiny,$base-style:false); } 125 | &.small { @include dropdown-button(small,$base-style:false); } 126 | &.large { @include dropdown-button(large,$base-style:false); } 127 | &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; } 128 | } 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-dropdown-classes: $include-html-classes !default; 11 | 12 | // We use these to controls height and width styles. 13 | $f-dropdown-max-width: 200px !default; 14 | $f-dropdown-height: auto !default; 15 | $f-dropdown-max-height: none !default; 16 | 17 | // Used for bottom position 18 | $f-dropdown-margin-top: 2px !default; 19 | 20 | // Used for right position 21 | $f-dropdown-margin-left: $f-dropdown-margin-top !default; 22 | 23 | // Used for left position 24 | $f-dropdown-margin-right: $f-dropdown-margin-top !default; 25 | 26 | // Used for top position 27 | $f-dropdown-margin-bottom: $f-dropdown-margin-top !default; 28 | 29 | // We use this to control the background color 30 | $f-dropdown-bg: $white !default; 31 | 32 | // We use this to set the border styles for dropdowns. 33 | $f-dropdown-border-style: solid !default; 34 | $f-dropdown-border-width: 1px !default; 35 | $f-dropdown-border-color: scale-color($white, $lightness: -20%) !default; 36 | 37 | // We use these to style the triangle pip. 38 | $f-dropdown-triangle-size: 6px !default; 39 | $f-dropdown-triangle-color: $white !default; 40 | $f-dropdown-triangle-side-offset: 10px !default; 41 | 42 | // We use these to control styles for the list elements. 43 | $f-dropdown-list-style: none !default; 44 | $f-dropdown-font-color: $charcoal !default; 45 | $f-dropdown-font-size: rem-calc(14) !default; 46 | $f-dropdown-list-padding: rem-calc(5, 10) !default; 47 | $f-dropdown-line-height: rem-calc(18) !default; 48 | $f-dropdown-list-hover-bg: $smoke !default; 49 | $dropdown-mobile-default-float: 0 !default; 50 | 51 | // We use this to control the styles for when the dropdown has custom content. 52 | $f-dropdown-content-padding: rem-calc(20) !default; 53 | 54 | // Default radius for dropdown. 55 | $f-dropdown-radius: $global-radius !default; 56 | 57 | // 58 | // @mixins 59 | // 60 | // 61 | // NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.; 62 | // We use this to style the dropdown container element. 63 | // $content-list - Sets list-style. Default: list. Options: [list, content] 64 | // $triangle - Sets if dropdown has triangle. Default:true. 65 | // $max-width - Default: $f-dropdown-max-width || 200px. 66 | @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) { 67 | position: absolute; 68 | left: -9999px; 69 | list-style: $f-dropdown-list-style; 70 | margin-#{$default-float}: 0; 71 | outline: none; 72 | 73 | > *:first-child { margin-top: 0; } 74 | > *:last-child { margin-bottom: 0; } 75 | 76 | @if $content == list { 77 | width: 100%; 78 | max-height: $f-dropdown-max-height; 79 | height: $f-dropdown-height; 80 | background: $f-dropdown-bg; 81 | border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; 82 | font-size: $f-dropdown-font-size; 83 | z-index: 89; 84 | } 85 | @else if $content == content { 86 | padding: $f-dropdown-content-padding; 87 | width: 100%; 88 | height: $f-dropdown-height; 89 | max-height: $f-dropdown-max-height; 90 | background: $f-dropdown-bg; 91 | border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; 92 | font-size: $f-dropdown-font-size; 93 | z-index: 89; 94 | } 95 | 96 | @if $triangle == bottom { 97 | margin-top: $f-dropdown-margin-top; 98 | 99 | &:before { 100 | @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom); 101 | position: absolute; 102 | top: -($f-dropdown-triangle-size * 2); 103 | #{$default-float}: $f-dropdown-triangle-side-offset; 104 | z-index: 89; 105 | } 106 | &:after { 107 | @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom); 108 | position: absolute; 109 | top: -(($f-dropdown-triangle-size + 1) * 2); 110 | #{$default-float}: $f-dropdown-triangle-side-offset - 1; 111 | z-index: 88; 112 | } 113 | 114 | &.right:before { 115 | #{$default-float}: auto; 116 | #{$opposite-direction}: $f-dropdown-triangle-side-offset; 117 | } 118 | &.right:after { 119 | #{$default-float}: auto; 120 | #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; 121 | } 122 | } 123 | 124 | @if $triangle == $default-float { 125 | margin-top: 0; 126 | margin-#{$default-float}: $f-dropdown-margin-right; 127 | 128 | &:before { 129 | @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction}); 130 | position: absolute; 131 | top: $f-dropdown-triangle-side-offset; 132 | #{$default-float}: -($f-dropdown-triangle-size * 2); 133 | z-index: 89; 134 | } 135 | &:after { 136 | @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction}); 137 | position: absolute; 138 | top: $f-dropdown-triangle-side-offset - 1; 139 | #{$default-float}: -($f-dropdown-triangle-size * 2) - 2; 140 | z-index: 88; 141 | } 142 | 143 | } 144 | 145 | @if $triangle == $opposite-direction { 146 | margin-top: 0; 147 | margin-#{$default-float}: -$f-dropdown-margin-right; 148 | 149 | &:before { 150 | @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float}); 151 | position: absolute; 152 | top: $f-dropdown-triangle-side-offset; 153 | #{$opposite-direction}: -($f-dropdown-triangle-size * 2); 154 | #{$default-float}: auto; 155 | z-index: 89; 156 | } 157 | &:after { 158 | @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float}); 159 | position: absolute; 160 | top: $f-dropdown-triangle-side-offset - 1; 161 | #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2; 162 | #{$default-float}: auto; 163 | z-index: 88; 164 | } 165 | 166 | } 167 | 168 | @if $triangle == top { 169 | margin-top: -$f-dropdown-margin-bottom; 170 | margin-left: 0; 171 | 172 | &:before { 173 | @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top); 174 | position: absolute; 175 | top: auto; 176 | bottom: -($f-dropdown-triangle-size * 2); 177 | #{$default-float}: $f-dropdown-triangle-side-offset; 178 | #{$opposite-direction}: auto; 179 | z-index: 89; 180 | } 181 | &:after { 182 | @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top); 183 | position: absolute; 184 | top: auto; 185 | bottom: -($f-dropdown-triangle-size * 2) - 2; 186 | #{$default-float}: $f-dropdown-triangle-side-offset - 1; 187 | #{$opposite-direction}: auto; 188 | z-index: 88; 189 | } 190 | 191 | } 192 | 193 | @if $max-width { max-width: $max-width; } 194 | @else { max-width: $f-dropdown-max-width; } 195 | 196 | } 197 | 198 | // @MIXIN 199 | // 200 | // We use this to style the list elements or content inside the dropdown. 201 | 202 | @mixin dropdown-style { 203 | font-size: $f-dropdown-font-size; 204 | cursor: $cursor-pointer-value; 205 | 206 | line-height: $f-dropdown-line-height; 207 | margin: 0; 208 | 209 | &:hover, 210 | &:focus { background: $f-dropdown-list-hover-bg; } 211 | 212 | &.radius { @include radius($f-dropdown-radius); } 213 | 214 | a { 215 | display: block; 216 | padding: $f-dropdown-list-padding; 217 | color: $f-dropdown-font-color; 218 | } 219 | } 220 | 221 | @include exports("dropdown") { 222 | @if $include-html-dropdown-classes { 223 | 224 | /* Foundation Dropdowns */ 225 | .f-dropdown { 226 | @include dropdown-container(list, bottom); 227 | 228 | &.drop-#{$opposite-direction} { 229 | @include dropdown-container(list, #{$default-float}); 230 | } 231 | 232 | &.drop-#{$default-float} { 233 | @include dropdown-container(list, #{$opposite-direction}); 234 | } 235 | 236 | &.drop-top { 237 | @include dropdown-container(list, top); 238 | } 239 | // max-width: none; 240 | 241 | li { @include dropdown-style; } 242 | 243 | // You can also put custom content in these dropdowns 244 | &.content { @include dropdown-container(content, $triangle:false); } 245 | 246 | // Sizes 247 | &.tiny { max-width: 200px; } 248 | &.small { max-width: 300px; } 249 | &.medium { max-width: 500px; } 250 | &.large { max-width: 800px; } 251 | &.mega { 252 | width:100%!important; 253 | max-width:100%!important; 254 | 255 | &.open{ 256 | left:0!important; 257 | } 258 | } 259 | } 260 | 261 | } 262 | } 263 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_flex-video.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-media-classes: $include-html-classes !default; 11 | 12 | // We use these to control video container padding and margins 13 | $flex-video-padding-top: rem-calc(25) !default; 14 | $flex-video-padding-bottom: 67.5% !default; 15 | $flex-video-margin-bottom: rem-calc(16) !default; 16 | 17 | // We use this to control widescreen bottom padding 18 | $flex-video-widescreen-padding-bottom: 56.34% !default; 19 | 20 | // 21 | // @mixins 22 | // 23 | 24 | @mixin flex-video-container { 25 | position: relative; 26 | padding-top: $flex-video-padding-top; 27 | padding-bottom: $flex-video-padding-bottom; 28 | height: 0; 29 | margin-bottom: $flex-video-margin-bottom; 30 | overflow: hidden; 31 | 32 | &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; } 33 | &.vimeo { padding-top: 0; } 34 | 35 | iframe, 36 | object, 37 | embed, 38 | video { 39 | position: absolute; 40 | top: 0; 41 | #{$default-float}: 0; 42 | width: 100%; 43 | height: 100%; 44 | } 45 | } 46 | 47 | @include exports("flex-video") { 48 | @if $include-html-media-classes { 49 | .flex-video { @include flex-video-container; } 50 | } 51 | } -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_grid.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-grid-classes: $include-html-classes !default; 11 | $include-xl-html-grid-classes: false !default; 12 | 13 | $row-width: rem-calc(1000) !default; 14 | $total-columns: 12 !default; 15 | 16 | $last-child-float: $opposite-direction !default; 17 | 18 | // 19 | // Grid Functions 20 | // 21 | 22 | // Deprecated: We'll drop support for this in 5.1, use grid-calc() 23 | @function gridCalc($colNumber, $totalColumns) { 24 | @warn "gridCalc() is deprecated, use grid-calc()"; 25 | @return grid-calc($colNumber, $totalColumns); 26 | } 27 | 28 | // @FUNCTION 29 | // $colNumber - Found in settings file 30 | // $totalColumns - Found in settings file 31 | @function grid-calc($colNumber, $totalColumns) { 32 | @return percentage(($colNumber / $totalColumns)); 33 | } 34 | 35 | // 36 | // @mixins 37 | // 38 | 39 | // For creating container, nested, and collapsed rows. 40 | // 41 | // 42 | // $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false. 43 | @mixin grid-row($behavior: false) { 44 | 45 | // use @include grid-row(nest); to include a nested row 46 | @if $behavior == nest { 47 | width: auto; 48 | margin-#{$default-float}: -($column-gutter/2); 49 | margin-#{$opposite-direction}: -($column-gutter/2); 50 | margin-top: 0; 51 | margin-bottom: 0; 52 | max-width: none; 53 | } 54 | 55 | // use @include grid-row(collapse); to collapsed a container row margins 56 | @else if $behavior == collapse { 57 | width: 100%; 58 | margin: 0; 59 | max-width: $row-width; 60 | } 61 | 62 | // use @include grid-row(nest-collapse); to collapse outer margins on a nested row 63 | @else if $behavior == nest-collapse { 64 | width: auto; 65 | margin: 0; 66 | max-width: none; 67 | } 68 | 69 | // use @include grid-row; to use a container row 70 | @else { 71 | width: 100%; 72 | margin-#{$default-float}: auto; 73 | margin-#{$opposite-direction}: auto; 74 | margin-top: 0; 75 | margin-bottom: 0; 76 | max-width: $row-width; 77 | } 78 | 79 | // Clearfix for all rows 80 | @include clearfix(); 81 | } 82 | 83 | // Creates a column, should be used inside of a media query to control layouts 84 | // 85 | // $columns - The number of columns this should be 86 | // $last-column - Is this the last column? Default: false. 87 | // $center - Center these columns? Default: false. 88 | // $offset - # of columns to offset. Default: false. 89 | // $push - # of columns to push. Default: false. 90 | // $pull - # of columns to pull. Default: false. 91 | // $collapse - Get rid of gutter padding on column? Default: false. 92 | // $float - Should this float? Default: true. Options: true, false, left, right. 93 | @mixin grid-column( 94 | $columns:false, 95 | $last-column:false, 96 | $center:false, 97 | $offset:false, 98 | $push:false, 99 | $pull:false, 100 | $collapse:false, 101 | $float:true, 102 | $position:false) { 103 | 104 | // If positioned for default .column, include relative position 105 | // push and pull require position set 106 | @if $position or $push or $pull { 107 | position: relative; 108 | } 109 | 110 | // If collapsed, get rid of gutter padding 111 | @if $collapse { 112 | padding-left: 0; 113 | padding-right: 0; 114 | } 115 | 116 | // Gutter padding whenever a column isn't set to collapse 117 | // (use $collapse:null to do nothing) 118 | @else if $collapse == false { 119 | padding-left: $column-gutter / 2; 120 | padding-right: $column-gutter / 2; 121 | } 122 | 123 | // If a column number is given, calculate width 124 | @if $columns { 125 | width: grid-calc($columns, $total-columns); 126 | 127 | // If last column, float naturally instead of to the right 128 | @if $last-column { float: $opposite-direction; } 129 | } 130 | 131 | // Source Ordering, adds left/right depending on which you use. 132 | @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; } 133 | @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; } 134 | 135 | @if $float { 136 | @if $float == left or $float == true { float: $default-float; } 137 | @else if $float == right { float: $opposite-direction; } 138 | @else { float: none; } 139 | } 140 | 141 | // If centered, get rid of float and add appropriate margins 142 | @if $center { 143 | margin-#{$default-float}: auto; 144 | margin-#{$opposite-direction}: auto; 145 | float: none; 146 | } 147 | 148 | // If offset, calculate appropriate margins 149 | @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; } 150 | 151 | } 152 | 153 | // Create presentational classes for grid 154 | // 155 | // $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc. 156 | @mixin grid-html-classes($size) { 157 | 158 | @for $i from 0 through $total-columns - 1 { 159 | .#{$size}-push-#{$i} { 160 | @include grid-column($push:$i, $collapse:null, $float:false); 161 | } 162 | .#{$size}-pull-#{$i} { 163 | @include grid-column($pull:$i, $collapse:null, $float:false); 164 | } 165 | } 166 | 167 | .column, 168 | .columns { @include grid-column($columns:false, $position:true); } 169 | 170 | 171 | @for $i from 1 through $total-columns { 172 | .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } 173 | } 174 | 175 | 176 | 177 | @for $i from 0 through $total-columns - 1 { 178 | .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); } 179 | } 180 | .#{$size}-reset-order { 181 | margin-#{$default-float}: 0; 182 | margin-#{$opposite-direction}: 0; 183 | left: auto; 184 | right: auto; 185 | float: $default-float; 186 | } 187 | 188 | .column.#{$size}-centered, 189 | .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); } 190 | 191 | .column.#{$size}-uncentered, 192 | .columns.#{$size}-uncentered { 193 | margin-#{$default-float}: 0; 194 | margin-#{$opposite-direction}: 0; 195 | float: $default-float; 196 | } 197 | 198 | // Fighting [class*="column"] + [class*="column"]:last-child 199 | .column.#{$size}-centered:last-child, 200 | .columns.#{$size}-centered:last-child{ 201 | float: none; 202 | } 203 | 204 | // Fighting .column.-centered:last-child 205 | .column.#{$size}-uncentered:last-child, 206 | .columns.#{$size}-uncentered:last-child { 207 | float: $default-float; 208 | } 209 | 210 | .column.#{$size}-uncentered.opposite, 211 | .columns.#{$size}-uncentered.opposite { 212 | float: $opposite-direction; 213 | } 214 | } 215 | 216 | @include exports("grid") { 217 | @if $include-html-grid-classes { 218 | .row { 219 | @include grid-row; 220 | 221 | &.collapse { 222 | > .column, 223 | > .columns { @include grid-column($collapse:true, $float:false); } 224 | 225 | .row {margin-left:0; margin-right:0;} 226 | } 227 | 228 | .row { @include grid-row($behavior:nest); 229 | &.collapse { @include grid-row($behavior:nest-collapse); } 230 | } 231 | } 232 | 233 | .column, 234 | .columns { @include grid-column($columns:$total-columns); } 235 | 236 | [class*="column"] + [class*="column"]:last-child { float: $last-child-float; } 237 | [class*="column"] + [class*="column"].end { float: $default-float; } 238 | 239 | @media #{$small-up} { 240 | @include grid-html-classes($size:small); 241 | } 242 | 243 | @media #{$medium-up} { 244 | @include grid-html-classes($size:medium); 245 | // Old push and pull classes 246 | @for $i from 0 through $total-columns - 1 { 247 | .push-#{$i} { 248 | @include grid-column($push:$i, $collapse:null, $float:false); 249 | } 250 | .pull-#{$i} { 251 | @include grid-column($pull:$i, $collapse:null, $float:false); 252 | } 253 | } 254 | } 255 | @media #{$large-up} { 256 | @include grid-html-classes($size:large); 257 | @for $i from 0 through $total-columns - 1 { 258 | .push-#{$i} { 259 | @include grid-column($push:$i, $collapse:null, $float:false); 260 | } 261 | .pull-#{$i} { 262 | @include grid-column($pull:$i, $collapse:null, $float:false); 263 | } 264 | } 265 | } 266 | } 267 | @if $include-xl-html-grid-classes { 268 | @media #{$xlarge-up} { 269 | @include grid-html-classes($size:xlarge); 270 | } 271 | @media #{$xxlarge-up} { 272 | @include grid-html-classes($size:xxlarge); 273 | } 274 | } 275 | } 276 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_icon-bar.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | 8 | // @name 9 | // @dependencies _global.scss 10 | 11 | $include-html-icon-bar-classes: $include-html-classes !default; 12 | 13 | // @variables 14 | 15 | // We use these to style the icon-bar and items 16 | $icon-bar-bg: $oil !default; 17 | $icon-bar-font-color: $white !default; 18 | $icon-bar-font-size: 1rem !default; 19 | $icon-bar-hover-color: $primary-color !default; 20 | $icon-bar-icon-color: $white !default; 21 | $icon-bar-icon-size: 1.875rem !default; 22 | $icon-bar-image-width: 1.875rem !default; 23 | $icon-bar-image-height: 1.875rem !default; 24 | $icon-bar-active-color: $primary-color !default; 25 | $icon-bar-item-padding: 1.25rem !default; 26 | 27 | // 28 | // @mixins 29 | // 30 | 31 | // We use this mixin to create the base styles for our Icon bar element. 32 | // 33 | @mixin icon-bar-base() { 34 | 35 | width: 100%; 36 | font-size: 0; 37 | display: inline-block; 38 | 39 | & > * { 40 | text-align: center; 41 | font-size: $icon-bar-font-size; 42 | width: 25%; 43 | margin: 0 auto; 44 | display: block; 45 | padding: $icon-bar-item-padding; 46 | float: left; 47 | 48 | i, img { 49 | display: block; 50 | margin: 0 auto; 51 | 52 | & + label { 53 | margin-top: .0625rem; 54 | } 55 | } 56 | 57 | i { 58 | font-size: $icon-bar-icon-size; 59 | vertical-align: middle; 60 | } 61 | 62 | img { 63 | width: $icon-bar-image-width; 64 | height: $icon-bar-image-height; 65 | } 66 | } 67 | 68 | &.label-right > * { 69 | 70 | i, img { 71 | margin: 0 .0625rem 0 0; 72 | display: inline-block; 73 | 74 | & + label { 75 | margin-top: 0; 76 | } 77 | } 78 | 79 | label { display: inline-block; } 80 | } 81 | 82 | &.vertical.label-right > * { 83 | text-align: left; 84 | } 85 | 86 | &.vertical, &.small-vertical{ 87 | height: 100%; 88 | width: auto; 89 | 90 | .item { 91 | width: auto; 92 | margin: auto; 93 | float: none; 94 | } 95 | } 96 | 97 | &.medium-vertical { 98 | @media #{$medium-up} { 99 | height: 100%; 100 | width: auto; 101 | 102 | .item { 103 | width: auto; 104 | margin: auto; 105 | float: none; 106 | } 107 | } 108 | } 109 | &.large-vertical { 110 | @media #{$large-up} { 111 | height: 100%; 112 | width: auto; 113 | 114 | .item { 115 | width: auto; 116 | margin: auto; 117 | float: none; 118 | } 119 | } 120 | } 121 | } 122 | 123 | // We use this mixin to create the size styles for icon bars. 124 | @mixin icon-bar-size( 125 | $padding: $icon-bar-item-padding, 126 | $font-size: $icon-bar-font-size, 127 | $icon-size: $icon-bar-icon-size, 128 | $image-width: $icon-bar-image-width, 129 | $image-height: $icon-bar-image-height) { 130 | 131 | & > * { 132 | font-size: $font-size; 133 | padding: $padding; 134 | 135 | i, img { 136 | 137 | & + label { 138 | margin-top: .0625rem; 139 | } 140 | } 141 | 142 | i { 143 | font-size: $icon-size; 144 | } 145 | 146 | img { 147 | width: $image-width; 148 | height: $image-height; 149 | } 150 | } 151 | 152 | } 153 | 154 | @mixin icon-bar-style( 155 | $bar-bg:$icon-bar-bg, 156 | $bar-font-color:$icon-bar-font-color, 157 | $bar-hover-color:$icon-bar-hover-color, 158 | $bar-icon-color:$icon-bar-icon-color, 159 | $bar-active-color:$icon-bar-active-color, 160 | $base-style:true) { 161 | 162 | @if $base-style { 163 | 164 | background: $bar-bg; 165 | 166 | & > * { 167 | 168 | &:hover { background: $bar-hover-color; } 169 | 170 | label { color: $bar-font-color; } 171 | 172 | i { 173 | color: $bar-icon-color; 174 | } 175 | } 176 | } 177 | 178 | } 179 | 180 | // We use this to quickly create icon bars with a single mixin 181 | // $height - The overall calculated height of the icon bar (horizontal) 182 | // $bar-bg - the background color of the bar 183 | // $bar-font-color - the font color 184 | // $bar-hover-color - okay these are pretty obvious variables 185 | // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font 186 | // $bar-active-color - the color of an active / hover state 187 | // $base-style - Apply base styles? Default: true. 188 | 189 | @mixin icon-bar( 190 | $bar-bg:$icon-bar-bg, 191 | $bar-font-color:$icon-bar-font-color, 192 | $bar-hover-color:$icon-bar-hover-color, 193 | $bar-icon-color:$icon-bar-icon-color, 194 | $bar-active-color:$icon-bar-active-color, 195 | $padding: $icon-bar-item-padding, 196 | $font-size: $icon-bar-font-size, 197 | $icon-size: $icon-bar-icon-size, 198 | $image-width: $icon-bar-image-width, 199 | $image-height: $icon-bar-image-height, 200 | $base-style:true) { 201 | @include icon-bar-base(); 202 | @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height); 203 | @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style); 204 | } 205 | 206 | @include exports("icon-bar") { 207 | @if $include-html-icon-bar-classes { 208 | .icon-bar { 209 | @include icon-bar; 210 | } 211 | } 212 | } 213 | 214 | @if $include-html-icon-bar-classes { 215 | 216 | // toolbar styles 217 | 218 | .icon-bar { 219 | 220 | // Counts 221 | 222 | &.two-up { 223 | .item { width: 50%; } 224 | &.vertical .item, &.small-vertical .item { width: auto; } 225 | &.medium-vertical .item { 226 | @media #{$medium-up} { 227 | width: auto; 228 | } 229 | } 230 | &.large-vertical .item { 231 | @media #{$large-up} { 232 | width: auto; 233 | } 234 | } 235 | } 236 | &.three-up { 237 | .item { width: 33.3333%; } 238 | &.vertical .item, &.small-vertical .item { width: auto; } 239 | &.medium-vertical .item { 240 | @media #{$medium-up} { 241 | width: auto; 242 | } 243 | } 244 | &.large-vertical .item { 245 | @media #{$large-up} { 246 | width: auto; 247 | } 248 | } 249 | } 250 | &.four-up { 251 | .item { width: 25%; } 252 | &.vertical .item, &.small-vertical .item { width: auto; } 253 | &.medium-vertical .item { 254 | @media #{$medium-up} { 255 | width: auto; 256 | } 257 | } 258 | &.large-vertical .item { 259 | @media #{$large-up} { 260 | width: auto; 261 | } 262 | } 263 | } 264 | &.five-up { 265 | .item { width: 20%; } 266 | &.vertical .item, &.small-vertical .item { width: auto; } 267 | &.medium-vertical .item { 268 | @media #{$medium-up} { 269 | width: auto; 270 | } 271 | } 272 | &.large-vertical .item { 273 | @media #{$large-up} { 274 | width: auto; 275 | } 276 | } 277 | } 278 | &.six-up { 279 | .item { width: 16.66667%; } 280 | &.vertical .item, &.small-vertical .item { width: auto; } 281 | &.medium-vertical .item { 282 | @media #{$medium-up} { 283 | width: auto; 284 | } 285 | } 286 | &.large-vertical .item { 287 | @media #{$large-up} { 288 | width: auto; 289 | } 290 | } 291 | } 292 | } 293 | } 294 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_inline-lists.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-inline-list-classes: $include-html-classes !default; 11 | 12 | // We use this to control the margins and padding of the inline list. 13 | $inline-list-top-margin: 0 !default; 14 | $inline-list-opposite-margin: 0 !default; 15 | $inline-list-bottom-margin: rem-calc(17) !default; 16 | $inline-list-default-float-margin: rem-calc(-22) !default; 17 | $inline-list-default-float-list-margin: rem-calc(22) !default; 18 | 19 | $inline-list-padding: 0 !default; 20 | 21 | // We use this to control the overflow of the inline list. 22 | $inline-list-overflow: hidden !default; 23 | 24 | // We use this to control the list items 25 | $inline-list-display: block !default; 26 | 27 | // We use this to control any elements within list items 28 | $inline-list-children-display: block !default; 29 | 30 | // 31 | // @mixins 32 | // 33 | // We use this mixin to create inline lists 34 | @mixin inline-list { 35 | margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; 36 | margin-#{$default-float}: $inline-list-default-float-margin; 37 | margin-#{$opposite-direction}: $inline-list-opposite-margin; 38 | padding: $inline-list-padding; 39 | list-style: none; 40 | overflow: $inline-list-overflow; 41 | 42 | & > li { 43 | list-style: none; 44 | float: $default-float; 45 | margin-#{$default-float}: $inline-list-default-float-list-margin; 46 | display: $inline-list-display; 47 | &>* { display: $inline-list-children-display; } 48 | } 49 | } 50 | 51 | @include exports("inline-list") { 52 | @if $include-html-inline-list-classes { 53 | .inline-list { 54 | @include inline-list(); 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_joyride.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-joyride-classes: $include-html-classes !default; 11 | 12 | // Controlling default Joyride styles 13 | $joyride-tip-bg: $oil !default; 14 | $joyride-tip-default-width: 300px !default; 15 | $joyride-tip-padding: rem-calc(18 20 24) !default; 16 | $joyride-tip-border: solid 1px $charcoal !default; 17 | $joyride-tip-radius: 4px !default; 18 | $joyride-tip-position-offset: 22px !default; 19 | 20 | // Here, we're setting the tip font styles 21 | $joyride-tip-font-color: $white !default; 22 | $joyride-tip-font-size: rem-calc(14) !default; 23 | $joyride-tip-header-weight: $font-weight-bold !default; 24 | 25 | // This changes the nub size 26 | $joyride-tip-nub-size: 10px !default; 27 | 28 | // This adjusts the styles for the timer when its enabled 29 | $joyride-tip-timer-width: 50px !default; 30 | $joyride-tip-timer-height: 3px !default; 31 | $joyride-tip-timer-color: $steel !default; 32 | 33 | // This changes up the styles for the close button 34 | $joyride-tip-close-color: $monsoon !default; 35 | $joyride-tip-close-size: 24px !default; 36 | $joyride-tip-close-weight: $font-weight-normal !default; 37 | 38 | // When Joyride is filling the screen, we use this style for the bg 39 | $joyride-screenfill: rgba(0,0,0,0.5) !default; 40 | 41 | 42 | // We decided not to make a mixin for this because it relies on 43 | // predefined classes to work properly. 44 | @include exports("joyride") { 45 | @if $include-html-joyride-classes { 46 | 47 | /* Foundation Joyride */ 48 | .joyride-list { display: none; } 49 | 50 | /* Default styles for the container */ 51 | .joyride-tip-guide { 52 | display: none; 53 | position: absolute; 54 | background: $joyride-tip-bg; 55 | color: $joyride-tip-font-color; 56 | z-index: 101; 57 | top: 0; 58 | #{$default-float}: 2.5%; 59 | font-family: inherit; 60 | font-weight: $font-weight-normal; 61 | width: 95%; 62 | } 63 | 64 | .lt-ie9 .joyride-tip-guide { 65 | max-width:800px; 66 | #{$default-float}: 50%; 67 | margin-#{$default-float}:-400px; 68 | } 69 | 70 | .joyride-content-wrapper { 71 | width: 100%; 72 | 73 | padding: $joyride-tip-padding; 74 | 75 | .button { margin-bottom: 0 !important; } 76 | 77 | .joyride-prev-tip { margin-right: 10px; } 78 | } 79 | 80 | /* Add a little css triangle pip, older browser just miss out on the fanciness of it */ 81 | .joyride-tip-guide { 82 | .joyride-nub { 83 | display: block; 84 | position: absolute; 85 | #{$default-float}: $joyride-tip-position-offset; 86 | width: 0; 87 | height: 0; 88 | border: $joyride-tip-nub-size solid $joyride-tip-bg; 89 | 90 | &.top { 91 | border-top-style: solid; 92 | border-color: $joyride-tip-bg; 93 | border-top-color: transparent !important; 94 | border-#{$default-float}-color: transparent !important; 95 | border-#{$opposite-direction}-color: transparent !important; 96 | top: -($joyride-tip-nub-size*2); 97 | } 98 | &.bottom { 99 | border-bottom-style: solid; 100 | border-color: $joyride-tip-bg !important; 101 | border-bottom-color: transparent !important; 102 | border-#{$default-float}-color: transparent !important; 103 | border-#{$opposite-direction}-color: transparent !important; 104 | bottom: -($joyride-tip-nub-size*2); 105 | } 106 | 107 | &.right { right: -($joyride-tip-nub-size*2); } 108 | &.left { left: -($joyride-tip-nub-size*2); } 109 | } 110 | } 111 | 112 | /* Typography */ 113 | .joyride-tip-guide h1, 114 | .joyride-tip-guide h2, 115 | .joyride-tip-guide h3, 116 | .joyride-tip-guide h4, 117 | .joyride-tip-guide h5, 118 | .joyride-tip-guide h6 { 119 | line-height: 1.25; 120 | margin: 0; 121 | font-weight: $joyride-tip-header-weight; 122 | color: $joyride-tip-font-color; 123 | } 124 | .joyride-tip-guide p { 125 | margin: rem-calc(0 0 18 0); 126 | font-size: $joyride-tip-font-size; 127 | line-height: 1.3; 128 | } 129 | 130 | .joyride-timer-indicator-wrap { 131 | width: $joyride-tip-timer-width; 132 | height: $joyride-tip-timer-height; 133 | border: $joyride-tip-border; 134 | position: absolute; 135 | #{$opposite-direction}: rem-calc(17); 136 | bottom: rem-calc(16); 137 | } 138 | .joyride-timer-indicator { 139 | display: block; 140 | width: 0; 141 | height: inherit; 142 | background: $joyride-tip-timer-color; 143 | } 144 | 145 | .joyride-close-tip { 146 | position: absolute; 147 | #{$opposite-direction}: 12px; 148 | top: 10px; 149 | color: $joyride-tip-close-color !important; 150 | text-decoration: none; 151 | font-size: $joyride-tip-close-size; 152 | font-weight: $joyride-tip-close-weight; 153 | line-height: .5 !important; 154 | 155 | &:hover, 156 | &:focus { color: $smoke !important; } 157 | } 158 | 159 | .joyride-modal-bg { 160 | position: fixed; 161 | height: 100%; 162 | width: 100%; 163 | background: transparent; 164 | background: $joyride-screenfill; 165 | z-index: 100; 166 | display: none; 167 | top: 0; 168 | #{$default-float}: 0; 169 | cursor: $cursor-pointer-value; 170 | } 171 | 172 | .joyride-expose-wrapper { 173 | background-color: $white; 174 | position: absolute; 175 | border-radius: 3px; 176 | z-index: 102; 177 | box-shadow: 0 0 15px $white; 178 | } 179 | 180 | .joyride-expose-cover { 181 | background: transparent; 182 | border-radius: 3px; 183 | position: absolute; 184 | z-index: 9999; 185 | top: 0; 186 | left: 0; 187 | } 188 | 189 | 190 | /* Styles for screens that are at least 768px; */ 191 | @media #{$small} { 192 | .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit; 193 | .joyride-nub { 194 | &.bottom { 195 | border-color: $joyride-tip-bg !important; 196 | border-bottom-color: transparent !important; 197 | border-#{$default-float}-color: transparent !important; 198 | border-#{$opposite-direction}-color: transparent !important; 199 | bottom: -($joyride-tip-nub-size*2); 200 | } 201 | &.right { 202 | border-color: $joyride-tip-bg !important; 203 | border-top-color: transparent !important; 204 | border-right-color: transparent !important; border-bottom-color: transparent !important; 205 | top: $joyride-tip-position-offset; 206 | left: auto; 207 | right: -($joyride-tip-nub-size*2); 208 | } 209 | &.left { 210 | border-color: $joyride-tip-bg !important; 211 | border-top-color: transparent !important; 212 | border-left-color: transparent !important; 213 | border-bottom-color: transparent !important; 214 | top: $joyride-tip-position-offset; 215 | left: -($joyride-tip-nub-size*2); 216 | right: auto; 217 | } 218 | } 219 | } 220 | } 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_keystrokes.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-keystroke-classes: $include-html-classes !default; 11 | 12 | // We use these to control text styles. 13 | $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default; 14 | $keystroke-font-size: inherit !default; 15 | $keystroke-font-color: $jet !default; 16 | $keystroke-font-color-alt: $white !default; 17 | $keystroke-function-factor: -7% !default; 18 | 19 | // We use this to control keystroke padding. 20 | $keystroke-padding: rem-calc(2 4 0) !default; 21 | 22 | // We use these to control background and border styles. 23 | $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default; 24 | $keystroke-border-style: solid !default; 25 | $keystroke-border-width: 1px !default; 26 | $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default; 27 | $keystroke-radius: $global-radius !default; 28 | 29 | // 30 | // @mixins 31 | // 32 | // We use this mixin to create keystroke styles. 33 | // $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default; 34 | @mixin keystroke($bg:$keystroke-bg) { 35 | // This find the lightness percentage of the background color. 36 | $bg-lightness: lightness($bg); 37 | 38 | background-color: $bg; 39 | border-color: scale-color($bg, $lightness: $keystroke-function-factor); 40 | 41 | // We adjust the font color based on the brightness of the background. 42 | @if $bg-lightness > 70% { color: $keystroke-font-color; } 43 | @else { color: $keystroke-font-color-alt; } 44 | 45 | border-style: $keystroke-border-style; 46 | border-width: $keystroke-border-width; 47 | margin: 0; 48 | font-family: $keystroke-font; 49 | font-size: $keystroke-font-size; 50 | padding: $keystroke-padding; 51 | } 52 | 53 | @include exports("keystroke") { 54 | @if $include-html-keystroke-classes { 55 | .keystroke, 56 | kbd { 57 | @include keystroke; 58 | @include radius($keystroke-radius); 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_labels.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-label-classes: $include-html-classes !default; 11 | 12 | // We use these to style the labels 13 | $label-padding: rem-calc(4 8 4) !default; 14 | $label-radius: $global-radius !default; 15 | 16 | // We use these to style the label text 17 | $label-font-sizing: rem-calc(11) !default; 18 | $label-font-weight: $font-weight-normal !default; 19 | $label-font-color: $oil !default; 20 | $label-font-color-alt: $white !default; 21 | $label-font-family: $body-font-family !default; 22 | 23 | // 24 | // @mixins 25 | // 26 | // We use this mixin to create a default label base. 27 | @mixin label-base { 28 | font-weight: $label-font-weight; 29 | font-family: $label-font-family; 30 | text-align: center; 31 | text-decoration: none; 32 | line-height: 1; 33 | white-space: nowrap; 34 | display: inline-block; 35 | position: relative; 36 | margin-bottom: inherit; 37 | } 38 | 39 | // @mixins 40 | // 41 | // We use this mixin to add label size styles. 42 | // $padding - Used to determine label padding. Default: $label-padding || rem-calc(3 10 4) !default 43 | // $text-size - Used to determine label text-size. Default: $text-size found in settings 44 | @mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) { 45 | @if $padding { padding: $padding; } 46 | @if $text-size { font-size: $text-size; } 47 | } 48 | 49 | // @mixins 50 | // 51 | // We use this mixin to add label styles. 52 | // $bg - Default: $primary-color (found in settings file) 53 | // $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file) 54 | @mixin label-style($bg:$primary-color, $radius:false) { 55 | 56 | // We control which background color comes through 57 | @if $bg { 58 | 59 | // This find the lightness percentage of the background color. 60 | $bg-lightness: lightness($bg); 61 | 62 | background-color: $bg; 63 | 64 | // We control the text color for you based on the background color. 65 | @if $bg-lightness < 70% { color: $label-font-color-alt; } 66 | @else { color: $label-font-color; } 67 | } 68 | 69 | // We use this to control the radius on labels. 70 | @if $radius == true { @include radius($label-radius); } 71 | @else if $radius { @include radius($radius); } 72 | 73 | } 74 | 75 | // @mixins 76 | // 77 | // We use this to add close buttons to alerts 78 | // $padding - Default: $label-padding, 79 | // $text-size - Default: $label-font-sizing, 80 | // $bg - Default: $primary-color(found in settings file) 81 | // $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file) 82 | @mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) { 83 | 84 | @include label-base; 85 | @include label-size($padding, $text-size); 86 | @include label-style($bg, $radius); 87 | } 88 | 89 | @include exports("label") { 90 | @if $include-html-label-classes { 91 | .label { 92 | @include label-base; 93 | @include label-size; 94 | @include label-style; 95 | 96 | &.radius { @include label-style(false, true); } 97 | &.round { @include label-style(false, $radius:1000px); } 98 | 99 | &.alert { @include label-style($alert-color); } 100 | &.warning { @include label-style($warning-color); } 101 | &.success { @include label-style($success-color); } 102 | &.secondary { @include label-style($secondary-color); } 103 | &.info { @include label-style($info-color); } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_magellan.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-magellan-classes: $include-html-classes !default; 11 | 12 | $magellan-bg: $white !default; 13 | $magellan-padding: 10px !default; 14 | 15 | @include exports("magellan") { 16 | @if $include-html-magellan-classes { 17 | 18 | #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} { 19 | background: $magellan-bg; 20 | z-index: 50; 21 | min-width: 100%; 22 | padding: $magellan-padding; 23 | 24 | .sub-nav { 25 | margin-bottom: 0; 26 | dd { margin-bottom: 0; } 27 | a { 28 | line-height: 1.8em; 29 | } 30 | } 31 | } 32 | 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-pagination-classes: $include-html-classes !default; 11 | 12 | // We use these to control the pagination container 13 | $pagination-height: rem-calc(24) !default; 14 | $pagination-margin: rem-calc(-5) !default; 15 | 16 | // We use these to set the list-item properties 17 | $pagination-li-float: $default-float !default; 18 | $pagination-li-height: rem-calc(24) !default; 19 | $pagination-li-font-color: $jet !default; 20 | $pagination-li-font-size: rem-calc(14) !default; 21 | $pagination-li-margin: rem-calc(5) !default; 22 | 23 | // We use these for the pagination anchor links 24 | $pagination-link-pad: rem-calc(1 10 1) !default; 25 | $pagination-link-font-color: $aluminum !default; 26 | $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default; 27 | 28 | // We use these for disabled anchor links 29 | $pagination-link-unavailable-cursor: default !default; 30 | $pagination-link-unavailable-font-color: $aluminum !default; 31 | $pagination-link-unavailable-bg-active: transparent !default; 32 | 33 | // We use these for currently selected anchor links 34 | $pagination-link-current-background: $primary-color !default; 35 | $pagination-link-current-font-color: $white !default; 36 | $pagination-link-current-font-weight: $font-weight-bold !default; 37 | $pagination-link-current-cursor: default !default; 38 | $pagination-link-current-active-bg: $primary-color !default; 39 | 40 | // @mixins 41 | // 42 | // Style the pagination container. Currently only used when centering elements. 43 | // $center - Default: false, Options: true 44 | @mixin pagination-container($center:false) { 45 | @if $center { text-align: center; } 46 | } 47 | 48 | // @mixins 49 | // Style unavailable list items 50 | @mixin pagination-unavailable-item { 51 | a, button { 52 | cursor: $pagination-link-unavailable-cursor; 53 | color: $pagination-link-unavailable-font-color; 54 | } 55 | &:hover a, 56 | & a:focus, 57 | 58 | &:hover button, 59 | & button:focus 60 | { background: $pagination-link-unavailable-bg-active; } 61 | } 62 | // @mixins 63 | // Style the current list item. Do not assume that the current item has 64 | // an anchor element. 65 | // $has-anchor - Default: true, Options: false 66 | @mixin pagination-current-item($has-anchor: true) { 67 | @if $has-anchor { 68 | a, button { 69 | background: $pagination-link-current-background; 70 | color: $pagination-link-current-font-color; 71 | font-weight: $pagination-link-current-font-weight; 72 | cursor: $pagination-link-current-cursor; 73 | 74 | &:hover, 75 | &:focus { background: $pagination-link-current-active-bg; } 76 | } 77 | } @else { 78 | height: auto; 79 | padding: $pagination-link-pad; 80 | background: $pagination-link-current-background; 81 | color: $pagination-link-current-font-color; 82 | font-weight: $pagination-link-current-font-weight; 83 | cursor: $pagination-link-current-cursor; 84 | @include radius; 85 | 86 | &:hover, 87 | &:focus { background: $pagination-link-current-active-bg; } 88 | } 89 | } 90 | 91 | // @mixins 92 | // 93 | // We use this mixin to set the properties for the creating Foundation pagination 94 | // $center - Left or center align the li elements. Default: false 95 | // $base-style - Sets base styles for pagination. Default: true, Options: false 96 | // $use-default-classes - Makes unavailable & current classes available for use. Default: true 97 | @mixin pagination($center:false, $base-style:true, $use-default-classes:true) { 98 | 99 | @if $base-style { 100 | display: block; 101 | min-height: $pagination-height; 102 | margin-#{$default-float}: $pagination-margin; 103 | 104 | li { 105 | height: $pagination-li-height; 106 | color: $pagination-li-font-color; 107 | font-size: $pagination-li-font-size; 108 | margin-#{$default-float}: $pagination-li-margin; 109 | 110 | a, button { 111 | display: block; 112 | padding: $pagination-link-pad; 113 | color: $pagination-link-font-color; 114 | background: none; 115 | @include radius; 116 | font-weight: normal; 117 | font-size: 1em; 118 | line-height: inherit; 119 | @include single-transition(background-color); 120 | } 121 | 122 | &:hover a, 123 | a:focus, 124 | &:hover button, 125 | button:focus 126 | { background: $pagination-link-active-bg; } 127 | 128 | @if $use-default-classes { 129 | &.unavailable { @include pagination-unavailable-item(); } 130 | &.current { @include pagination-current-item(); } 131 | } 132 | } 133 | } 134 | 135 | // Left or center align the li elements 136 | li { 137 | @if $center { 138 | float: none; 139 | display: inline-block; 140 | } @else { 141 | float: $pagination-li-float; 142 | display: block; 143 | } 144 | } 145 | } 146 | 147 | @include exports("pagination") { 148 | @if $include-pagination-classes { 149 | ul.pagination { 150 | @include pagination; 151 | } 152 | 153 | /* Pagination centred wrapper */ 154 | .pagination-centered { 155 | @include pagination-container(true); 156 | 157 | ul.pagination { 158 | @include pagination(true, false); 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_panels.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-panel-classes: $include-html-classes !default; 11 | 12 | // We use these to control the background and border styles 13 | $panel-bg: scale-color($white, $lightness: -5%) !default; 14 | $panel-border-style: solid !default; 15 | $panel-border-size: 1px !default; 16 | 17 | // We use this % to control how much we darken things on hover 18 | $panel-function-factor: -11% !default; 19 | $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default; 20 | 21 | // We use these to set default inner padding and bottom margin 22 | $panel-margin-bottom: rem-calc(20) !default; 23 | $panel-padding: rem-calc(20) !default; 24 | 25 | // We use these to set default font colors 26 | $panel-font-color: $oil !default; 27 | $panel-font-color-alt: $white !default; 28 | 29 | $panel-header-adjust: true !default; 30 | $callout-panel-link-color: $primary-color !default; 31 | // 32 | // @mixins 33 | // 34 | // We use this mixin to create panels. 35 | // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default 36 | // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20) 37 | // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true 38 | @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) { 39 | 40 | @if $bg { 41 | $bg-lightness: lightness($bg); 42 | 43 | border-style: $panel-border-style; 44 | border-width: $panel-border-size; 45 | border-color: scale-color($bg, $lightness: $panel-function-factor); 46 | margin-bottom: $panel-margin-bottom; 47 | padding: $padding; 48 | 49 | background: $bg; 50 | @if $bg-lightness >= 50% { color: $panel-font-color; } 51 | @else { color: $panel-font-color-alt; } 52 | 53 | // Respect the padding, fool. 54 | &>:first-child { margin-top: 0; } 55 | &>:last-child { margin-bottom: 0; } 56 | 57 | @if $adjust { 58 | // We set the font color based on the darkness of the bg. 59 | @if $bg-lightness >= 50% { 60 | h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; } 61 | } 62 | @else { 63 | h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; } 64 | } 65 | 66 | // reset header line-heights for panels 67 | h1,h2,h3,h4,h5,h6 { 68 | line-height: 1; margin-bottom: rem-calc(20) / 2; 69 | &.subheader { line-height: 1.4; } 70 | } 71 | } 72 | } 73 | } 74 | 75 | @include exports("panel") { 76 | @if $include-html-panel-classes { 77 | 78 | /* Panels */ 79 | .panel { @include panel; 80 | 81 | &.callout { 82 | @include panel(scale-color($primary-color, $lightness: 94%)); 83 | a:not(.button) { 84 | color: $callout-panel-link-color; 85 | } 86 | } 87 | 88 | &.radius { 89 | @include radius; 90 | } 91 | 92 | } 93 | 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_pricing-tables.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-pricing-classes: $include-html-classes !default; 11 | 12 | // We use this to control the border color 13 | $price-table-border: solid 1px $gainsboro !default; 14 | 15 | // We use this to control the bottom margin of the pricing table 16 | $price-table-margin-bottom: rem-calc(20) !default; 17 | 18 | // We use these to control the title styles 19 | $price-title-bg: $oil !default; 20 | $price-title-padding: rem-calc(15 20) !default; 21 | $price-title-align: center !default; 22 | $price-title-color: $smoke !default; 23 | $price-title-weight: $font-weight-normal !default; 24 | $price-title-size: rem-calc(16) !default; 25 | $price-title-font-family: $body-font-family !default; 26 | 27 | // We use these to control the price styles 28 | $price-money-bg: $vapor !default; 29 | $price-money-padding: rem-calc(15 20) !default; 30 | $price-money-align: center !default; 31 | $price-money-color: $oil !default; 32 | $price-money-weight: $font-weight-normal !default; 33 | $price-money-size: rem-calc(32) !default; 34 | $price-money-font-family: $body-font-family !default; 35 | 36 | 37 | // We use these to control the description styles 38 | $price-bg: $white !default; 39 | $price-desc-color: $monsoon !default; 40 | $price-desc-padding: rem-calc(15) !default; 41 | $price-desc-align: center !default; 42 | $price-desc-font-size: rem-calc(12) !default; 43 | $price-desc-weight: $font-weight-normal !default; 44 | $price-desc-line-height: 1.4 !default; 45 | $price-desc-bottom-border: dotted 1px $gainsboro !default; 46 | 47 | // We use these to control the list item styles 48 | $price-item-color: $oil !default; 49 | $price-item-padding: rem-calc(15) !default; 50 | $price-item-align: center !default; 51 | $price-item-font-size: rem-calc(14) !default; 52 | $price-item-weight: $font-weight-normal !default; 53 | $price-item-bottom-border: dotted 1px $gainsboro !default; 54 | 55 | // We use these to control the CTA area styles 56 | $price-cta-bg: $white !default; 57 | $price-cta-align: center !default; 58 | $price-cta-padding: rem-calc(20 20 0) !default; 59 | 60 | // @mixins 61 | // 62 | // We use this to create the container element for the pricing tables 63 | @mixin pricing-table-container { 64 | border: $price-table-border; 65 | margin-#{$default-float}: 0; 66 | margin-bottom: $price-table-margin-bottom; 67 | 68 | & * { 69 | list-style: none; 70 | line-height: 1; 71 | } 72 | } 73 | // @mixins 74 | // 75 | // We use this mixin to create the pricing table title styles 76 | @mixin pricing-table-title { 77 | background-color: $price-title-bg; 78 | padding: $price-title-padding; 79 | text-align: $price-title-align; 80 | color: $price-title-color; 81 | font-weight: $price-title-weight; 82 | font-size: $price-title-size; 83 | font-family: $price-title-font-family; 84 | } 85 | 86 | // @mixins 87 | // 88 | // We use this mixin to control the pricing table price styles 89 | @mixin pricing-table-price { 90 | background-color: $price-money-bg; 91 | padding: $price-money-padding; 92 | text-align: $price-money-align; 93 | color: $price-money-color; 94 | font-weight: $price-money-weight; 95 | font-size: $price-money-size; 96 | font-family: $price-money-font-family; 97 | } 98 | 99 | // @mixins 100 | // 101 | // We use this mixin to create the description styles for the pricing table 102 | @mixin pricing-table-description { 103 | background-color: $price-bg; 104 | padding: $price-desc-padding; 105 | text-align: $price-desc-align; 106 | color: $price-desc-color; 107 | font-size: $price-desc-font-size; 108 | font-weight: $price-desc-weight; 109 | line-height: $price-desc-line-height; 110 | border-bottom: $price-desc-bottom-border; 111 | } 112 | 113 | // @mixins 114 | // 115 | // We use this mixin to style the bullet items in the pricing table 116 | @mixin pricing-table-bullet { 117 | background-color: $price-bg; 118 | padding: $price-item-padding; 119 | text-align: $price-item-align; 120 | color: $price-item-color; 121 | font-size: $price-item-font-size; 122 | font-weight: $price-item-weight; 123 | border-bottom: $price-item-bottom-border; 124 | } 125 | 126 | // @mixins 127 | // 128 | // We use this mixin to style the CTA area of the pricing tables 129 | @mixin pricing-table-cta { 130 | background-color: $price-cta-bg; 131 | text-align: $price-cta-align; 132 | padding: $price-cta-padding; 133 | } 134 | 135 | @include exports("pricing-table") { 136 | @if $include-html-pricing-classes { 137 | 138 | /* Pricing Tables */ 139 | .pricing-table { 140 | @include pricing-table-container; 141 | 142 | .title { @include pricing-table-title; } 143 | .price { @include pricing-table-price; } 144 | .description { @include pricing-table-description; } 145 | .bullet-item { @include pricing-table-bullet; } 146 | .cta-button { @include pricing-table-cta; } 147 | } 148 | 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-media-classes: $include-html-classes !default; 11 | 12 | // We use this to set the progress bar height 13 | $progress-bar-height: rem-calc(25) !default; 14 | $progress-bar-color: $vapor !default; 15 | 16 | // We use these to control the border styles 17 | $progress-bar-border-color: scale-color($white, $lightness: 20%) !default; 18 | $progress-bar-border-size: 1px !default; 19 | $progress-bar-border-style: solid !default; 20 | $progress-bar-border-radius: $global-radius !default; 21 | 22 | // We use these to control the margin & padding 23 | $progress-bar-pad: rem-calc(2) !default; 24 | $progress-bar-margin-bottom: rem-calc(10) !default; 25 | 26 | // We use these to set the meter colors 27 | $progress-meter-color: $primary-color !default; 28 | $progress-meter-secondary-color: $secondary-color !default; 29 | $progress-meter-success-color: $success-color !default; 30 | $progress-meter-alert-color: $alert-color !default; 31 | 32 | // @mixins 33 | // 34 | // We use this to set up the progress bar container 35 | @mixin progress-container { 36 | background-color: $progress-bar-color; 37 | height: $progress-bar-height; 38 | border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color; 39 | padding: $progress-bar-pad; 40 | margin-bottom: $progress-bar-margin-bottom; 41 | } 42 | 43 | // @mixins 44 | // 45 | // $bg - Default: $progress-meter-color || $primary-color 46 | @mixin progress-meter($bg:$progress-meter-color) { 47 | background: $bg; 48 | height: 100%; 49 | display: block; 50 | } 51 | 52 | 53 | @include exports("progress-bar") { 54 | @if $include-html-media-classes { 55 | 56 | /* Progress Bar */ 57 | .progress { 58 | @include progress-container; 59 | 60 | // Meter 61 | .meter { 62 | @include progress-meter; 63 | } 64 | &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); } 65 | &.success .meter { @include progress-meter($bg:$progress-meter-success-color); } 66 | &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); } 67 | 68 | &.radius { @include radius($progress-bar-border-radius); 69 | .meter { @include radius($progress-bar-border-radius - 1); } 70 | } 71 | 72 | &.round { @include radius(1000px); 73 | .meter { @include radius(999px); } 74 | } 75 | 76 | } 77 | 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_range-slider.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @name _range-slider.scss 9 | // @dependencies _global.scss 10 | // 11 | 12 | // 13 | // @variables 14 | // 15 | 16 | $include-html-range-slider-classes: $include-html-classes !default; 17 | 18 | // These variabels define the slider bar styles 19 | $range-slider-bar-width: 100% !default; 20 | $range-slider-bar-height: rem-calc(16) !default; 21 | 22 | $range-slider-bar-border-width: 1px !default; 23 | $range-slider-bar-border-style: solid !default; 24 | $range-slider-bar-border-color: $gainsboro !default; 25 | $range-slider-radius: $global-radius !default; 26 | $range-slider-round: $global-rounded !default; 27 | $range-slider-bar-bg-color: $ghost !default; 28 | $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default; 29 | 30 | // Vertical bar styles 31 | $range-slider-vertical-bar-width: rem-calc(16) !default; 32 | $range-slider-vertical-bar-height: rem-calc(200) !default; 33 | 34 | // These variabels define the slider handle styles 35 | $range-slider-handle-width: rem-calc(32) !default; 36 | $range-slider-handle-height: rem-calc(22) !default; 37 | $range-slider-handle-position-top: rem-calc(-5) !default; 38 | $range-slider-handle-bg-color: $primary-color !default; 39 | $range-slider-handle-border-width: 1px !default; 40 | $range-slider-handle-border-style: solid !default; 41 | $range-slider-handle-border-color: none !default; 42 | $range-slider-handle-radius: $global-radius !default; 43 | $range-slider-handle-round: $global-rounded !default; 44 | $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default; 45 | $range-slider-handle-cursor: pointer !default; 46 | 47 | $range-slider-disabled-opacity: 0.7 !default; 48 | 49 | // 50 | // @mixins 51 | // 52 | 53 | @mixin range-slider-bar-base($vertical: false) { 54 | display: block; 55 | position: relative; 56 | width: $range-slider-bar-width; 57 | height: $range-slider-bar-height; 58 | border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color; 59 | margin: rem-calc(20 0); 60 | -ms-touch-action: none; 61 | touch-action: none; 62 | @if $vertical == true { 63 | display: inline-block; 64 | width: $range-slider-vertical-bar-width; 65 | height: $range-slider-vertical-bar-height; 66 | } 67 | } 68 | @mixin range-slider-bar-style( 69 | $bg: true, 70 | $radius: false, 71 | $round: false, 72 | $disabled: false) { 73 | @if $bg == true { background: $range-slider-bar-bg-color; } 74 | @if $radius == true { @include radius($range-slider-radius); } 75 | @if $round == true { @include radius($range-slider-round); } 76 | @if $disabled == true { 77 | cursor: $cursor-default-value; 78 | opacity: $range-slider-disabled-opacity; 79 | } 80 | } 81 | 82 | @mixin range-slider-bar( 83 | $bg: $range-slider-bar-bg-color, 84 | $radius:false) { 85 | @include range-slider-bar-base; 86 | @include range-slider-bar-style; 87 | } 88 | 89 | @mixin range-slider-handle-base() { 90 | display: inline-block; 91 | position: absolute; 92 | z-index: 1; 93 | top: $range-slider-handle-position-top; 94 | width: $range-slider-handle-width; 95 | height: $range-slider-handle-height; 96 | border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color; 97 | cursor: $range-slider-handle-cursor; 98 | 99 | // This removes the 300ms touch delay on Windows 8 100 | -ms-touch-action: manipulation; 101 | touch-action: manipulation; 102 | } 103 | @mixin range-slider-handle-style( 104 | $bg: true, 105 | $radius: false, 106 | $round: false, 107 | $disabled: false) { 108 | @if $bg == true { background: $range-slider-handle-bg-color; } 109 | @if $radius == true { @include radius($range-slider-radius); } 110 | @if $round == true { @include radius($range-slider-round); } 111 | @if $disabled == true { 112 | cursor: $cursor-default-value; 113 | opacity: $range-slider-disabled-opacity; 114 | } 115 | &:hover { 116 | background: $range-slider-handle-bg-hover-color; 117 | } 118 | } 119 | @mixin range-slider-handle() { 120 | @include range-slider-handle-base; 121 | @include range-slider-handle-style; 122 | } 123 | 124 | // CSS Generation 125 | @include exports("range-slider-bar") { 126 | @if $include-html-range-slider-classes { 127 | .range-slider { 128 | @include range-slider-bar-base; 129 | @include range-slider-bar-style($bg:true, $radius:false); 130 | &.vertical-range { 131 | @include range-slider-bar-base($vertical: true); 132 | .range-slider-handle { 133 | margin-top: 0; 134 | margin-#{$default-float}: -($range-slider-handle-width / 4); 135 | position: absolute; 136 | bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width); 137 | } 138 | .range-slider-active-segment { 139 | width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); 140 | height: auto; 141 | bottom: 0; 142 | } 143 | } 144 | &.radius { 145 | @include range-slider-bar-style($radius:true); 146 | .range-slider-handle { @include range-slider-handle-style($radius: true); } 147 | } 148 | &.round { 149 | @include range-slider-bar-style($round:true); 150 | .range-slider-handle { @include range-slider-handle-style($round: true); } 151 | } 152 | &.disabled, &[disabled] { 153 | @include range-slider-bar-style($disabled:true); 154 | .range-slider-handle { @include range-slider-handle-style($disabled: true); } 155 | } 156 | } 157 | .range-slider-active-segment { 158 | display: inline-block; 159 | position: absolute; 160 | height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); 161 | background: $range-slider-active-segment-bg-color; 162 | } 163 | .range-slider-handle { 164 | @include range-slider-handle-base; 165 | @include range-slider-handle-style($bg:true, $radius: false); 166 | } 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_reveal.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | @import "grid"; 7 | 8 | // 9 | // @name _reveal.scss 10 | // @dependencies _global.scss 11 | // 12 | 13 | $include-html-reveal-classes: $include-html-classes !default; 14 | 15 | // We use these to control the style of the reveal overlay. 16 | $reveal-overlay-bg: rgba($black, .45) !default; 17 | $reveal-overlay-bg-old: $black !default; 18 | 19 | // We use these to control the style of the modal itself. 20 | $reveal-modal-bg: $white !default; 21 | $reveal-position-top: rem-calc(100) !default; 22 | $reveal-default-width: 80% !default; 23 | $reveal-max-width: $row-width !default; 24 | $reveal-modal-padding: rem-calc(20) !default; 25 | $reveal-box-shadow: 0 0 10px rgba($black,.4) !default; 26 | 27 | // We use these to style the reveal close button 28 | $reveal-close-font-size: rem-calc(40) !default; 29 | $reveal-close-top: rem-calc(8) !default; 30 | $reveal-close-side: rem-calc(11) !default; 31 | $reveal-close-color: $base !default; 32 | $reveal-close-weight: $font-weight-bold !default; 33 | 34 | // We use this to set the default radius used throughout the core. 35 | $reveal-radius: $global-radius !default; 36 | $reveal-round: $global-rounded !default; 37 | 38 | // We use these to control the modal border 39 | $reveal-border-style: solid !default; 40 | $reveal-border-width: 1px !default; 41 | $reveal-border-color: $steel !default; 42 | 43 | $reveal-modal-class: "reveal-modal" !default; 44 | $close-reveal-modal-class: "close-reveal-modal" !default; 45 | 46 | // 47 | // @mixins 48 | // 49 | 50 | // We use this to create the reveal background overlay styles 51 | @mixin reveal-bg( $include-z-index-value: true ) { 52 | position: fixed; 53 | top: 0; 54 | bottom: 0; 55 | left: 0; 56 | right: 0; 57 | background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. 58 | background: $reveal-overlay-bg; 59 | z-index: if( $include-z-index-value, 1004, auto ); 60 | display: none; 61 | #{$default-float}: 0; 62 | } 63 | 64 | // We use this mixin to create the structure of a reveal modal 65 | // 66 | // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false 67 | // $width - Sets reveal width Default: $reveal-default-width || 80% 68 | // 69 | @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) { 70 | @if $base-style { 71 | visibility: hidden; 72 | display: none; 73 | position: absolute; 74 | z-index: 1005; 75 | width: 100vw; 76 | top:0; 77 | border-radius: $border-radius; 78 | #{$default-float}: 0; 79 | 80 | @media #{$small-only} { 81 | min-height:100vh; 82 | } 83 | 84 | // Make sure rows don't have a min-width on them 85 | .column, .columns { min-width: 0; } 86 | 87 | // Get rid of margin from first and last element inside modal 88 | & > :first-child { margin-top: 0; } 89 | 90 | & > :last-child { margin-bottom: 0; } 91 | } 92 | 93 | @if $width { 94 | @media #{$medium-up} { 95 | width: $width; 96 | max-width: $max-width; 97 | left: 0; 98 | right: 0; 99 | margin: 0 auto; 100 | } 101 | } 102 | } 103 | 104 | // We use this to style the reveal modal defaults 105 | // 106 | // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white 107 | // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding. 108 | // $border - Choose whether reveal uses a border. Default: true, Options: false 109 | // $border-style - Set reveal border style. Default: $reveal-border-style || solid 110 | // $border-width - Width of border (i.e. 1px). Default: $reveal-border-width. 111 | // $border-color - Color of border. Default: $reveal-border-color. 112 | // $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false 113 | // $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false 114 | // $top-offset - Default: $reveal-position-top || 50px 115 | @mixin reveal-modal-style( 116 | $bg:false, 117 | $padding:false, 118 | $border:false, 119 | $border-style:$reveal-border-style, 120 | $border-width:$reveal-border-width, 121 | $border-color:$reveal-border-color, 122 | $box-shadow:false, 123 | $radius:false, 124 | $top-offset:false) { 125 | 126 | @if $bg { background-color: $bg; } 127 | @if $padding != false { padding: $padding; } 128 | 129 | @if $border { border: $border-style $border-width $border-color; } 130 | 131 | // We can choose whether or not to include the default box-shadow. 132 | @if $box-shadow { 133 | box-shadow: $reveal-box-shadow; 134 | } 135 | 136 | // We can control how much radius is used on the modal 137 | @if $radius == true { @include radius($reveal-radius); } 138 | @else if $radius { @include radius($radius); } 139 | 140 | @if $top-offset { 141 | @media #{$medium-up} { 142 | top: $top-offset; 143 | } 144 | } 145 | } 146 | 147 | // We use this to create a close button for the reveal modal 148 | // 149 | // $color - Default: $reveal-close-color || $base 150 | @mixin reveal-close($color:$reveal-close-color) { 151 | font-size: $reveal-close-font-size; 152 | line-height: 1; 153 | position: absolute; 154 | top: $reveal-close-top; 155 | #{$opposite-direction}: $reveal-close-side; 156 | color: $color; 157 | font-weight: $reveal-close-weight; 158 | cursor: $cursor-pointer-value; 159 | } 160 | 161 | @include exports("reveal") { 162 | @if $include-html-reveal-classes { 163 | 164 | // Reveal Modals 165 | .reveal-modal-bg { @include reveal-bg; } 166 | 167 | .#{$reveal-modal-class} { 168 | @include reveal-modal-base; 169 | @include reveal-modal-style( 170 | $bg:$reveal-modal-bg, 171 | $padding:$reveal-modal-padding, 172 | $border:true, 173 | $box-shadow:true, 174 | $radius:false, 175 | $top-offset:$reveal-position-top 176 | ); 177 | @include reveal-modal-style($padding:$reveal-modal-padding * 1.5); 178 | 179 | &.radius { @include reveal-modal-style($radius:true); } 180 | &.round { @include reveal-modal-style($radius:$reveal-round); } 181 | &.collapse { @include reveal-modal-style($padding:0); } 182 | &.tiny { @include reveal-modal-base(false, 30%); } 183 | &.small { @include reveal-modal-base(false, 40%); } 184 | &.medium { @include reveal-modal-base(false, 60%); } 185 | &.large { @include reveal-modal-base(false, 70%); } 186 | &.xlarge { @include reveal-modal-base(false, 95%); } 187 | &.full { 188 | @include reveal-modal-base(false, 100vw); 189 | top:0; 190 | left:0; 191 | height:100%; 192 | height: 100vh; 193 | min-height:100vh; 194 | max-width: none !important; 195 | margin-left: 0 !important; 196 | } 197 | 198 | .#{$close-reveal-modal-class} { @include reveal-close; } 199 | } 200 | 201 | dialog { 202 | @extend .#{$reveal-modal-class}; 203 | display: none; 204 | 205 | &::backdrop, & + .backdrop { 206 | @include reveal-bg(false); 207 | } 208 | 209 | &[open]{ 210 | display: block; 211 | } 212 | } 213 | 214 | // Reveal Print Styles: It should be invisible, adds no value being printed. 215 | @media print { 216 | dialog, .#{$reveal-modal-class} { 217 | display: none; 218 | background: $white !important; 219 | } 220 | } 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_side-nav.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | 11 | $include-html-nav-classes: $include-html-classes !default; 12 | 13 | // We use this to control padding. 14 | $side-nav-padding: rem-calc(14 0) !default; 15 | 16 | // We use these to control list styles. 17 | $side-nav-list-type: none !default; 18 | $side-nav-list-position: outside !default; 19 | $side-nav-list-margin: rem-calc(0 0 7 0) !default; 20 | 21 | // We use these to control link styles. 22 | $side-nav-link-color: $primary-color !default; 23 | $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; 24 | $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; 25 | $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; 26 | $side-nav-link-margin: 0 !default; 27 | $side-nav-link-padding: rem-calc(7 14) !default; 28 | $side-nav-font-size: rem-calc(14) !default; 29 | $side-nav-font-weight: $font-weight-normal !default; 30 | $side-nav-font-weight-active: $side-nav-font-weight !default; 31 | $side-nav-font-family: $body-font-family !default; 32 | $side-nav-font-family-active: $side-nav-font-family !default; 33 | 34 | // We use these to control heading styles. 35 | $side-nav-heading-color: $side-nav-link-color !default; 36 | $side-nav-heading-font-size: $side-nav-font-size !default; 37 | $side-nav-heading-font-weight: bold !default; 38 | $side-nav-heading-text-transform: uppercase !default; 39 | 40 | // We use these to control border styles 41 | $side-nav-divider-size: 1px !default; 42 | $side-nav-divider-style: solid !default; 43 | $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; 44 | 45 | 46 | // 47 | // @mixins 48 | // 49 | 50 | 51 | // We use this to style the side-nav 52 | // 53 | // $divider-color - Border color of divider. Default: $side-nav-divider-color. 54 | // $font-size - Font size of nav items. Default: $side-nav-font-size. 55 | // $link-color - Color of navigation links. Default: $side-nav-link-color. 56 | // $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover. 57 | @mixin side-nav( 58 | $divider-color:$side-nav-divider-color, 59 | $font-size:$side-nav-font-size, 60 | $link-color:$side-nav-link-color, 61 | $link-color-hover:$side-nav-link-color-hover, 62 | $link-bg-hover:$side-nav-link-bg-hover) { 63 | display: block; 64 | margin: 0; 65 | padding: $side-nav-padding; 66 | list-style-type: $side-nav-list-type; 67 | list-style-position: $side-nav-list-position; 68 | font-family: $side-nav-font-family; 69 | 70 | li { 71 | margin: $side-nav-list-margin; 72 | font-size: $font-size; 73 | font-weight: $side-nav-font-weight; 74 | 75 | a:not(.button) { 76 | display: block; 77 | color: $link-color; 78 | margin: $side-nav-link-margin; 79 | padding: $side-nav-link-padding; 80 | &:hover, 81 | &:focus { 82 | background: $link-bg-hover; 83 | color: $link-color-hover; 84 | } 85 | } 86 | 87 | &.active > a:first-child:not(.button) { 88 | color: $side-nav-link-color-active; 89 | font-weight: $side-nav-font-weight-active; 90 | font-family: $side-nav-font-family-active; 91 | } 92 | 93 | &.divider { 94 | border-top: $side-nav-divider-size $side-nav-divider-style; 95 | height: 0; 96 | padding: 0; 97 | list-style: none; 98 | border-top-color: $divider-color; 99 | } 100 | 101 | &.heading { 102 | color: $side-nav-heading-color; 103 | font: { 104 | size: $side-nav-heading-font-size; 105 | weight: $side-nav-heading-font-weight; 106 | } 107 | text-transform: $side-nav-heading-text-transform; 108 | } 109 | } 110 | } 111 | 112 | @include exports("side-nav") { 113 | @if $include-html-nav-classes { 114 | .side-nav { @include side-nav; } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_split-buttons.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | @import "buttons"; 7 | @import "dropdown-buttons"; 8 | 9 | // 10 | // @name _split-buttons.scss 11 | // @dependencies _buttons.scss, _global.scss 12 | // 13 | 14 | // 15 | // @variables 16 | // 17 | 18 | $include-html-button-classes: $include-html-classes !default; 19 | 20 | // We use these to control different shared styles for Split Buttons 21 | $split-button-function-factor: 10% !default; 22 | $split-button-pip-color: $white !default; 23 | $split-button-pip-color-alt: $oil !default; 24 | $split-button-active-bg-tint: rgba(0,0,0,0.1) !default; 25 | 26 | // We use these to control tiny split buttons 27 | $split-button-padding-tny: $button-pip-tny * 10 !default; 28 | $split-button-span-width-tny: $button-pip-tny * 6 !default; 29 | $split-button-pip-size-tny: $button-pip-tny !default; 30 | $split-button-pip-top-tny: $button-pip-tny * 2 !default; 31 | $split-button-pip-default-float-tny: rem-calc(-6) !default; 32 | 33 | // We use these to control small split buttons 34 | $split-button-padding-sml: $button-pip-sml * 10 !default; 35 | $split-button-span-width-sml: $button-pip-sml * 6 !default; 36 | $split-button-pip-size-sml: $button-pip-sml !default; 37 | $split-button-pip-top-sml: $button-pip-sml * 1.5 !default; 38 | $split-button-pip-default-float-sml: rem-calc(-6) !default; 39 | 40 | // We use these to control medium split buttons 41 | $split-button-padding-med: $button-pip-med * 9 !default; 42 | $split-button-span-width-med: $button-pip-med * 5.5 !default; 43 | $split-button-pip-size-med: $button-pip-med - rem-calc(3) !default; 44 | $split-button-pip-top-med: $button-pip-med * 1.5 !default; 45 | $split-button-pip-default-float-med: rem-calc(-6) !default; 46 | 47 | // We use these to control large split buttons 48 | $split-button-padding-lrg: $button-pip-lrg * 8 !default; 49 | $split-button-span-width-lrg: $button-pip-lrg * 5 !default; 50 | $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; 51 | $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5) !default; 52 | $split-button-pip-default-float-lrg: rem-calc(-6) !default; 53 | 54 | 55 | // 56 | // @mixins 57 | // 58 | 59 | // We use this mixin to create split buttons that build upon the button mixins 60 | // 61 | // $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large. 62 | // $pip-color - Color of the triangle. Default: $split-button-pip-color. 63 | // $span-border - Border color of button divider. Default: $primary-color. 64 | // $base-style - Apply base style to split button. Default: true. 65 | @mixin split-button( 66 | $padding:medium, 67 | $pip-color:$split-button-pip-color, 68 | $span-border:$primary-color, 69 | $base-style:true) { 70 | 71 | // With this, we can control whether or not the base styles come through. 72 | @if $base-style { 73 | position: relative; 74 | 75 | // Styling for the split arrow clickable area 76 | span { 77 | display: block; 78 | height: 100%; 79 | position: absolute; 80 | #{$opposite-direction}: 0; 81 | top: 0; 82 | border-#{$default-float}: solid 1px; 83 | 84 | // Building the triangle pip indicator 85 | &:after { 86 | position: absolute; 87 | content: ""; 88 | width: 0; 89 | height: 0; 90 | display: block; 91 | border-style: inset; 92 | top: 50%; 93 | 94 | #{$default-float}: 50%; 95 | } 96 | 97 | &:active { background-color: $split-button-active-bg-tint; } 98 | } 99 | } 100 | 101 | // Control the border color for the span area of the split button 102 | @if $span-border { 103 | span { 104 | border-#{$default-float}-color: rgba(255,255,255,0.5); 105 | } 106 | } 107 | 108 | // Style of the button and clickable area for tiny sizes 109 | @if $padding == tiny { 110 | padding-#{$opposite-direction}: $split-button-padding-tny; 111 | 112 | span { width: $split-button-span-width-tny; 113 | &:after { 114 | border-top-style: solid; 115 | border-width: $split-button-pip-size-tny; 116 | top: 48%; 117 | margin-#{$default-float}: $split-button-pip-default-float-tny; 118 | } 119 | } 120 | } 121 | 122 | // Style of the button and clickable area for small sizes 123 | @else if $padding == small { 124 | padding-#{$opposite-direction}: $split-button-padding-sml; 125 | 126 | span { width: $split-button-span-width-sml; 127 | &:after { 128 | border-top-style: solid; 129 | border-width: $split-button-pip-size-sml; 130 | top: 48%; 131 | margin-#{$default-float}: $split-button-pip-default-float-sml; 132 | } 133 | } 134 | } 135 | 136 | // Style of the button and clickable area for default (medium) sizes 137 | @else if $padding == medium { 138 | padding-#{$opposite-direction}: $split-button-padding-med; 139 | 140 | span { width: $split-button-span-width-med; 141 | &:after { 142 | border-top-style: solid; 143 | border-width: $split-button-pip-size-med; 144 | top: 48%; 145 | margin-#{$default-float}: $split-button-pip-default-float-med; 146 | } 147 | } 148 | } 149 | 150 | // Style of the button and clickable area for large sizes 151 | @else if $padding == large { 152 | padding-#{$opposite-direction}: $split-button-padding-lrg; 153 | 154 | span { width: $split-button-span-width-lrg; 155 | &:after { 156 | border-top-style: solid; 157 | border-width: $split-button-pip-size-lrg; 158 | top: 48%; 159 | margin-#{$default-float}: $split-button-pip-default-float-lrg; 160 | } 161 | } 162 | } 163 | 164 | // Control the color of the triangle pip 165 | @if $pip-color { 166 | span:after { border-color: $pip-color transparent transparent transparent; } 167 | } 168 | } 169 | 170 | @include exports("split-button") { 171 | @if $include-html-button-classes { 172 | 173 | .split.button { @include split-button; 174 | 175 | &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); } 176 | &.alert { @include split-button(false, false, $alert-color, false); } 177 | &.success { @include split-button(false, false, $success-color, false); } 178 | 179 | &.tiny { @include split-button(tiny, false, false, false); } 180 | &.small { @include split-button(small, false, false, false); } 181 | &.large { @include split-button(large, false, false, false); } 182 | &.expand { padding-left: 2rem; } 183 | 184 | &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); } 185 | 186 | &.radius span { @include side-radius($opposite-direction, $global-radius); } 187 | &.round span { @include side-radius($opposite-direction, 1000px); } 188 | } 189 | 190 | } 191 | } 192 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_sub-nav.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @name _sub-nav.scss 9 | // @dependencies _global.scss 10 | // 11 | 12 | // 13 | // @variables 14 | // 15 | 16 | $include-html-nav-classes: $include-html-classes !default; 17 | 18 | // We use these to control margin and padding 19 | $sub-nav-list-margin: rem-calc(-4 0 18) !default; 20 | $sub-nav-list-padding-top: rem-calc(4) !default; 21 | 22 | // We use this to control the definition 23 | $sub-nav-font-family: $body-font-family !default; 24 | $sub-nav-font-size: rem-calc(14) !default; 25 | $sub-nav-font-color: $aluminum !default; 26 | $sub-nav-font-weight: $font-weight-normal !default; 27 | $sub-nav-text-decoration: none !default; 28 | $sub-nav-padding: rem-calc(3 16) !default; 29 | $sub-nav-border-radius: 3px !default; 30 | $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default; 31 | 32 | 33 | // We use these to control the active item styles 34 | 35 | $sub-nav-active-font-weight: $font-weight-normal !default; 36 | $sub-nav-active-bg: $primary-color !default; 37 | $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default; 38 | $sub-nav-active-color: $white !default; 39 | $sub-nav-active-padding: $sub-nav-padding !default; 40 | $sub-nav-active-cursor: default !default; 41 | 42 | $sub-nav-item-divider: "" !default; 43 | $sub-nav-item-divider-margin: rem-calc(12) !default; 44 | 45 | // 46 | // @mixins 47 | // 48 | 49 | 50 | // Create a sub-nav item 51 | // 52 | // $font-color - Font color. Default: $sub-nav-font-color. 53 | // $font-size - Font size. Default: $sub-nav-font-size. 54 | // $active-bg - Background of active nav item. Default: $sub-nav-active-bg. 55 | // $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover. 56 | @mixin sub-nav( 57 | $font-color: $sub-nav-font-color, 58 | $font-size: $sub-nav-font-size, 59 | $active-bg: $sub-nav-active-bg, 60 | $active-bg-hover: $sub-nav-active-bg-hover) { 61 | display: block; 62 | width: auto; 63 | overflow: hidden; 64 | margin-bottom: $sub-nav-list-margin; 65 | padding-top: $sub-nav-list-padding-top; 66 | 67 | dt { 68 | text-transform: uppercase; 69 | } 70 | 71 | dt, 72 | dd, 73 | li { 74 | float: $default-float; 75 | display: inline; 76 | margin-#{$default-float}: rem-calc(16); 77 | margin-bottom: 0; 78 | font-family: $sub-nav-font-family; 79 | font-weight: $sub-nav-font-weight; 80 | font-size: $font-size; 81 | color: $font-color; 82 | 83 | a { 84 | text-decoration: $sub-nav-text-decoration; 85 | color: $sub-nav-font-color; 86 | padding: $sub-nav-padding; 87 | &:hover { 88 | color: $sub-nav-font-color-hover; 89 | } 90 | } 91 | 92 | &.active a { 93 | @include radius($sub-nav-border-radius); 94 | font-weight: $sub-nav-active-font-weight; 95 | background: $active-bg; 96 | padding: $sub-nav-active-padding; 97 | cursor: $sub-nav-active-cursor; 98 | color: $sub-nav-active-color; 99 | &:hover { 100 | background: $active-bg-hover; 101 | } 102 | } 103 | @if $sub-nav-item-divider != "" { 104 | margin-#{$default-float}: 0; 105 | 106 | &:before { 107 | content: "#{$sub-nav-item-divider}"; 108 | margin: 0 $sub-nav-item-divider-margin; 109 | } 110 | 111 | &:first-child:before { 112 | content: ""; 113 | margin: 0; 114 | } 115 | } 116 | } 117 | } 118 | 119 | @include exports("sub-nav") { 120 | @if $include-html-nav-classes { 121 | .sub-nav { @include sub-nav; } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_switches.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @name 9 | // @dependencies _global.scss 10 | // 11 | 12 | // 13 | // @variables 14 | // 15 | 16 | $include-html-form-classes: $include-html-classes !default; 17 | 18 | // Controlling background color for the switch container 19 | $switch-bg: $gainsboro !default; 20 | 21 | // We use these to control the switch heights for our default classes 22 | $switch-height-tny: 1.5rem !default; 23 | $switch-height-sml: 1.75rem !default; 24 | $switch-height-med: 2rem !default; 25 | $switch-height-lrg: 2.5rem !default; 26 | $switch-bottom-margin: 1.5rem !default; 27 | 28 | // We use these to style the switch-paddle 29 | $switch-paddle-bg: $white !default; 30 | $switch-paddle-transition-speed: .15s !default; 31 | $switch-paddle-transition-ease: ease-out !default; 32 | $switch-active-color: $primary-color !default; 33 | 34 | 35 | // 36 | // @mixins 37 | // 38 | 39 | // We use this mixin to create the base styles for our switch element. 40 | // 41 | // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. 42 | // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. 43 | @mixin switch-base( 44 | $transition-speed:$switch-paddle-transition-speed, 45 | $transition-ease:$switch-paddle-transition-ease) { 46 | 47 | padding: 0; 48 | border: none; 49 | position: relative; 50 | outline: 0; 51 | -webkit-user-select: none; 52 | -moz-user-select: none; 53 | user-select: none; 54 | 55 | // Default label styles for type and transition 56 | label { 57 | display: block; 58 | margin-bottom: $switch-height-med / 2; 59 | position: relative; 60 | color: transparent; 61 | background: $switch-bg; 62 | text-indent: 100%; 63 | width: $switch-height-med * 2; height: $switch-height-med; 64 | cursor: pointer; 65 | 66 | // Transition for the switch label to follow paddle 67 | @include single-transition(left, $transition-speed, $transition-ease); 68 | } 69 | 70 | // So that we don't need to recreate the form with any JS, we use the 71 | // existing checkbox or radio button, but we cleverly position and hide it. 72 | input { 73 | opacity: 0; 74 | position: absolute; 75 | top: 9px; 76 | left: 10px; 77 | padding:0; 78 | 79 | & + label { margin-left: 0; margin-right: 0; } 80 | } 81 | 82 | // The paddle for the switch is created from an after psuedoclass 83 | // content element. This is sized and positioned, and reacts to 84 | // the state of the input. 85 | 86 | label:after { 87 | content: ""; 88 | display: block; 89 | background: $switch-paddle-bg; 90 | position: absolute; top: .25rem; left: .25rem; 91 | width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem; 92 | 93 | -webkit-transition: left $transition-speed $transition-ease; 94 | -moz-transition: left $transition-speed $transition-ease; 95 | transition: left $transition-speed $transition-ease; 96 | 97 | -webkit-transform: translate3d(0,0,0); 98 | -moz-transform: translate3d(0,0,0); 99 | transform: translate3d(0,0,0); 100 | } 101 | 102 | input:checked + label { 103 | background: $switch-active-color; 104 | } 105 | 106 | input:checked + label:after { 107 | left: $switch-height-med + 0.25rem; 108 | } 109 | } 110 | 111 | // We use this mixin to create the size styles for switches. 112 | // 113 | // $height - Height (in px) of the switch. Default: $switch-height-med. 114 | // $font-size - Font size of text in switch. Default: $switch-font-size-med. 115 | // $line-height - Line height of switch. Default: 2.3rem. 116 | @mixin switch-size($height: $switch-height-med) { 117 | 118 | label { 119 | width: $height * 2; height: $height; 120 | } 121 | 122 | label:after { 123 | width: $height - 0.5rem; height: $height - 0.5rem; 124 | } 125 | 126 | input:checked + label:after { 127 | left: $height + 0.25rem; 128 | } 129 | 130 | } 131 | 132 | // We use this mixin to add color and other fanciness to the switches. 133 | // 134 | // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. 135 | // $active-color - Background color of positive side of switch. Default: $switch-positive-color. 136 | // $negative-color - Background color of negative side of switch. Default: $switch-negative-color. 137 | // $radius - Radius to apply to switch. Default: false. 138 | // $base-style - Apply base styles? Default: true. 139 | @mixin switch-style( 140 | $paddle-bg:$switch-paddle-bg, 141 | $radius:false, 142 | $base-style:true) { 143 | 144 | @if $base-style { 145 | 146 | label { 147 | color: transparent; 148 | background: $switch-bg; 149 | } 150 | 151 | label:after { 152 | background: $paddle-bg; 153 | } 154 | 155 | input:checked + label { 156 | background: $switch-active-color; 157 | } 158 | } 159 | 160 | // Setting up the radius for switches 161 | @if $radius == true { 162 | label { 163 | border-radius: 2rem; 164 | } 165 | label:after { 166 | border-radius: 2rem; 167 | } 168 | } 169 | @else if $radius { 170 | label { 171 | border-radius: $radius; 172 | } 173 | label:after { 174 | border-radius: $radius; 175 | } 176 | } 177 | 178 | } 179 | 180 | // We use this to quickly create switches with a single mixin 181 | // 182 | // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. 183 | // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. 184 | // $height - Height (in px) of the switch. Default: $switch-height-med. 185 | // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. 186 | // $active-color - Background color of an active switch. Default: $switch-active-color. 187 | // $radius - Radius to apply to switch. Default: false. 188 | // $base-style - Apply base styles? Default: true. 189 | @mixin switch( 190 | $transition-speed: $switch-paddle-transition-speed, 191 | $transition-ease: $switch-paddle-transition-ease, 192 | $height: $switch-height-med, 193 | $paddle-bg: $switch-paddle-bg, 194 | $active-color: $switch-active-color, 195 | $radius:false, 196 | $base-style:true) { 197 | @include switch-base($transition-speed, $transition-ease); 198 | @include switch-size($height); 199 | @include switch-style($paddle-bg, $radius, $base-style); 200 | } 201 | 202 | @include exports("switch") { 203 | @if $include-html-form-classes { 204 | .switch { 205 | @include switch; 206 | 207 | // Large radio switches 208 | &.large { @include switch-size($switch-height-lrg); } 209 | 210 | // Small radio switches 211 | &.small { @include switch-size($switch-height-sml); } 212 | 213 | // Tiny radio switches 214 | &.tiny { @include switch-size($switch-height-tny); } 215 | 216 | // Add a radius to the switch 217 | &.radius { 218 | label { @include radius(4px); } 219 | label:after { @include radius(3px); } 220 | } 221 | 222 | // Make the switch completely round, like a pill 223 | &.round { @include radius(1000px); 224 | label { @include radius(2rem); } 225 | label:after { @include radius(2rem); } 226 | } 227 | 228 | } 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_tables.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @name _tables.scss 9 | // @dependencies _global.scss 10 | // 11 | 12 | // 13 | // @variables 14 | // 15 | 16 | $include-html-table-classes: $include-html-classes !default; 17 | 18 | // These control the background color for the table and even rows 19 | $table-bg: $white !default; 20 | $table-even-row-bg: $snow !default; 21 | 22 | // These control the table cell border style 23 | $table-border-style: solid !default; 24 | $table-border-size: 1px !default; 25 | $table-border-color: $gainsboro !default; 26 | 27 | // These control the table head styles 28 | $table-head-bg: $white-smoke !default; 29 | $table-head-font-size: rem-calc(14) !default; 30 | $table-head-font-color: $jet !default; 31 | $table-head-font-weight: $font-weight-bold !default; 32 | $table-head-padding: rem-calc(8 10 10) !default; 33 | 34 | // These control the table foot styles 35 | $table-foot-bg: $table-head-bg !default; 36 | $table-foot-font-size: $table-head-font-size !default; 37 | $table-foot-font-color: $table-head-font-color !default; 38 | $table-foot-font-weight: $table-head-font-weight !default; 39 | $table-foot-padding: $table-head-padding !default; 40 | 41 | // These control the caption 42 | $table-caption-bg: transparent !default; 43 | $table-caption-font-color: $table-head-font-color !default; 44 | $table-caption-font-size: rem-calc(16) !default; 45 | $table-caption-font-weight: bold !default; 46 | 47 | // These control the row padding and font styles 48 | $table-row-padding: rem-calc(9 10) !default; 49 | $table-row-font-size: rem-calc(14) !default; 50 | $table-row-font-color: $jet !default; 51 | $table-line-height: rem-calc(18) !default; 52 | 53 | // These are for controlling the layout, display and margin of tables 54 | $table-layout: auto !default; 55 | $table-display: table-cell !default; 56 | $table-margin-bottom: rem-calc(20) !default; 57 | 58 | 59 | // 60 | // @mixins 61 | // 62 | 63 | @mixin table { 64 | background: $table-bg; 65 | margin-bottom: $table-margin-bottom; 66 | border: $table-border-style $table-border-size $table-border-color; 67 | table-layout: $table-layout; 68 | 69 | caption { 70 | background: $table-caption-bg; 71 | color: $table-caption-font-color; 72 | font: { 73 | size: $table-caption-font-size; 74 | weight: $table-caption-font-weight; 75 | } 76 | } 77 | 78 | thead { 79 | background: $table-head-bg; 80 | 81 | tr { 82 | th, 83 | td { 84 | padding: $table-head-padding; 85 | font-size: $table-head-font-size; 86 | font-weight: $table-head-font-weight; 87 | color: $table-head-font-color; 88 | } 89 | } 90 | } 91 | 92 | tfoot { 93 | background: $table-foot-bg; 94 | 95 | tr { 96 | th, 97 | td { 98 | padding: $table-foot-padding; 99 | font-size: $table-foot-font-size; 100 | font-weight: $table-foot-font-weight; 101 | color: $table-foot-font-color; 102 | } 103 | } 104 | } 105 | 106 | tr { 107 | th, 108 | td { 109 | padding: $table-row-padding; 110 | font-size: $table-row-font-size; 111 | color: $table-row-font-color; 112 | text-align: $default-float; 113 | } 114 | 115 | &.even, 116 | &.alt, 117 | &:nth-of-type(even) { background: $table-even-row-bg; } 118 | } 119 | 120 | thead tr th, 121 | tfoot tr th, 122 | tfoot tr td, 123 | tbody tr th, 124 | tbody tr td, 125 | tr td { display: $table-display; line-height: $table-line-height; } 126 | } 127 | 128 | 129 | @include exports("table") { 130 | @if $include-html-table-classes { 131 | table { 132 | @include table; 133 | } 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | @import "grid"; 7 | 8 | // 9 | // @variables 10 | // 11 | 12 | $include-html-tabs-classes: $include-html-classes !default; 13 | 14 | $tabs-navigation-padding: rem-calc(16) !default; 15 | $tabs-navigation-bg-color: $silver !default; 16 | $tabs-navigation-active-bg-color: $white !default; 17 | $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default; 18 | $tabs-navigation-font-color: $jet !default; 19 | $tabs-navigation-active-font-color: $tabs-navigation-font-color !default; 20 | $tabs-navigation-font-size: rem-calc(16) !default; 21 | $tabs-navigation-font-family: $body-font-family !default; 22 | 23 | $tabs-content-margin-bottom: rem-calc(24) !default; 24 | $tabs-content-padding: $column-gutter/2 !default; 25 | 26 | $tabs-vertical-navigation-margin-bottom: 1.25rem !default; 27 | 28 | @include exports("tab") { 29 | @if $include-html-tabs-classes { 30 | .tabs { 31 | @include clearfix; 32 | margin-bottom: 0 !important; 33 | margin-left: 0; 34 | dd, .tab-title { 35 | position: relative; 36 | margin-bottom: 0 !important; 37 | list-style: none; 38 | float: $default-float; 39 | > a { 40 | outline: none; 41 | display: block; 42 | background: { 43 | color: $tabs-navigation-bg-color; 44 | } 45 | color: $tabs-navigation-font-color; 46 | padding: $tabs-navigation-padding $tabs-navigation-padding * 2; 47 | font-family: $tabs-navigation-font-family; 48 | font-size: $tabs-navigation-font-size; 49 | &:hover { 50 | background: { 51 | color: $tabs-navigation-hover-bg-color; 52 | } 53 | } 54 | } 55 | &.active a { 56 | background: { 57 | color: $tabs-navigation-active-bg-color; 58 | } 59 | color:$tabs-navigation-active-font-color; 60 | } 61 | } 62 | &.radius { 63 | dd:first-child, .tab:first-child { 64 | a { @include side-radius($default-float, $global-radius); } 65 | } 66 | dd:last-child, .tab:last-child { 67 | a { @include side-radius($opposite-direction, $global-radius); } 68 | } 69 | } 70 | &.vertical { 71 | dd, .tab-title { 72 | position: inherit; 73 | float: none; 74 | display: block; 75 | top: auto; 76 | } 77 | } 78 | } 79 | 80 | .tabs-content { 81 | @include clearfix; 82 | margin-bottom: $tabs-content-margin-bottom; 83 | width: 100%; 84 | > .content { 85 | display: none; 86 | float: $default-float; 87 | padding: $tabs-content-padding 0; 88 | width: 100%; 89 | &.active { display: block; float: none; } 90 | &.contained { padding: $tabs-content-padding; } 91 | } 92 | &.vertical { 93 | display: block; 94 | > .content { padding: 0 $tabs-content-padding; } 95 | } 96 | } 97 | @media #{$medium-up} { 98 | .tabs { 99 | &.vertical { 100 | width: 20%; 101 | max-width: 20%; 102 | float: $default-float; 103 | margin: 0 0 $tabs-vertical-navigation-margin-bottom; 104 | } 105 | } 106 | .tabs-content { 107 | &.vertical { 108 | width: 80%; 109 | max-width: 80%; 110 | float: $default-float; 111 | margin-#{$default-float}: -1px; 112 | padding-#{$default-float}: 1rem; 113 | } 114 | } 115 | } 116 | .no-js { 117 | .tabs-content > .content { 118 | display: block; 119 | float: none; 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_thumbs.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @name _thumbs.scss 9 | // @dependencies _globals.scss 10 | // 11 | 12 | // 13 | // @variables 14 | // 15 | 16 | $include-html-media-classes: $include-html-classes !default; 17 | 18 | // We use these to control border styles 19 | $thumb-border-style: solid !default; 20 | $thumb-border-width: 4px !default; 21 | $thumb-border-color: $white !default; 22 | $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default; 23 | $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default; 24 | 25 | // Radius and transition speed for thumbs 26 | $thumb-radius: $global-radius !default; 27 | $thumb-transition-speed: 200ms !default; 28 | 29 | // 30 | // @mixins 31 | // 32 | 33 | // We use this to create image thumbnail styles. 34 | // 35 | // $border-width - Width of border around thumbnail. Default: $thumb-border-width. 36 | // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow. 37 | // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover. 38 | @mixin thumb( 39 | $border-width:$thumb-border-width, 40 | $box-shadow:$thumb-box-shadow, 41 | $box-shadow-hover:$thumb-box-shadow-hover) { 42 | line-height: 0; 43 | display: inline-block; 44 | border: $thumb-border-style $border-width $thumb-border-color; 45 | max-width: 100%; 46 | box-shadow: $box-shadow; 47 | 48 | &:hover, 49 | &:focus { 50 | box-shadow: $box-shadow-hover; 51 | } 52 | } 53 | 54 | 55 | @include exports("thumb") { 56 | @if $include-html-media-classes { 57 | 58 | /* Image Thumbnails */ 59 | .th { 60 | @include thumb; 61 | @include single-transition(all,$thumb-transition-speed,ease-out); 62 | 63 | &.radius { @include radius($thumb-radius); } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_toolbar.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | // toolbar styles 5 | 6 | .toolbar { 7 | background: $oil; 8 | width: 100%; 9 | font-size: 0; 10 | display: inline-block; 11 | 12 | &.label-bottom .tab .tab-content { 13 | i, img { margin-bottom: 10px; } 14 | } 15 | 16 | &.label-right .tab .tab-content { 17 | i, img { margin-right: 10px; display: inline-block;} 18 | label { display: inline-block; } 19 | } 20 | 21 | &.vertical.label-right .tab .tab-content { 22 | text-align: left; 23 | } 24 | 25 | &.vertical { 26 | height: 100%; 27 | width: auto; 28 | 29 | .tab { 30 | width: auto; 31 | margin: auto; 32 | float: none; 33 | } 34 | } 35 | 36 | .tab { 37 | text-align: center; 38 | width: 25%; 39 | margin: 0 auto; 40 | display: block; 41 | padding: 20px; 42 | float: left; 43 | 44 | &:hover { 45 | background: rgba($white, 0.1); 46 | } 47 | } 48 | } 49 | 50 | .toolbar .tab-content { 51 | font-size: 16px; 52 | text-align: center; 53 | 54 | label { color: $iron; } 55 | 56 | i { 57 | font-size: 30px; 58 | display: block; 59 | margin: 0 auto; 60 | color: $iron; 61 | vertical-align: middle; 62 | } 63 | 64 | img { 65 | width: 30px; 66 | height: 30px; 67 | display: block; 68 | margin: 0 auto; 69 | } 70 | } -------------------------------------------------------------------------------- /src/css/_foundation547/foundation/components/_tooltips.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // Tooltip Variables 9 | // 10 | $include-html-tooltip-classes: $include-html-classes !default; 11 | 12 | $has-tip-border-bottom: dotted 1px $iron !default; 13 | $has-tip-font-weight: $font-weight-bold !default; 14 | $has-tip-font-color: $oil !default; 15 | $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default; 16 | $has-tip-font-color-hover: $primary-color !default; 17 | $has-tip-cursor-type: help !default; 18 | 19 | $tooltip-padding: rem-calc(12) !default; 20 | $tooltip-bg: $oil !default; 21 | $tooltip-font-size: rem-calc(14) !default; 22 | $tooltip-font-weight: $font-weight-normal !default; 23 | $tooltip-font-color: $white !default; 24 | $tooltip-line-height: 1.3 !default; 25 | $tooltip-close-font-size: rem-calc(10) !default; 26 | $tooltip-close-font-weight: $font-weight-normal !default; 27 | $tooltip-close-font-color: $monsoon !default; 28 | $tooltip-font-size-sml: rem-calc(14) !default; 29 | $tooltip-radius: $global-radius !default; 30 | $tooltip-rounded: $global-rounded !default; 31 | $tooltip-pip-size: 5px !default; 32 | $tooltip-max-width: 300px !default; 33 | 34 | @include exports("tooltip") { 35 | @if $include-html-tooltip-classes { 36 | 37 | /* Tooltips */ 38 | .has-tip { 39 | border-bottom: $has-tip-border-bottom; 40 | cursor: $has-tip-cursor-type; 41 | font-weight: $has-tip-font-weight; 42 | color: $has-tip-font-color; 43 | 44 | &:hover, 45 | &:focus { 46 | border-bottom: $has-tip-border-bottom-hover; 47 | color: $has-tip-font-color-hover; 48 | } 49 | 50 | &.tip-left, 51 | &.tip-right { float: none !important; } 52 | } 53 | 54 | .tooltip { 55 | display: none; 56 | position: absolute; 57 | z-index: 1006; 58 | font-weight: $tooltip-font-weight; 59 | font-size: $tooltip-font-size; 60 | line-height: $tooltip-line-height; 61 | padding: $tooltip-padding; 62 | max-width: $tooltip-max-width; 63 | #{$default-float}: 50%; 64 | width: 100%; 65 | color: $tooltip-font-color; 66 | background: $tooltip-bg; 67 | 68 | &>.nub { 69 | display: block; 70 | #{$default-float}: $tooltip-pip-size; 71 | position: absolute; 72 | width: 0; 73 | height: 0; 74 | border: solid $tooltip-pip-size; 75 | border-color: transparent transparent $tooltip-bg transparent; 76 | top: -($tooltip-pip-size * 2); 77 | pointer-events: none; 78 | 79 | &.rtl { 80 | left: auto; 81 | #{$opposite-direction}: $tooltip-pip-size; 82 | } 83 | } 84 | 85 | &.radius { 86 | @include radius($tooltip-radius); 87 | } 88 | &.round { 89 | @include radius($tooltip-rounded); 90 | &>.nub { 91 | left: 2rem; 92 | } 93 | } 94 | 95 | &.opened { 96 | color: $has-tip-font-color-hover !important; 97 | border-bottom: $has-tip-border-bottom-hover !important; 98 | } 99 | } 100 | 101 | .tap-to-close { 102 | display: block; 103 | font-size: $tooltip-close-font-size; 104 | color: $tooltip-close-font-color; 105 | font-weight: $tooltip-close-font-weight; 106 | } 107 | 108 | @media #{$small} { 109 | .tooltip { 110 | &>.nub { 111 | border-color: transparent transparent $tooltip-bg transparent; 112 | top: -($tooltip-pip-size * 2); 113 | } 114 | &.tip-top>.nub { 115 | border-color: $tooltip-bg transparent transparent transparent; 116 | top: auto; 117 | bottom: -($tooltip-pip-size * 2); 118 | } 119 | 120 | &.tip-left, 121 | &.tip-right { float: none !important; } 122 | 123 | &.tip-left>.nub { 124 | border-color: transparent transparent transparent $tooltip-bg; 125 | right: -($tooltip-pip-size * 2); 126 | left: auto; 127 | top: 50%; 128 | margin-top: -$tooltip-pip-size; 129 | } 130 | &.tip-right>.nub { 131 | border-color: transparent $tooltip-bg transparent transparent; 132 | right: auto; 133 | left: -($tooltip-pip-size * 2); 134 | top: 50%; 135 | margin-top: -$tooltip-pip-size; 136 | } 137 | 138 | } 139 | } 140 | 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/css/_foundation547/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /src/css/_ibmSettings.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | IBM styles 3 | ========================================================================== */ 4 | /* -------------------------------------------------------------------------- 5 | Declare Swatch book variables. 6 | -------------------------------------------------------------------------- */ 7 | //Blue 8 | $ibmdesign-blue-10: #C0E6FF; 9 | $ibmdesign-blue-20: #7CC7FF; 10 | $ibmdesign-blue-30: #5AAAFA; 11 | $ibmdesign-blue-40: #5596E6; 12 | $ibmdesign-blue-50: #4178BE; 13 | $ibmdesign-blue-60: #325C80; 14 | $ibmdesign-blue-70: #264A60; 15 | $ibmdesign-blue-80: #1D3649; 16 | $ibmdesign-blue-90: #152935; 17 | $ibmdesign-blue-100: #010205; 18 | 19 | //Green 20 | $ibmdesign-green-10: #C8F08F; 21 | $ibmdesign-green-20: #B4E051; 22 | $ibmdesign-green-30: #8CD211; 23 | $ibmdesign-green-40: #5AA700; 24 | $ibmdesign-green-50: #4B8400; 25 | $ibmdesign-green-60: #2D660A; 26 | $ibmdesign-green-70: #144D14; 27 | $ibmdesign-green-80: #0A3C02; 28 | $ibmdesign-green-90: #0C2808; 29 | $ibmdesign-green-100: #010200; 30 | 31 | //Teal 32 | $ibmdesign-teal-10: #A7FAE6; 33 | $ibmdesign-teal-20: #6EEDD8; 34 | $ibmdesign-teal-30: #41D6C3; 35 | $ibmdesign-teal-40: #00B4A0; 36 | $ibmdesign-teal-50: #008571; 37 | $ibmdesign-teal-60: #006D5D; 38 | $ibmdesign-teal-70: #005448; 39 | $ibmdesign-teal-80: #003C32; 40 | $ibmdesign-teal-90: #012B22; 41 | $ibmdesign-teal-100: #000202; 42 | 43 | //Purple 44 | $ibmdesign-purple-10: #EED2FF; 45 | $ibmdesign-purple-20: #D7AAFF; 46 | $ibmdesign-purple-30: #BA8FF7; 47 | $ibmdesign-purple-40: #AF6EE8; 48 | $ibmdesign-purple-50: #9855D4; 49 | $ibmdesign-purple-60: #734098; 50 | $ibmdesign-purple-70: #562F72; 51 | $ibmdesign-purple-80: #412356; 52 | $ibmdesign-purple-90: #311A41; 53 | $ibmdesign-purple-100: #030103; 54 | 55 | //Magenta 56 | $ibmdesign-magenta-10: #FFD2FF; 57 | $ibmdesign-magenta-20: #FF9EEE; 58 | $ibmdesign-magenta-30: #FF71D4; 59 | $ibmdesign-magenta-40: #FF3CA0; 60 | $ibmdesign-magenta-50: #DB2780; 61 | $ibmdesign-magenta-60: #A6266E; 62 | $ibmdesign-magenta-70: #7C1C58; 63 | $ibmdesign-magenta-80: #601146; 64 | $ibmdesign-magenta-90: #3A0B2E; 65 | $ibmdesign-magenta-100: #040102; 66 | 67 | //Red 68 | $ibmdesign-red-10: #FFD2DD; 69 | $ibmdesign-red-20: #FFA5B4; 70 | $ibmdesign-red-30: #FF71D4; 71 | $ibmdesign-red-40: #FF3CA0; 72 | $ibmdesign-red-50: #DB2780; 73 | $ibmdesign-red-60: #A6266E; 74 | $ibmdesign-red-70: #7C1C58; 75 | $ibmdesign-red-80: #601146; 76 | $ibmdesign-red-90: #3A0B2E; 77 | $ibmdesign-red-100: #040102; -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | html{font-size:85%;margin:0 10px} 2 | div.manager-container{padding:0 10px;max-width:1200px;margin:auto} 3 | .icon-image{display:inline} 4 | h5.tabdescription{margin:10px 0} 5 | h4.tkaction{margin-top:10px;text-align:center} 6 | select#styledSelect_Tool_Capabilities,select#styledSelect_Scenarios{height:200px} 7 | /*ul#tutorialCategories li{min-width:110px}*/ 8 | ul#tutorialCategories li a{padding-left:0;padding-right:0; cursor:default;} 9 | div#viewDetails,div#startTutorial{min-width:60px;padding:5px} 10 | ul#tutorialCategories li#tabCapabilities {float:none;width:100% !important; margin:0 } 11 | div#stepsViewDetails { margin: 0 0 0 10px; position: relative; top: -3px;} 12 | h4.title { margin-bottom: 0; } 13 | 14 | ol ol { list-style: lower-alpha;} 15 | ol ol ol { list-style: lower-roman;} 16 | 17 | .library, .project, .application, .uicontrol { font-weight: bold; } 18 | .filepath { font-family: monospace; } 19 | .cmdname { font-weight: bold; font-family: monospace; } 20 | .option { font-family: monospace; } 21 | .kwd { font-weight: bold; } 22 | .varname { font-style : italic;} 23 | .parmname { font-weight: bold; font-family: monospace; white-space: nowrap; } 24 | .code { font-family: monospace; } 25 | .userinput { font-family: monospace; } 26 | .msgph { font-family: monospace; } 27 | .systemoutput { font-family: monospace; } -------------------------------------------------------------------------------- /src/css/main.scss: -------------------------------------------------------------------------------- 1 | @import "_settings547"; 2 | @import "_foundation547/foundation"; 3 | @import "_foundation547/normalize"; 4 | @import "_ibmSettings"; 5 | @import "_custom"; -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/back-right-previous_128-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/back-right-previous_128-orange.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/back-right-previous_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/back-right-previous_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/bee_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/bee_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/booklet-guide_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/booklet-guide_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/clock-time_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/clock-time_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/close-cancel-error_128-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/close-cancel-error_128-red.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/close-cancel-error_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/close-cancel-error_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/flow_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/flow_128.png -------------------------------------------------------------------------------- /src/images/icons/ibmdesign/success-confirmation_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/ibmdesign/success-confirmation_128.png -------------------------------------------------------------------------------- /src/images/icons/iib/changePerspective.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/changePerspective.png -------------------------------------------------------------------------------- /src/images/icons/iib/dfdlInheritedProperty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/dfdlInheritedProperty.png -------------------------------------------------------------------------------- /src/images/icons/iib/dfdlTestPlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/dfdlTestPlay.png -------------------------------------------------------------------------------- /src/images/icons/iib/exitNestedMapping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/exitNestedMapping.png -------------------------------------------------------------------------------- /src/images/icons/iib/sendMessage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/sendMessage.png -------------------------------------------------------------------------------- /src/images/icons/iib/startFlowExerciser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/startFlowExerciser.png -------------------------------------------------------------------------------- /src/images/icons/iib/stopFlowExerciser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/stopFlowExerciser.png -------------------------------------------------------------------------------- /src/images/icons/iib/viewPath.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ot4i/iib-tutorials/8757958aee3dfd2afc3bfda2bca794c4451da0bc/src/images/icons/iib/viewPath.png -------------------------------------------------------------------------------- /src/js/js2java.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Global variable to store tutorial JSON objects. 4 | */ 5 | 6 | var tutorials = []; 7 | 8 | function viewDetails(selectName) { 9 | //alert ("Inside viewDetails:" + "" + selectName); 10 | var selectBox = document.getElementById(selectName); 11 | 12 | var tutUrl = ""; 13 | 14 | //alert ("Selected index: " + selectBox.selectedIndex); 15 | if (tutorials !== undefined && selectBox.selectedIndex != -1) { 16 | //alert ("selected tutorial value " + selectBox.options[selectBox.selectedIndex].value); 17 | tutUrl = tutorials[ selectBox.options[selectBox.selectedIndex].value ].detailsURL; 18 | //alert (tutUrl) 19 | }//if 20 | 21 | var result = null; 22 | try { 23 | result = javaViewDetailsFunction(tutUrl); 24 | }//try 25 | catch(e){ 26 | alert( 'a java error in javaViewDetailsFunction occurred: ' + e.message ); 27 | }//catch 28 | }; 29 | 30 | function startTutorial(selectName) 31 | { 32 | //alert ("Inside startTutorial:" + "" + selectName); 33 | var selectBox = document.getElementById(selectName); 34 | //alert ("Select found. Size:" + selectBox.options.length); 35 | 36 | var tutUrl = ""; 37 | //alert ("Selected index: " + selectBox.selectedIndex); 38 | 39 | if (tutorials !== undefined && selectBox.selectedIndex != -1) { 40 | //alert ("selected tutorial value " + selectBox.options[selectBox.selectedIndex].value); 41 | //alert (tutorials[ selectBox.options[selectBox.selectedIndex].value ].name); 42 | tutUrl = tutorials[ selectBox.options[selectBox.selectedIndex].value ].stepsURL; 43 | //alert (tutUrl); 44 | }//if 45 | 46 | 47 | var result = null; 48 | try 49 | { 50 | result = javaOpenTutorialStepsFunction(tutUrl); 51 | 52 | }//try 53 | catch(e){ 54 | alert( 'a java error in javaOpenTutorialStepsFunction occurred: ' + e.message ); 55 | }//catch 56 | }; 57 | 58 | function startTutorialFromDetailsScreen() { 59 | var result = null; 60 | var tut = null; 61 | try { 62 | result = javaGetSelectedTutorialFunction(); 63 | 64 | var tutInfoString = result[0]; 65 | tut = JSON.parse( tutInfoString ); 66 | 67 | }//try 68 | catch(e){ 69 | alert( 'a java error in startTutorialFromDetailsScreen occurred: ' + e.message ); 70 | }//catch 71 | 72 | var tutUrl = null; 73 | if (tut !== undefined) 74 | tutUrl = tut.stepsURL; 75 | 76 | try { 77 | 78 | result = javaOpenTutorialStepsFunction(tutUrl); 79 | 80 | }//try 81 | catch(e){ 82 | alert( 'a java error in startTutorialFromDetailsScreen occurred: ' + e.message ); 83 | }//catch 84 | }; 85 | 86 | function resetSelection(selectName) 87 | { 88 | //alert ("Inside resetSelection new :" + "" + selectName); 89 | //reset selection 90 | try{ 91 | //get the appropriate select 92 | var selectBox = document.getElementById(selectName); 93 | //alert(selectBox + " - select box") 94 | selectBox.selectedIndex = -1; 95 | //alert(selectName + " selected index is: " + selectBox.selectedIndex); 96 | //passing the empty name should reset the selection 97 | result = javaSetSelectedTutorialFunction(""); 98 | //reset the description text 99 | var tutDesc = document.getElementById("tutorialDesc_" + selectName); 100 | //alert(result[0] + " " + result[1]); 101 | tutDesc.innerHTML = result[1]; 102 | }//try 103 | catch(e) 104 | { 105 | alert( 'a java error in resetSelection occurred: ' + e.message ); 106 | }//catch 107 | }; 108 | 109 | function changeFunc(selectName) 110 | { 111 | //alert ("Inside changeFunc:" + "" + selectName); 112 | 113 | //get the appropriate select 114 | var selectBox = document.getElementById(selectName); 115 | 116 | //find the appropriate tutorial desc 117 | var tutDesc = document.getElementById("tutorialDesc_" + selectName); 118 | 119 | //find the tutorial value 120 | var tutorialSelectValue = selectBox.options[selectBox.selectedIndex].value; 121 | //alert ("Descriptor with the name " + "tutorialDesc_" + selectName + " found :" + (tutorials !== undefined)) 122 | //alert ("tutorialSelectValue :" + tutorialSelectValue); 123 | //set the tutorial description 124 | if (tutorials !== undefined) 125 | { 126 | //alert ("shortDesc :" + tutorials[tutorialSelectValue].shortDesc); 127 | tutDesc.innerHTML = tutorials[tutorialSelectValue].shortDesc; 128 | } 129 | 130 | // 131 | // sets the global selected tutorial value to something or null 132 | // 133 | var result = null; 134 | try 135 | { 136 | // alert ("Calling a java function javaSetSelectedTutorialFunction with :" + tutorials[tutorialSelectValue].name); 137 | result = javaSetSelectedTutorialFunction( tutorials[tutorialSelectValue].name ); 138 | }//try 139 | catch(e) 140 | { 141 | alert( 'a java error in changeFunc occurred: ' + e.message ); 142 | }//catch 143 | }; 144 | 145 | function backToGallery() 146 | { 147 | var result = null; 148 | 149 | try 150 | { 151 | result = javaBackToGalleryFunction(); 152 | }//try 153 | catch(e) 154 | { 155 | alert( 'a java error in javaBackToGalleryFunction occurred: ' + e.message ); 156 | }//catch 157 | 158 | }; 159 | 160 | function fillList() 161 | { 162 | var selectedTutorialName = null; 163 | //check for the selected tutorial that may be set before the view was closed 164 | try 165 | { 166 | result = javaGetSelectedTutorialFunction(); 167 | 168 | //alert (result[0] + " " + result[0].length); 169 | if (result[0].length > 0) 170 | { 171 | var tutInfoString = result[0]; 172 | selectedTutorialName = JSON.parse( tutInfoString ).name; 173 | // alert ("Selected option found: " + selectedTutorialName) 174 | } 175 | } 176 | catch(e) 177 | { 178 | alert( 'a java error in javaGetSelectedTutorialFunction occurred: ' + e.message ); 179 | }//catch 180 | var result = null; 181 | //alert("Inside fillList()"); 182 | try { 183 | result = javaGetTutorialsInfoFunction(); 184 | 185 | if (result !== undefined){ 186 | for (var i = 0; i < result.length; i++){ 187 | var tutInfoString = result[i]; 188 | //alert(tutInfoString); 189 | var tut = JSON.parse( tutInfoString ); 190 | tutorials.push(tut); 191 | }//for 192 | }//if 193 | }//try 194 | catch(e){ 195 | alert( 'a java error in javaGetTutorialsInfoFunction occurred: ' + e.message ); 196 | }//catch 197 | //add the tutorials to the select widget. 198 | var Ids = ["styledSelect_Tool_Capabilities"]; 199 | 200 | //loop over all the tutorials in the list 201 | for (var j = 0; j < tutorials.length; j++) 202 | { 203 | //for each tutorial add an option to a proper select. 204 | //So iterate over the given selects 205 | for (var i=0; i -1) 214 | { 215 | //if it is the right category add it to the option of the select 216 | //alert("Name: " + tutorials[j].name + ", value: " + j) 217 | //use iterator j as a tutorial identifier as it will be used later to locate a tutorial in the list 218 | if (selectedTutorialName && tutorials[j].name == selectedTutorialName) 219 | selectBox.options[selectBox.options.length] =new Option(tutorials[j].name, j, false, true); 220 | else 221 | selectBox.options[selectBox.options.length] =new Option(tutorials[j].name, j); 222 | } 223 | } 224 | 225 | } 226 | } 227 | }; -------------------------------------------------------------------------------- /src/js/js2java_steps.js: -------------------------------------------------------------------------------- 1 | function importArtifacts() { 2 | 3 | var result = null; 4 | var tut = null; 5 | try { 6 | 7 | result = javaGetSelectedTutorialFunction(); 8 | 9 | var tutInfoString = result[0]; 10 | tut = JSON.parse( tutInfoString ); 11 | 12 | }//try 13 | catch(e){ 14 | alert( 'a java error in javaGetSelectedTutorialFunction occurred: ' + e.message ); 15 | }//catch 16 | 17 | if (tut !== undefined){ 18 | 19 | try { 20 | result = javaImportPIFileFunction(tut.name,tut.zipURL); 21 | }//try 22 | catch(e){ 23 | alert( 'a java error in javaImportPIFileFunction occurred: ' + e.message ); 24 | }//catch 25 | 26 | }//if 27 | }; 28 | 29 | 30 | function openResource(id) { 31 | try { 32 | result = javaOpenResourceEditorTutorialFunction(id); 33 | }//try 34 | catch(e){ 35 | alert( 'a java error in javaImportPIFileFunction occurred: ' + e.message ); 36 | }//catch 37 | }; 38 | 39 | function cleanUp() { 40 | 41 | var result = null; 42 | var tut = null; 43 | try { 44 | result = javaGetSelectedTutorialFunction(); 45 | var tutInfoString = result[0]; 46 | tut = JSON.parse( tutInfoString ); 47 | 48 | }//try 49 | catch(e){ 50 | alert( 'a java error in javaGetSelectedTutorialFunction occurred: ' + e.message ); 51 | }//catch 52 | 53 | if (tut !== undefined){ 54 | 55 | try { 56 | result = javaUnDeployResourcesFunction(); 57 | }//try 58 | catch(e){ 59 | alert( 'a java error in javaUnDeployResourcesFunction occurred: ' + e.message ); 60 | }//catch 61 | 62 | try { 63 | //alert(tut.projects); 64 | result = javaDeleteProjectsFromWorkspaceFunction(tut.projects.split(":")); 65 | }//try 66 | catch(e){ 67 | alert( 'a java error in javaDeleteProjectsFromWorkspaceFunction occurred: ' + e.message ); 68 | }//catch 69 | }//if 70 | }; 71 | 72 | function deployArtifacts() { 73 | var result = null; 74 | var tut = null; 75 | try { 76 | 77 | result = javaGetSelectedTutorialFunction(); 78 | 79 | var tutInfoString = result[0]; 80 | tut = JSON.parse( tutInfoString ); 81 | 82 | }//try 83 | catch(e){ 84 | alert( 'a java error in javaGetSelectedTutorialFunction occurred: ' + e.message ); 85 | }//catch 86 | 87 | if (tut !== undefined){ 88 | 89 | try { 90 | result = javaDeployBARFunction( tut.barFile ); 91 | }//try 92 | catch(e){ 93 | alert( 'a java error in javaDeployBARFunction occurred: ' + e.message ); 94 | }//catch 95 | 96 | 97 | }//if 98 | 99 | 100 | }; 101 | 102 | function backToGallery() { 103 | var result=null; 104 | 105 | try { 106 | result = javaBackToGalleryFunction(); 107 | }//try 108 | catch(e){ 109 | alert( 'a java error in javaBackToGalleryFunction occurred: ' + e.message ); 110 | }//catch 111 | 112 | 113 | 114 | 115 | }; 116 | 117 | 118 | function openExternalBrowser(externalURL) { 119 | 120 | 121 | var result = null; 122 | 123 | try { 124 | result = javaOpenURLInExternalBrowserFunction( externalURL ); 125 | }//try 126 | catch(e){ 127 | alert( 'a java error in javaOpenURLInExternalBrowserFunction occurred: ' + e.message ); 128 | }//catch 129 | 130 | 131 | }; 132 | 133 | function openHelpSystem(helpURL) { 134 | 135 | var result = null; 136 | 137 | try { 138 | result = javaOpenURLInHelpSystemFunction( helpURL); 139 | }//try 140 | catch(e){ 141 | alert( 'a java error in javaOpenURLInHelpSystemFunction occurred: ' + e.message ); 142 | }//catch 143 | }; 144 | 145 | 146 | function viewDetails() { 147 | var result = null; 148 | var tut = null; 149 | try { 150 | 151 | result = javaGetSelectedTutorialFunction(); 152 | 153 | var tutInfoString = result[0]; 154 | tut = JSON.parse( tutInfoString ); 155 | 156 | }//try 157 | catch(e){ 158 | alert( 'a java error in javaGetSelectedTutorialFunction occurred: ' + e.message ); 159 | }//catch 160 | 161 | if (tut !== undefined){ 162 | 163 | try { 164 | result = javaBackToDetailsFunction(tut.detailsURL); 165 | }//try 166 | catch(e){ 167 | alert( 'a java error in javaBackToDetailsFunction occurred: ' + e.message ); 168 | }//catch 169 | 170 | }//if 171 | 172 | }; 173 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | $(document).foundation(); 2 | 3 | function show(clickId) { 4 | var showdiv = document.getElementById(clickId); 5 | var tabUl = document.querySelector('.tabs'); 6 | var tabs = tabUl.querySelectorAll('.tab-title'); 7 | var tabcontentdivs = document.querySelector('.tabs-content'); 8 | var tabcontentpanels = tabcontentdivs.querySelectorAll('.content'); 9 | 10 | for (var j=0;jg;g++)f[e[g]]=c(f[e[g]],f);deviceIsAndroid&&(a.addEventListener("mouseover",this.onMouse,!0),a.addEventListener("mousedown",this.onMouse,!0),a.addEventListener("mouseup",this.onMouse,!0)),a.addEventListener("click",this.onClick,!0),a.addEventListener("touchstart",this.onTouchStart,!1),a.addEventListener("touchmove",this.onTouchMove,!1),a.addEventListener("touchend",this.onTouchEnd,!1),a.addEventListener("touchcancel",this.onTouchCancel,!1),Event.prototype.stopImmediatePropagation||(a.removeEventListener=function(b,c,d){var e=Node.prototype.removeEventListener;"click"===b?e.call(a,b,c.hijacked||c,d):e.call(a,b,c,d)},a.addEventListener=function(b,c,d){var e=Node.prototype.addEventListener;"click"===b?e.call(a,b,c.hijacked||(c.hijacked=function(a){a.propagationStopped||c(a)}),d):e.call(a,b,c,d)}),"function"==typeof a.onclick&&(d=a.onclick,a.addEventListener("click",function(a){d(a)},!1),a.onclick=null)}}var deviceIsAndroid=navigator.userAgent.indexOf("Android")>0,deviceIsIOS=/iP(ad|hone|od)/.test(navigator.userAgent),deviceIsIOS4=deviceIsIOS&&/OS 4_\d(_\d)?/.test(navigator.userAgent),deviceIsIOSWithBadTarget=deviceIsIOS&&/OS ([6-9]|\d{2})_\d/.test(navigator.userAgent),deviceIsBlackBerry10=navigator.userAgent.indexOf("BB10")>0;FastClick.prototype.needsClick=function(a){"use strict";switch(a.nodeName.toLowerCase()){case"button":case"select":case"textarea":if(a.disabled)return!0;break;case"input":if(deviceIsIOS&&"file"===a.type||a.disabled)return!0;break;case"label":case"video":return!0}return/\bneedsclick\b/.test(a.className)},FastClick.prototype.needsFocus=function(a){"use strict";switch(a.nodeName.toLowerCase()){case"textarea":return!0;case"select":return!deviceIsAndroid;case"input":switch(a.type){case"button":case"checkbox":case"file":case"image":case"radio":case"submit":return!1}return!a.disabled&&!a.readOnly;default:return/\bneedsfocus\b/.test(a.className)}},FastClick.prototype.sendClick=function(a,b){"use strict";var c,d;document.activeElement&&document.activeElement!==a&&document.activeElement.blur(),d=b.changedTouches[0],c=document.createEvent("MouseEvents"),c.initMouseEvent(this.determineEventType(a),!0,!0,window,1,d.screenX,d.screenY,d.clientX,d.clientY,!1,!1,!1,!1,0,null),c.forwardedTouchEvent=!0,a.dispatchEvent(c)},FastClick.prototype.determineEventType=function(a){"use strict";return deviceIsAndroid&&"select"===a.tagName.toLowerCase()?"mousedown":"click"},FastClick.prototype.focus=function(a){"use strict";var b;deviceIsIOS&&a.setSelectionRange&&0!==a.type.indexOf("date")&&"time"!==a.type?(b=a.value.length,a.setSelectionRange(b,b)):a.focus()},FastClick.prototype.updateScrollParent=function(a){"use strict";var b,c;if(b=a.fastClickScrollParent,!b||!b.contains(a)){c=a;do{if(c.scrollHeight>c.offsetHeight){b=c,a.fastClickScrollParent=c;break}c=c.parentElement}while(c)}b&&(b.fastClickLastScrollTop=b.scrollTop)},FastClick.prototype.getTargetElementFromEventTarget=function(a){"use strict";return a.nodeType===Node.TEXT_NODE?a.parentNode:a},FastClick.prototype.onTouchStart=function(a){"use strict";var b,c,d;if(a.targetTouches.length>1)return!0;if(b=this.getTargetElementFromEventTarget(a.target),c=a.targetTouches[0],deviceIsIOS){if(d=window.getSelection(),d.rangeCount&&!d.isCollapsed)return!0;if(!deviceIsIOS4){if(c.identifier&&c.identifier===this.lastTouchIdentifier)return a.preventDefault(),!1;this.lastTouchIdentifier=c.identifier,this.updateScrollParent(b)}}return this.trackingClick=!0,this.trackingClickStart=a.timeStamp,this.targetElement=b,this.touchStartX=c.pageX,this.touchStartY=c.pageY,a.timeStamp-this.lastClickTimec||Math.abs(b.pageY-this.touchStartY)>c?!0:!1},FastClick.prototype.onTouchMove=function(a){"use strict";return this.trackingClick?((this.targetElement!==this.getTargetElementFromEventTarget(a.target)||this.touchHasMoved(a))&&(this.trackingClick=!1,this.targetElement=null),!0):!0},FastClick.prototype.findControl=function(a){"use strict";return void 0!==a.control?a.control:a.htmlFor?document.getElementById(a.htmlFor):a.querySelector("button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea")},FastClick.prototype.onTouchEnd=function(a){"use strict";var b,c,d,e,f,g=this.targetElement;if(!this.trackingClick)return!0;if(a.timeStamp-this.lastClickTime100||deviceIsIOS&&window.top!==window&&"input"===d?(this.targetElement=null,!1):(this.focus(g),this.sendClick(g,a),deviceIsIOS&&"select"===d||(this.targetElement=null,a.preventDefault()),!1);return deviceIsIOS&&!deviceIsIOS4&&(e=g.fastClickScrollParent,e&&e.fastClickLastScrollTop!==e.scrollTop)?!0:(this.needsClick(g)||(a.preventDefault(),this.sendClick(g,a)),!1)},FastClick.prototype.onTouchCancel=function(){"use strict";this.trackingClick=!1,this.targetElement=null},FastClick.prototype.onMouse=function(a){"use strict";return this.targetElement?a.forwardedTouchEvent?!0:a.cancelable&&(!this.needsClick(this.targetElement)||this.cancelNextClick)?(a.stopImmediatePropagation?a.stopImmediatePropagation():a.propagationStopped=!0,a.stopPropagation(),a.preventDefault(),!1):!0:!0},FastClick.prototype.onClick=function(a){"use strict";var b;return this.trackingClick?(this.targetElement=null,this.trackingClick=!1,!0):"submit"===a.target.type&&0===a.detail?!0:(b=this.onMouse(a),b||(this.targetElement=null),b)},FastClick.prototype.destroy=function(){"use strict";var a=this.layer;deviceIsAndroid&&(a.removeEventListener("mouseover",this.onMouse,!0),a.removeEventListener("mousedown",this.onMouse,!0),a.removeEventListener("mouseup",this.onMouse,!0)),a.removeEventListener("click",this.onClick,!0),a.removeEventListener("touchstart",this.onTouchStart,!1),a.removeEventListener("touchmove",this.onTouchMove,!1),a.removeEventListener("touchend",this.onTouchEnd,!1),a.removeEventListener("touchcancel",this.onTouchCancel,!1)},FastClick.notNeeded=function(a){"use strict";var b,c,d;if("undefined"==typeof window.ontouchstart)return!0;if(c=+(/Chrome\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1]){if(!deviceIsAndroid)return!0;if(b=document.querySelector("meta[name=viewport]")){if(-1!==b.content.indexOf("user-scalable=no"))return!0;if(c>31&&document.documentElement.scrollWidth<=window.outerWidth)return!0}}if(deviceIsBlackBerry10&&(d=navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/),d[1]>=10&&d[2]>=3&&(b=document.querySelector("meta[name=viewport]")))){if(-1!==b.content.indexOf("user-scalable=no"))return!0;if(document.documentElement.scrollWidth<=window.outerWidth)return!0}return"none"===a.style.msTouchAction?!0:!1},FastClick.attach=function(a,b){"use strict";return new FastClick(a,b)},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){"use strict";return FastClick}):"undefined"!=typeof module&&module.exports?(module.exports=FastClick.attach,module.exports.FastClick=FastClick):window.FastClick=FastClick; -------------------------------------------------------------------------------- /src/js/vendor/jquery.cookie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Cookie Plugin v1.4.1 3 | * https://github.com/carhartl/jquery-cookie 4 | * 5 | * Copyright 2013 Klaus Hartl 6 | * Released under the MIT license 7 | */ 8 | !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}}); -------------------------------------------------------------------------------- /src/js/vendor/placeholder.js: -------------------------------------------------------------------------------- 1 | /*! http://mths.be/placeholder v2.0.8 by @mathias */ 2 | !function(a,b,c){function d(a){var b={},d=/^jQuery\d+$/;return c.each(a.attributes,function(a,c){c.specified&&!d.test(c.name)&&(b[c.name]=c.value)}),b}function e(a,b){var d=this,e=c(d);if(d.value==e.attr("placeholder")&&e.hasClass("placeholder"))if(e.data("placeholder-password")){if(e=e.hide().next().show().attr("id",e.removeAttr("id").data("placeholder-id")),a===!0)return e[0].value=b;e.focus()}else d.value="",e.removeClass("placeholder"),d==g()&&d.select()}function f(){var a,b=this,f=c(b),g=this.id;if(""==b.value){if("password"==b.type){if(!f.data("placeholder-textinput")){try{a=f.clone().attr({type:"text"})}catch(h){a=c("").attr(c.extend(d(this),{type:"text"}))}a.removeAttr("name").data({"placeholder-password":f,"placeholder-id":g}).bind("focus.placeholder",e),f.data({"placeholder-textinput":a,"placeholder-id":g}).before(a)}f=f.removeAttr("id").hide().prev().attr("id",g).show()}f.addClass("placeholder"),f[0].value=f.attr("placeholder")}else f.removeClass("placeholder")}function g(){try{return b.activeElement}catch(a){}}var h,i,j="[object OperaMini]"==Object.prototype.toString.call(a.operamini),k="placeholder"in b.createElement("input")&&!j,l="placeholder"in b.createElement("textarea")&&!j,m=c.fn,n=c.valHooks,o=c.propHooks;k&&l?(i=m.placeholder=function(){return this},i.input=i.textarea=!0):(i=m.placeholder=function(){var a=this;return a.filter((k?"textarea":":input")+"[placeholder]").not(".placeholder").bind({"focus.placeholder":e,"blur.placeholder":f}).data("placeholder-enabled",!0).trigger("blur.placeholder"),a},i.input=k,i.textarea=l,h={get:function(a){var b=c(a),d=b.data("placeholder-password");return d?d[0].value:b.data("placeholder-enabled")&&b.hasClass("placeholder")?"":a.value},set:function(a,b){var d=c(a),h=d.data("placeholder-password");return h?h[0].value=b:d.data("placeholder-enabled")?(""==b?(a.value=b,a!=g()&&f.call(a)):d.hasClass("placeholder")?e.call(a,!0,b)||(a.value=b):a.value=b,d):a.value=b}},k||(n.input=h,o.value=h),l||(n.textarea=h,o.value=h),c(function(){c(b).delegate("form","submit.placeholder",function(){var a=c(".placeholder",this).each(e);setTimeout(function(){a.each(f)},10)})}),c(a).bind("beforeunload.placeholder",function(){c(".placeholder").each(function(){this.value=""})}))}(this,document,jQuery); -------------------------------------------------------------------------------- /src/tutorialManager/_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "version":"0.5", 3 | "description":"Tutorial Framework with Foundation5.", 4 | "sitemap": 5 | { 6 | "layout": false 7 | }, 8 | "siteJsonTree": 9 | { 10 | "layout": false 11 | }, 12 | "description":"Tutorial Listing for Tutorial Framework.", 13 | "separatorRepoMetadataJSON":{}, 14 | "_comment":"Content from this URL https://github.com/ot4i/ot4i.github.io/blob/master/tutorials/en/repo_metadata.json", 15 | "managerUrl":"http://ot4i.github.io/tutorials", 16 | "managerVersion": "1.0", 17 | "downloadableForLocalInstall":"https://github.com/ot4i/tutorials/releases/download/localInstall.zip", 18 | "separatorFrameworkListJSON":{}, 19 | "header": 20 | { 21 | "lang":"en-us", 22 | "charset":"UTF-8", 23 | "metaDescription":"IBM Integration Bus V10 Tutorial", 24 | "metaAuthor":"IBM", 25 | "keywords":"keywords", 26 | "robots":"index,follow", 27 | "source":"IBM Integration Bus V10 Tutorial", 28 | 29 | "repoUrlProtocol":"http://", 30 | "repoUrlSite":"ot4i.github.io", 31 | 32 | "repoUrlFilepathCss":"/iib-tutorials/css/main.css", 33 | "repoUrlFilepathCssApp":"/iib-tutorials/css/app.css", 34 | "repoUrlFilepathJs":"/iib-tutorials/js/main.js", 35 | 36 | "repoUrlFilepathFoundationModernizr":"/iib-tutorials/js/vendor/modernizr.js", 37 | "repoUrlFilepathFoundationJquery":"/iib-tutorials/js/vendor/jquery.js", 38 | "repoUrlFilepathFoundationJs":"/iib-tutorials/js/vendor/foundation.min.js", 39 | 40 | "repoUrlFilepathJson2":"/iib-tutorials/js/json2.js", 41 | "repoUrlFilepathJs2java":"/iib-tutorials/js/js2java.js", 42 | "repoUrlFilepathJs2javaSteps":"/iib-tutorials/js/js2java_steps.js", 43 | "repoUrlFilepathActionIcon":"/iib-tutorials/images/icons/ibmdesign/back-right-previous_128-orange.png", 44 | "repoUrlFilepathExitIcon":"/iib-tutorials/images/icons/ibmdesign/close-cancel-error_128-red.png", 45 | "repoUrlFilepathClockIcon":"/iib-tutorials/images/icons/ibmdesign/clock-time_128.png" 46 | } 47 | } -------------------------------------------------------------------------------- /src/tutorialManager/_layout.ejs: -------------------------------------------------------------------------------- 1 | <% /* DNA-Comment: This DOCTYPE means this is an HTML5 document - http://www.w3.org/html/wg/drafts/html/master/single-page.html */ %> 2 | 3 | <% if (public._data) { %> <% /* DNA-Comment: Make sure we have header data */ %> 4 | <% var header = public._data.header %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | <% /* DNA-Comment: HTML 5 tag for encoding, replaced with HTTP content type declaration for older browsers */ %> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | <%= header.source %> 26 | 27 | <% /* DNA-Comment: Foundation5 5.4.7 CSS */ %> 28 | <% /* DNA-Comment: Foundation5 5.4.7 overrides */ %> 29 | 30 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 31 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 32 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 33 | <% /* DNA-Comment: Foundation5 5.4.7 modernizr */ %> 34 | 35 | 36 | 37 | <%- yield %><% /* DNA-Comment: Insert content here. */ %> 38 | <% /* DNA-Comment: Foundation5 5.4.7 jquery */ %> 39 | <% /* DNA-Comment: Foundation5 5.4.7 JavaScript */ %> 40 | <% /* DNA-Comment: Custom JavaScript */ %> 41 | 42 | 43 | <% } %> 44 | -------------------------------------------------------------------------------- /src/tutorialManager/en/TutorialManager.ejs: -------------------------------------------------------------------------------- 1 | <% var categoryTools = public.en._data.categories[0] %> <% /* DNA-Comment: Category for Tools Capabilities */ %> 2 | <% var tutorialTools = public.en._data.categories[0].tutorials %> <% /* DNA-Comment: Tutorials for Tools Capabilities */ %> 3 | 4 | <% var catagoryScenarios = public.en._data.categories[1] %> <% /* DNA-Comment: Category for Scenarios */ %> 5 | <% var tutorialScenarios = public.en._data.categories[1].tutorials %><% /* DNA-Comment: Tutorials for Scenarios */ %> 6 | 7 | <% var content = public.en._data.pageContent.navItems %><% /* DNA-Comment: Page labels */ %> 8 | 9 | 10 |
11 |
12 |
13 |
14 |

<%= content.pageListing.headlineSub %>

15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 |
23 |
<%= content.pageListing.section1 %>
<%= content.pageListing.section2 %> 24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 36 |
37 |
38 |
39 |
<%= content.pageListing.tabTools.description %>
40 |
41 | 43 |
44 |

45 | <%= content._common.select %> 46 |

47 | 48 |
49 |
50 | 51 |
<%= content.pageListing.buttonViewDetails.text %> 52 |
53 | 54 |
55 |
56 | 57 |
<%= content.pageListing.buttonStartTutorial.text %> 58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
-------------------------------------------------------------------------------- /src/tutorials/_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "version":"0.5", 3 | "description":"Tutorial Framework with Foundation5.", 4 | "sitemap": 5 | { 6 | "layout": false 7 | }, 8 | "siteJsonTree": 9 | { 10 | "layout": false 11 | }, 12 | "description":"Tutorial Listing for Tutorial Framework.", 13 | "separatorRepoMetadataJSON":{}, 14 | "_comment":"Content from this URL https://github.com/ot4i/ot4i.github.io/blob/master/tutorials/en/repo_metadata.json", 15 | "managerUrl":"http://ot4i.github.io/tutorials", 16 | "managerVersion": "1.0", 17 | "downloadableForLocalInstall":"https://github.com/ot4i/tutorials/releases/download/localInstall.zip", 18 | "separatorFrameworkListJSON":{}, 19 | "header": 20 | { 21 | "lang":"en-us", 22 | "charset":"UTF-8", 23 | "metaDescription":"IBM Integration Bus V10 Tutorial", 24 | "metaAuthor":"IBM", 25 | "keywords":"keywords", 26 | "robots":"index,follow", 27 | "source":"IBM Integration Bus V10 Tutorial", 28 | 29 | "repoUrlProtocol":"http://", 30 | "repoUrlSite":"ot4i.github.io", 31 | 32 | "repoUrlFilepathCss":"/iib-tutorials/css/main.css", 33 | "repoUrlFilepathCssApp":"/iib-tutorials/css/app.css", 34 | "repoUrlFilepathJs":"/iib-tutorials/js/main.js", 35 | 36 | "repoUrlFilepathFoundationModernizr":"/iib-tutorials/js/vendor/modernizr.js", 37 | "repoUrlFilepathFoundationJquery":"/iib-tutorials/js/vendor/jquery.js", 38 | "repoUrlFilepathFoundationJs":"/iib-tutorials/js/vendor/foundation.min.js", 39 | 40 | "repoUrlFilepathJson2":"/iib-tutorials/js/json2.js", 41 | "repoUrlFilepathJs2java":"/iib-tutorials/js/js2java.js", 42 | "repoUrlFilepathJs2javaSteps":"/iib-tutorials/js/js2java_steps.js", 43 | "repoUrlFilepathActionIcon":"/iib-tutorials/images/icons/ibmdesign/back-right-previous_128-orange.png", 44 | "repoUrlFilepathExitIcon":"/iib-tutorials/images/icons/ibmdesign/close-cancel-error_128-red.png", 45 | "repoUrlFilepathClockIcon":"/iib-tutorials/images/icons/ibmdesign/clock-time_128.png" 46 | } 47 | } -------------------------------------------------------------------------------- /src/tutorials/_includes/details.ejs: -------------------------------------------------------------------------------- 1 | <% var header = public._data.header %> 2 | <% var content = thisTutorial.pageContent.navItems %> 3 | <% var tutorialCommon = thisTutorial.tutorial._common %> 4 | <% var tutorialDetails = thisTutorial.tutorial.pageDetails %> 5 | 6 | 7 |
8 |
9 |

10 |
11 |
12 |
13 |
14 |

<%= tutorialCommon.name %>

15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
<%= tutorialCommon.shortDescription %>
24 |
25 |
26 |
27 |
28 |
29 |
<%= tutorialDetails.summary.overviewName %>
30 |
31 |
32 | <% var sections = tutorialDetails.summary.sections %> 33 | <% for (var i in sections) { %> 34 |

<%= sections[i].section %>

35 | <% } %> 36 |
37 | 54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 | <%= tutorialCommon.durationText %> <%= tutorialCommon.durationTime %>. 65 |
66 |
67 |
68 | 69 | 71 | 72 | 74 |
75 |
76 |
77 |
78 |
79 |
<%= tutorialDetails.topicsName %>
80 |
    81 | <% var topics = tutorialDetails.topicList %> 82 | <% for (var i in topics) { %> 83 |
  • <%= topics[i].title %>
    • 84 | <% } %> 85 |
86 |
87 |
88 |
<%= tutorialDetails.outcomesName %>
89 |
    90 | <% var outcomes = tutorialDetails.outcomeList %> 91 | <% for (var i in outcomes) { %> 92 |
  • <%= outcomes[i].title %>
    • 93 | <% } %> 94 |
95 |
96 |
97 |
98 |
99 | -------------------------------------------------------------------------------- /src/tutorials/_layout.ejs: -------------------------------------------------------------------------------- 1 | <% /* DNA-Comment: This DOCTYPE means this is an HTML5 document - http://www.w3.org/html/wg/drafts/html/master/single-page.html */ %> 2 | 3 | <% if (public._data) { %> <% /* DNA-Comment: Make sure we have header data */ %> 4 | <% var header = public._data.header %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | <% /* DNA-Comment: HTML 5 tag for encoding, replaced with HTTP content type declaration for older browsers */ %> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | <%= header.source %> 26 | 27 | <% /* DNA-Comment: Foundation5 5.4.7 CSS */ %> 28 | <% /* DNA-Comment: Foundation5 5.4.7 overrides */ %> 29 | 30 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 31 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 32 | <% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %> 33 | <% /* DNA-Comment: Foundation5 5.4.7 modernizr */ %> 34 | 35 | 36 | 37 | <%- yield %><% /* DNA-Comment: Insert content here. */ %> 38 | <% /* DNA-Comment: Foundation5 5.4.7 jquery */ %> 39 | <% /* DNA-Comment: Foundation5 5.4.7 JavaScript */ %> 40 | <% /* DNA-Comment: Custom JavaScript */ %> 41 | 42 | 43 | <% } %> 44 | -------------------------------------------------------------------------------- /src/tutorials/tutorialExample/en/details.ejs: -------------------------------------------------------------------------------- 1 | <% var thisTutorial = public.tutorialExample.en._data %> 2 | <%- include ../../_includes/details %> -------------------------------------------------------------------------------- /src/tutorials/tutorialExample/en/steps.ejs: -------------------------------------------------------------------------------- 1 | <% var thisTutorial = public.tutorialExample.en._data %> 2 | <%- include ../../_includes/steps %> --------------------------------------------------------------------------------