wendtth65566
/
MDT_5_2_projekt
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

played around with foundation included fa icons

master
Thilo Wendt 4 years ago
parent
e45e508fe7
commit
0412aab972
38 changed files with 24862 additions and 0 deletions
Unified View Show Diff Stats
  1. 4
    0
      foundation_shopping_list/.babelrc
  2. 3
    0
      foundation_shopping_list/.bowerrc
  3. 5
    0
      foundation_shopping_list/.browserslistrc
  4. 8
    0
      foundation_shopping_list/.gitignore
  5. 5
    0
      foundation_shopping_list/CHANGELOG.md
  6. 896
    0
      foundation_shopping_list/TAGS
  7. 30
    0
      foundation_shopping_list/config.yml
  8. 173
    0
      foundation_shopping_list/gulpfile.babel.js
  9. 13246
    0
      foundation_shopping_list/package-lock.json
  10. 58
    0
      foundation_shopping_list/package.json
  11. 70
    0
      foundation_shopping_list/readme.md
  12. BIN
      foundation_shopping_list/src/assets/img/asparagus.jpg
  13. BIN
      foundation_shopping_list/src/assets/img/veg1.jpg
  14. BIN
      foundation_shopping_list/src/assets/img/veg2.jpg
  15. BIN
      foundation_shopping_list/src/assets/img/veg3.jpg
  16. 17
    0
      foundation_shopping_list/src/assets/js/app.js
  17. 83
    0
      foundation_shopping_list/src/assets/js/lib/foundation-explicit-pieces.js
  18. 895
    0
      foundation_shopping_list/src/assets/scss/_settings.scss
  19. 74
    0
      foundation_shopping_list/src/assets/scss/app.scss
  20. 0
    0
      foundation_shopping_list/src/assets/scss/components/.gitkeep
  21. 13
    0
      foundation_shopping_list/src/assets/scss/components/_carousel.scss
  22. 24
    0
      foundation_shopping_list/src/assets/scss/components/_navigation.scss
  23. 0
    0
      foundation_shopping_list/src/assets/scss/global/_typography.scss
  24. 1
    0
      foundation_shopping_list/src/assets/webfonts
  25. 0
    0
      foundation_shopping_list/src/data/.gitkeep
  26. 13
    0
      foundation_shopping_list/src/data/global.yml
  27. 14
    0
      foundation_shopping_list/src/data/products.yml
  28. 23
    0
      foundation_shopping_list/src/layouts/default.html
  29. 0
    0
      foundation_shopping_list/src/pages/index.html
  30. 0
    0
      foundation_shopping_list/src/pages/meat.html
  31. 0
    0
      foundation_shopping_list/src/pages/milk.html
  32. 0
    0
      foundation_shopping_list/src/pages/vegetables.html
  33. 0
    0
      foundation_shopping_list/src/partials/.gitkeep
  34. 18
    0
      foundation_shopping_list/src/partials/carousel.html
  35. 7
    0
      foundation_shopping_list/src/partials/navigation.html
  36. 355
    0
      foundation_shopping_list/src/styleguide/index.md
  37. 135
    0
      foundation_shopping_list/src/styleguide/template.html
  38. 8692
    0
      foundation_shopping_list/yarn.lock

+ 4
- 0
foundation_shopping_list/.babelrc View File

{
"presets": [ "@babel/preset-env" ],
"compact": false
}

+ 3
- 0
foundation_shopping_list/.bowerrc View File

{
"directory": "bower_components"
}

+ 5
- 0
foundation_shopping_list/.browserslistrc View File

# Browsers that we support
last 2 versions
ie >= 9
ios >= 7
android >= 4.4

+ 8
- 0
foundation_shopping_list/.gitignore View File

.DS_Store
node_modules
npm-debug.log
bower_components
dist
*.swp
.cache
.idea

+ 5
- 0
foundation_shopping_list/CHANGELOG.md View File

# Changelog

## Version 1.0 (November 19, 2015)

Initial release.

+ 896
- 0
foundation_shopping_list/TAGS View File

dist/assets/css/app.css,95965
@media print,8,127
@media print, screen and 8,127
.fa,fa18,472
.fas,fas19,477
.far,far20,483
.fal,fal21,489
.fad,fad22,495
.fa.fa-pull-left,left102,1601
.fas.fa-pull-left,left103,1619
.far.fa-pull-left,left104,1638
.fal.fa-pull-left,left105,1657
.fa.fa-pull-right,right109,1721
.fas.fa-pull-right,right110,1740
.far.fa-pull-right,right111,1760
.fal.fa-pull-right,right112,1780
.fa-flip-both,both170,3511
:root .fa-flip-horizontal,horizontal179,3825
:root .fa-flip-vertical,vertical180,3852
.fa-stack-1x,x193,4089
.sr-only-focusable:active,active4535,71382
.fa,fa4555,72193
b,4607,73586
code,4611,73624
kbd,4612,73630
sub,4620,73729
button,4636,73912
input,4637,73920
optgroup,4638,73927
select,4639,73937
button,4646,74036
button,4650,74076
button,4654,74120
button::-moz-focus-inner,inner4660,74212
[type="button"]::-moz-focus-inner,inner4661,74238
[type="reset"]::-moz-focus-inner,inner4662,74273
button:-moz-focusring,focusring4667,74382
[type="button"]:-moz-focusring,focusring4668,74405
[type="reset"]:-moz-focusring,focusring4669,74437
-webkit-box-sizing: border-box;box4693,74868
box-sizing: border-box;box4694,74902
padding:padding4695,74936
[type="number"]::-webkit-inner-spin-button,button4697,74953
-webkit-appearance: textfield;4702,75079
outline-offset: -2px;px4703,75112
display: none;4719,75373
display: none;4722,75404
*::before,before4733,75620
.map_canvas img,4767,76291
.map_canvas embed,4768,76308
.map_canvas object,4769,76327
.mqa-display img,4770,76347
.mqa-display embed,4771,76365
button,4791,76725
input,4792,76733
optgroup,4793,76740
select,4794,76750
[type='text']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus,focus4830,77982
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,focus4830,77982
input:disabled,disabled4847,78867
input:disabled, input[input4847,78867
textarea:disabled,disabled4848,78900
-webkit-appearance: none;4855,79030
-moz-appearance: none;4856,79058
appearance: none;4857,79086
border-radius:radius4858,79114
margin: 0 0 1rem;rem4882,79505
[type='checkbox'] + label,4884,79528
[type='checkbox'] + label[label4891,79700
margin-right: 0.5rem;rem4897,79842
.input-group > :first-child,child4930,80469
border-radius:radius4931,80553
.input-group > :last-child,child4932,80583
border-radius:radius4933,80665
.input-group-label,label4935,80696
.input-group-label, .input-group-field,field4935,80696
.input-group-label, .input-group-field, .input-group-button,button4935,80696
.input-group-label, .input-group-field, .input-group-button, .input-group-button a,4935,80696
.input-group-button input,4936,80780
.input-group-button button,4937,80807
.input-group-button a,4986,81920
.input-group-button input,4987,81945
.input-group-button button,4988,81974
@media screen and 5041,83548
select:not(not5062,84653
.is-invalid-input:not(not5066,84726
.is-invalid-input:not(not5069,84814
.is-invalid-input:not(not5071,84897
.is-invalid-input:not(not5073,84971
.is-invalid-input:not(not5075,85049
.is-invalid-input:not(not5077,85128
div,5093,85429
dl,5094,85434
dt,5095,85438
dd,5096,85442
ul,5097,85446
ol,5098,85450
li,5099,85454
h1,5100,85458
h2,5101,85462
h3,5102,85466
h4,5103,85470
h5,5104,85474
h6,5105,85478
pre,5106,85482
form,5107,85487
p,5108,85493
blockquote,5109,85496
th,5110,85508
em,5121,85657
strong,5126,85714
h1,5135,85827
h1, .h1,h15135,85827
h2,5136,85836
h2, .h2,h25136,85836
h3,5137,85845
h3, .h3,h35137,85845
h4,5138,85854
h4, .h4,h45138,85854
h5,5139,85863
h5, .h5,h55139,85863
h6,5140,85872
h1 small,5146,86056
h1 small, .h1 small,5146,86056
h2 small,5147,86079
h2 small, .h2 small,5147,86079
h3 small,5148,86102
h3 small, .h3 small,5148,86102
h4 small,5149,86125
h4 small, .h4 small,5149,86125
h5 small,5150,86148
h5 small, .h5 small,5150,86148
h6 small,5151,86171
h1,5155,86238
h2,5161,86334
h3,5167,86431
h4,5173,86530
h5,5179,86628
h6,5185,86727
@media print,5191,86821
@media print, screen and 5191,86821
a:hover,hover5210,87186
ul,5225,87427
ol,5226,87431
ul ul,5242,87637
ul ul, ol ul,5242,87637
ul ul, ol ul, ul ol,5242,87637
blockquote,5256,87917
abbr,5260,87991
ul.no-bullet,bullet5292,88544
.cite-block,block5296,88614
.cite-block:before,before5300,88696
.code-inline,inline5303,88756
@media print,5338,89481
@media print, screen and 5338,89481
@media print,5348,89725
@media print, screen and 5348,89725
@media print,5427,91572
@media print, screen and 5427,91572
@media print,5437,91861
@media print, screen and 5437,91861
.grid-x > .small-shrink,shrink5484,92902
.grid-x > .small-shrink, .grid-x > .small-full,full5484,92902
-webkit-flex-basis: auto;5485,93194
-ms-flex-preferred-size: auto;5486,93222
flex-basis: auto;5487,93259
@media print,5489,93290
@media print, screen and 5489,93290
@media print,5495,93747
@media print, screen and 5495,93747
-webkit-box-flex:flex5502,94434
-webkit-flex: 0 0 auto;5503,94457
-ms-flex: 0 0 auto;5504,94483
flex: 0 0 auto;5505,94509
@media print,5543,95045
@media print, screen and 5543,95045
@media print,5582,96243
@media print, screen and 5582,96243
@media print,5630,97599
@media print, screen and 5630,97599
@media print,5638,97851
@media print, screen and 5638,97851
width: calc(8.33333% - 1.25rem)rem5648,98152
width: calc(16.66667% - 1.25rem)rem5650,98221
width: calc(25% - 1.25rem)rem5652,98291
width: calc(33.33333% - 1.25rem)rem5654,98355
width: calc(41.66667% - 1.25rem)rem5656,98425
width: calc(50% - 1.25rem)rem5658,98495
width: calc(58.33333% - 1.25rem)rem5660,98559
width: calc(66.66667% - 1.25rem)rem5662,98629
width: calc(75% - 1.25rem)rem5664,98699
width: calc(83.33333% - 1.25rem)rem5666,98764
width: calc(91.66667% - 1.25rem)rem5668,98835
width: calc(100% - 1.25rem)rem5670,98906
@media print,5671,98941
@media print, screen and 5671,98941
@media print,5728,100978
@media print, screen and 5728,100978
@media print,5761,102110
@media print, screen and 5761,102110
@media print,5769,102365
@media print, screen and 5769,102365
@media print,5777,102612
@media print, screen and 5777,102612
@media print,5806,103090
@media print, screen and 5806,103090
@media print,5824,103503
@media print, screen and 5824,103503
@media print,5866,104481
@media print, screen and 5866,104481
@media print,5900,105747
@media print, screen and 5900,105747
@media print,5948,107265
@media print, screen and 5948,107265
@media print,5973,108097
@media print, screen and 5973,108097
@media print,6006,109065
@media print, screen and 6006,109065
@media print,6014,109269
@media print, screen and 6014,109269
@media print,6040,110052
@media print, screen and 6040,110052
@media print,6066,110847
@media print, screen and 6066,110847
@media print,6092,111630
@media print, screen and 6092,111630
@media print,6100,111838
@media print, screen and 6100,111838
@media print,6108,112040
@media print, screen and 6108,112040
@media print,6134,112811
@media print, screen and 6134,112811
@media print,6160,113594
@media print, screen and 6160,113594
@media print,6186,114365
@media print, screen and 6186,114365
margin-left: calc(0% + 0.625rem)rem6198,114646
margin-left: calc(8.33333% + 0.625rem)rem6204,114766
margin-left: calc(16.66667% + 0.625rem)rem6210,114893
margin-left: calc(25% + 0.625rem)rem6216,115015
margin-left: calc(33.33333% + 0.625rem)rem6222,115137
margin-left: calc(41.66667% + 0.625rem)rem6228,115265
margin-left: calc(50% + 0.625rem)rem6234,115387
margin-left: calc(58.33333% + 0.625rem)rem6240,115509
margin-left: calc(66.66667% + 0.625rem)rem6246,115637
margin-left: calc(75% + 0.625rem)rem6252,115759
margin-left: calc(83.33333% + 0.625rem)rem6258,115883
margin-left: calc(91.66667% + 0.625rem)rem6264,116013
@media print,6266,116059
@media print, screen and 6266,116059
@media print,6316,117703
@media print, screen and 6316,117703
.grid-y > .small-shrink,shrink6383,119742
.grid-y > .small-shrink, .grid-y > .small-full,full6383,119742
-webkit-flex-basis: auto;6384,120036
-ms-flex-preferred-size: auto;6385,120066
flex-basis: auto;6386,120105
@media print,6387,120137
@media print, screen and 6387,120137
@media print,6392,120603
@media print, screen and 6392,120603
-webkit-box-flex:flex6398,121301
-webkit-flex: 0 0 auto;6399,121326
-ms-flex: 0 0 auto;6400,121354
flex: 0 0 auto;6401,121382
@media print,6426,121967
@media print, screen and 6426,121967
@media print,6464,123254
@media print, screen and 6464,123254
@media print,6506,124604
@media print, screen and 6506,124604
@media print,6514,124838
@media print, screen and 6514,124838
@media print,6522,125055
@media print, screen and 6522,125055
@media print,6530,125308
@media print, screen and 6530,125308
height: calc(8.33333% - 1.25rem)rem6540,125612
height: calc(16.66667% - 1.25rem)rem6542,125682
height: calc(25% - 1.25rem)rem6544,125753
height: calc(33.33333% - 1.25rem)rem6546,125818
height: calc(41.66667% - 1.25rem)rem6548,125889
height: calc(50% - 1.25rem)rem6550,125960
height: calc(58.33333% - 1.25rem)rem6552,126025
height: calc(66.66667% - 1.25rem)rem6554,126096
height: calc(75% - 1.25rem)rem6556,126167
height: calc(83.33333% - 1.25rem)rem6558,126233
height: calc(91.66667% - 1.25rem)rem6560,126305
height: calc(100% - 1.25rem)rem6562,126377
@media print,6563,126413
@media print, screen and 6563,126413
@media print,6620,128478
@media print, screen and 6620,128478
@media print,6695,130622
@media print, screen and 6695,130622
@media print,6737,131874
@media print, screen and 6737,131874
@media print,6792,133430
@media print, screen and 6792,133430
@media print,6806,133818
@media print, screen and 6806,133818
@media print,6823,134251
@media print, screen and 6823,134251
@media print,6827,134355
@media print, screen and 6827,134355
@media print,6834,134530
@media print, screen and 6834,134530
@media print,6842,134783
@media print, screen and 6842,134783
height: calc(8.33333% - 1.25rem)rem6852,135087
height: calc(16.66667% - 1.25rem)rem6854,135157
height: calc(25% - 1.25rem)rem6856,135228
height: calc(33.33333% - 1.25rem)rem6858,135293
height: calc(41.66667% - 1.25rem)rem6860,135364
height: calc(50% - 1.25rem)rem6862,135435
height: calc(58.33333% - 1.25rem)rem6864,135500
height: calc(66.66667% - 1.25rem)rem6866,135571
height: calc(75% - 1.25rem)rem6868,135642
height: calc(83.33333% - 1.25rem)rem6870,135708
height: calc(91.66667% - 1.25rem)rem6872,135780
height: calc(100% - 1.25rem)rem6874,135852
@media print,6875,135888
@media print, screen and 6875,135888
@media print,6932,137953
@media print, screen and 6932,137953
@media print,6964,139073
@media print, screen and 6964,139073
@media print,6967,139194
@media print, screen and 6967,139194
@media print,6971,139316
@media print, screen and 6971,139316
@media print,6975,139439
@media print, screen and 6975,139439
.button,button7007,140286
.button, .button.disabled,disabled7007,140286
.button, .button.disabled, .button[button7007,140286
.button, .button.disabled, .button[disabled], .button.disabled:hover,hover7007,140286
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover,hover7007,140286
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus,focus7007,140286
.button:hover,hover7010,140486
.button.primary,primary7013,140572
.button.primary, .button.primary.disabled,disabled7013,140572
.button.primary, .button.primary.disabled, .button.primary[primary7013,140572
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover,hover7013,140572
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover,hover7013,140572
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus,focus7013,140572
.button.primary:hover,hover7016,140828
.button.secondary,secondary7019,140930
.button.secondary, .button.secondary.disabled,disabled7019,140930
.button.secondary, .button.secondary.disabled, .button.secondary[secondary7019,140930
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover,hover7019,140930
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover,hover7019,140930
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus,focus7019,140930
.button.secondary:hover,hover7022,141200
.button.success,success7025,141306
.button.success, .button.success.disabled,disabled7025,141306
.button.success, .button.success.disabled, .button.success[success7025,141306
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover,hover7025,141306
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover,hover7025,141306
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus,focus7025,141306
.button.success:hover,hover7028,141562
.button.warning,warning7031,141664
.button.warning, .button.warning.disabled,disabled7031,141664
.button.warning, .button.warning.disabled, .button.warning[warning7031,141664
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover,hover7031,141664
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover,hover7031,141664
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus,focus7031,141664
.button.warning:hover,hover7034,141920
.button.alert,alert7037,142022
.button.alert, .button.alert.disabled,disabled7037,142022
.button.alert, .button.alert.disabled, .button.alert[alert7037,142022
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover,hover7037,142022
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover,hover7037,142022
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus,focus7037,142022
.button.alert:hover,hover7040,142264
.button.hollow,hollow7043,142362
.button.hollow, .button.hollow:hover,hover7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus,focus7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled,disabled7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover,hover7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus,focus7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[hollow7043,142362
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover,hover7043,142362
.button.hollow,hollow7045,142639
.button.hollow, .button.hollow.disabled,disabled7045,142639
.button.hollow, .button.hollow.disabled, .button.hollow[hollow7045,142639
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover,hover7045,142639
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover,hover7045,142639
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus,focus7045,142639
.button.hollow:hover,hover7048,142888
.button.hollow.primary,primary7051,142984
.button.hollow.primary, .button.hollow.primary.disabled,disabled7051,142984
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[primary7051,142984
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover,hover7051,142984
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover,hover7051,142984
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus,focus7051,142984
.button.hollow.primary:hover,hover7054,143289
.button.hollow.secondary,secondary7057,143401
.button.hollow.secondary, .button.hollow.secondary.disabled,disabled7057,143401
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[secondary7057,143401
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover,hover7057,143401
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover,hover7057,143401
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus,focus7057,143401
.button.hollow.secondary:hover,hover7060,143720
.button.hollow.success,success7063,143836
.button.hollow.success, .button.hollow.success.disabled,disabled7063,143836
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[success7063,143836
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover,hover7063,143836
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover,hover7063,143836
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus,focus7063,143836
.button.hollow.success:hover,hover7066,144141
.button.hollow.warning,warning7069,144253
.button.hollow.warning, .button.hollow.warning.disabled,disabled7069,144253
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[warning7069,144253
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover,hover7069,144253
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover,hover7069,144253
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus,focus7069,144253
.button.hollow.warning:hover,hover7072,144558
.button.hollow.alert,alert7075,144670
.button.hollow.alert, .button.hollow.alert.disabled,disabled7075,144670
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[alert7075,144670
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover,hover7075,144670
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover,hover7075,144670
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus,focus7075,144670
.button.hollow.alert:hover,hover7078,144961
.button.clear,clear7081,145069
.button.clear, .button.clear:hover,hover7081,145069
.button.clear, .button.clear:hover, .button.clear:focus,focus7081,145069
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled,disabled7081,145069
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover,hover7081,145069
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus,focus7081,145069
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[clear7081,145069
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover,hover7081,145069
.button.clear,clear7084,145368
.button.clear, .button.clear.disabled,disabled7084,145368
.button.clear, .button.clear.disabled, .button.clear[clear7084,145368
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover,hover7084,145368
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover,hover7084,145368
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus,focus7084,145368
.button.clear:hover,hover7086,145579
.button.clear.primary,primary7088,145646
.button.clear.primary, .button.clear.primary.disabled,disabled7088,145646
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[primary7088,145646
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover,hover7088,145646
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover,hover7088,145646
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus,focus7088,145646
.button.clear.primary:hover,hover7090,145913
.button.clear.secondary,secondary7092,145996
.button.clear.secondary, .button.clear.secondary.disabled,disabled7092,145996
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[secondary7092,145996
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover,hover7092,145996
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover,hover7092,145996
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus,focus7092,145996
.button.clear.secondary:hover,hover7094,146277
.button.clear.success,success7096,146364
.button.clear.success, .button.clear.success.disabled,disabled7096,146364
.button.clear.success, .button.clear.success.disabled, .button.clear.success[success7096,146364
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover,hover7096,146364
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover,hover7096,146364
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus,focus7096,146364
.button.clear.success:hover,hover7098,146631
.button.clear.warning,warning7100,146714
.button.clear.warning, .button.clear.warning.disabled,disabled7100,146714
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[warning7100,146714
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover,hover7100,146714
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover,hover7100,146714
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus,focus7100,146714
.button.clear.warning:hover,hover7102,146981
.button.clear.alert,alert7104,147064
.button.clear.alert, .button.clear.alert.disabled,disabled7104,147064
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[alert7104,147064
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover,hover7104,147064
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover,hover7104,147064
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus,focus7104,147064
.button.clear.alert:hover,hover7106,147317
.button.disabled,disabled7108,147396
.button.dropdown.hollow::after,hollow::after7125,147818
.button.dropdown.hollow.primary::after,primary::after7127,147917
.button.dropdown.hollow.secondary::after,secondary::after7129,148032
.button.dropdown.hollow.success::after,success::after7131,148151
.button.dropdown.hollow.warning::after,warning::after7133,148266
.button.dropdown.hollow.alert::after,alert::after7135,148381
a.button:hover,hover7142,148579
.button-group::before,group::before7162,149076
.button-group::before,group::before7174,149403
.button-group.primary .button,button7199,150094
.button-group.primary .button, .button-group.primary .button.disabled,disabled7199,150094
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[button7199,150094
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[disabled], .button-group.primary .button.disabled:hover,hover7199,150094
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[disabled], .button-group.primary .button.disabled:hover, .button-group.primary .button[disabled]:hover,hover7199,150094
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[disabled], .button-group.primary .button.disabled:hover, .button-group.primary .button[disabled]:hover, .button-group.primary .button.disabled:focus,focus7199,150094
.button-group.primary .button:hover,hover7202,150448
.button-group.secondary .button,button7205,150578
.button-group.secondary .button, .button-group.secondary .button.disabled,disabled7205,150578
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[button7205,150578
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[disabled], .button-group.secondary .button.disabled:hover,hover7205,150578
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[disabled], .button-group.secondary .button.disabled:hover, .button-group.secondary .button[disabled]:hover,hover7205,150578
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[disabled], .button-group.secondary .button.disabled:hover, .button-group.secondary .button[disabled]:hover, .button-group.secondary .button.disabled:focus,focus7205,150578
.button-group.secondary .button:hover,hover7208,150946
.button-group.success .button,button7211,151080
.button-group.success .button, .button-group.success .button.disabled,disabled7211,151080
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[button7211,151080
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[disabled], .button-group.success .button.disabled:hover,hover7211,151080
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[disabled], .button-group.success .button.disabled:hover, .button-group.success .button[disabled]:hover,hover7211,151080
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[disabled], .button-group.success .button.disabled:hover, .button-group.success .button[disabled]:hover, .button-group.success .button.disabled:focus,focus7211,151080
.button-group.success .button:hover,hover7214,151434
.button-group.warning .button,button7217,151564
.button-group.warning .button, .button-group.warning .button.disabled,disabled7217,151564
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[button7217,151564
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[disabled], .button-group.warning .button.disabled:hover,hover7217,151564
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[disabled], .button-group.warning .button.disabled:hover, .button-group.warning .button[disabled]:hover,hover7217,151564
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[disabled], .button-group.warning .button.disabled:hover, .button-group.warning .button[disabled]:hover, .button-group.warning .button.disabled:focus,focus7217,151564
.button-group.warning .button:hover,hover7220,151918
.button-group.alert .button,button7223,152048
.button-group.alert .button, .button-group.alert .button.disabled,disabled7223,152048
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[button7223,152048
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover,hover7223,152048
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover, .button-group.alert .button[disabled]:hover,hover7223,152048
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover, .button-group.alert .button[disabled]:hover, .button-group.alert .button.disabled:focus,focus7223,152048
.button-group.alert .button:hover,hover7226,152388
.button-group.hollow .button,button7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover,hover7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus,focus7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled,disabled7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover,hover7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover, .button-group.hollow .button.disabled:focus,focus7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[button7229,152514
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled], .button-group.hollow .button[disabled]:hover,hover7229,152514
.button-group.hollow .button,button7231,152917
.button-group.hollow .button, .button-group.hollow .button.disabled,disabled7231,152917
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[button7231,152917
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover,hover7231,152917
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover, .button-group.hollow .button[disabled]:hover,hover7231,152917
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover, .button-group.hollow .button[disabled]:hover, .button-group.hollow .button.disabled:focus,focus7231,152917
.button-group.hollow .button:hover,hover7234,153264
.button-group.hollow.primary .button,button7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled,disabled7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[button7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover,hover7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover,hover7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus,focus7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus,focus7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary,primary7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled,disabled7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[primary7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[disabled], .button-group.hollow .button.primary.disabled:hover,hover7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[disabled], .button-group.hollow .button.primary.disabled:hover, .button-group.hollow .button.primary[disabled]:hover,hover7237,153388
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[disabled], .button-group.hollow .button.primary.disabled:hover, .button-group.hollow .button.primary[disabled]:hover, .button-group.hollow .button.primary.disabled:focus,focus7237,153388
.button-group.hollow.primary .button:hover,hover7240,154138
.button-group.hollow.primary .button:hover, .button-group.hollow.primary .button:focus,focus7240,154138
.button-group.hollow.primary .button:hover, .button-group.hollow.primary .button:focus, .button-group.hollow .button.primary:hover,hover7240,154138
.button-group.hollow.secondary .button,button7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled,disabled7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[button7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover,hover7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover,hover7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus,focus7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus,focus7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary,secondary7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled,disabled7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[secondary7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[disabled], .button-group.hollow .button.secondary.disabled:hover,hover7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[disabled], .button-group.hollow .button.secondary.disabled:hover, .button-group.hollow .button.secondary[disabled]:hover,hover7243,154366
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[disabled], .button-group.hollow .button.secondary.disabled:hover, .button-group.hollow .button.secondary[disabled]:hover, .button-group.hollow .button.secondary.disabled:focus,focus7243,154366
.button-group.hollow.secondary .button:hover,hover7246,155144
.button-group.hollow.secondary .button:hover, .button-group.hollow.secondary .button:focus,focus7246,155144
.button-group.hollow.secondary .button:hover, .button-group.hollow.secondary .button:focus, .button-group.hollow .button.secondary:hover,hover7246,155144
.button-group.hollow.success .button,button7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled,disabled7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[button7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover,hover7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover,hover7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus,focus7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus,focus7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success,success7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled,disabled7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[success7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[disabled], .button-group.hollow .button.success.disabled:hover,hover7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[disabled], .button-group.hollow .button.success.disabled:hover, .button-group.hollow .button.success[disabled]:hover,hover7249,155380
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[disabled], .button-group.hollow .button.success.disabled:hover, .button-group.hollow .button.success[disabled]:hover, .button-group.hollow .button.success.disabled:focus,focus7249,155380
.button-group.hollow.success .button:hover,hover7252,156130
.button-group.hollow.success .button:hover, .button-group.hollow.success .button:focus,focus7252,156130
.button-group.hollow.success .button:hover, .button-group.hollow.success .button:focus, .button-group.hollow .button.success:hover,hover7252,156130
.button-group.hollow.warning .button,button7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled,disabled7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[button7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover,hover7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover,hover7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus,focus7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus,focus7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning,warning7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled,disabled7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[warning7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[disabled], .button-group.hollow .button.warning.disabled:hover,hover7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[disabled], .button-group.hollow .button.warning.disabled:hover, .button-group.hollow .button.warning[disabled]:hover,hover7255,156358
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[disabled], .button-group.hollow .button.warning.disabled:hover, .button-group.hollow .button.warning[disabled]:hover, .button-group.hollow .button.warning.disabled:focus,focus7255,156358
.button-group.hollow.warning .button:hover,hover7258,157108
.button-group.hollow.warning .button:hover, .button-group.hollow.warning .button:focus,focus7258,157108
.button-group.hollow.warning .button:hover, .button-group.hollow.warning .button:focus, .button-group.hollow .button.warning:hover,hover7258,157108
.button-group.hollow.alert .button,button7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled,disabled7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[button7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover,hover7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover,hover7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus,focus7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus,focus7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert,alert7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled,disabled7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[alert7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[disabled], .button-group.hollow .button.alert.disabled:hover,hover7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[disabled], .button-group.hollow .button.alert.disabled:hover, .button-group.hollow .button.alert[disabled]:hover,hover7261,157336
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[disabled], .button-group.hollow .button.alert.disabled:hover, .button-group.hollow .button.alert[disabled]:hover, .button-group.hollow .button.alert.disabled:focus,focus7261,157336
.button-group.hollow.alert .button:hover,hover7264,158058
.button-group.hollow.alert .button:hover, .button-group.hollow.alert .button:focus,focus7264,158058
.button-group.hollow.alert .button:hover, .button-group.hollow.alert .button:focus, .button-group.hollow .button.alert:hover,hover7264,158058
.button-group.clear .button,button7267,158278
.button-group.clear .button, .button-group.clear .button:hover,hover7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus,focus7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled,disabled7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover,hover7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover, .button-group.clear .button.disabled:focus,focus7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[button7267,158278
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[disabled], .button-group.clear .button[disabled]:hover,hover7267,158278
.button-group.clear .button,button7270,158703
.button-group.clear .button, .button-group.clear .button.disabled,disabled7270,158703
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[button7270,158703
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[disabled], .button-group.clear .button.disabled:hover,hover7270,158703
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[disabled], .button-group.clear .button.disabled:hover, .button-group.clear .button[disabled]:hover,hover7270,158703
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[disabled], .button-group.clear .button.disabled:hover, .button-group.clear .button[disabled]:hover, .button-group.clear .button.disabled:focus,focus7270,158703
.button-group.clear .button:hover,hover7272,159012
.button-group.clear.primary .button,button7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled,disabled7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[button7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover,hover7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover,hover7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus,focus7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus,focus7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary,primary7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled,disabled7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[primary7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[disabled], .button-group.clear .button.primary.disabled:hover,hover7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[disabled], .button-group.clear .button.primary.disabled:hover, .button-group.clear .button.primary[disabled]:hover,hover7274,159107
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[disabled], .button-group.clear .button.primary.disabled:hover, .button-group.clear .button.primary[disabled]:hover, .button-group.clear .button.primary.disabled:focus,focus7274,159107
.button-group.clear.primary .button:hover,hover7276,159812
.button-group.clear.primary .button:hover, .button-group.clear.primary .button:focus,focus7276,159812
.button-group.clear.primary .button:hover, .button-group.clear.primary .button:focus, .button-group.clear .button.primary:hover,hover7276,159812
.button-group.clear.secondary .button,button7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled,disabled7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[button7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover,hover7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover,hover7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus,focus7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus,focus7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary,secondary7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled,disabled7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[secondary7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[disabled], .button-group.clear .button.secondary.disabled:hover,hover7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[disabled], .button-group.clear .button.secondary.disabled:hover, .button-group.clear .button.secondary[disabled]:hover,hover7278,160009
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[disabled], .button-group.clear .button.secondary.disabled:hover, .button-group.clear .button.secondary[disabled]:hover, .button-group.clear .button.secondary.disabled:focus,focus7278,160009
.button-group.clear.secondary .button:hover,hover7280,160742
.button-group.clear.secondary .button:hover, .button-group.clear.secondary .button:focus,focus7280,160742
.button-group.clear.secondary .button:hover, .button-group.clear.secondary .button:focus, .button-group.clear .button.secondary:hover,hover7280,160742
.button-group.clear.success .button,button7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled,disabled7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[button7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover,hover7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover,hover7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus,focus7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus,focus7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success,success7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled,disabled7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[success7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[disabled], .button-group.clear .button.success.disabled:hover,hover7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[disabled], .button-group.clear .button.success.disabled:hover, .button-group.clear .button.success[disabled]:hover,hover7282,160947
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[disabled], .button-group.clear .button.success.disabled:hover, .button-group.clear .button.success[disabled]:hover, .button-group.clear .button.success.disabled:focus,focus7282,160947
.button-group.clear.success .button:hover,hover7284,161652
.button-group.clear.success .button:hover, .button-group.clear.success .button:focus,focus7284,161652
.button-group.clear.success .button:hover, .button-group.clear.success .button:focus, .button-group.clear .button.success:hover,hover7284,161652
.button-group.clear.warning .button,button7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled,disabled7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[button7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover,hover7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover,hover7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus,focus7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus,focus7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning,warning7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled,disabled7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[warning7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[disabled], .button-group.clear .button.warning.disabled:hover,hover7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[disabled], .button-group.clear .button.warning.disabled:hover, .button-group.clear .button.warning[disabled]:hover,hover7286,161849
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[disabled], .button-group.clear .button.warning.disabled:hover, .button-group.clear .button.warning[disabled]:hover, .button-group.clear .button.warning.disabled:focus,focus7286,161849
.button-group.clear.warning .button:hover,hover7288,162554
.button-group.clear.warning .button:hover, .button-group.clear.warning .button:focus,focus7288,162554
.button-group.clear.warning .button:hover, .button-group.clear.warning .button:focus, .button-group.clear .button.warning:hover,hover7288,162554
.button-group.clear.alert .button,button7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled,disabled7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[button7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover,hover7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover,hover7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus,focus7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus,focus7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert,alert7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled,disabled7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[alert7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[disabled], .button-group.clear .button.alert.disabled:hover,hover7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[disabled], .button-group.clear .button.alert.disabled:hover, .button-group.clear .button.alert[disabled]:hover,hover7290,162751
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[disabled], .button-group.clear .button.alert.disabled:hover, .button-group.clear .button.alert[disabled]:hover, .button-group.clear .button.alert.disabled:focus,focus7290,162751
.button-group.clear.alert .button:hover,hover7292,163428
.button-group.clear.alert .button:hover, .button-group.clear.alert .button:focus,focus7292,163428
.button-group.clear.alert .button:hover, .button-group.clear.alert .button:focus, .button-group.clear .button.alert:hover,hover7292,163428
.button-group.stacked,stacked7298,163769
.button-group.stacked .button,button7302,163951
.button-group.stacked .button:last-child,child7307,164189
.button-group.stacked.expanded .button,button7309,164371
@media print,7315,164656
@media print, screen and 7315,164656
@media print,7322,164894
@media print, screen and 7322,164894
@media print,7329,165133
@media print, screen and 7329,165133
@media print,7335,165367
@media print, screen and 7335,165367
.close-button:hover,hover7349,165757
.close-button.medium,medium7356,165929
.slider.disabled,disabled7477,168791
thead,7625,172220
tbody,7626,172229
thead tr,7639,172502
thead th,7642,172558
thead td,7643,172570
tfoot th,7644,172582
tbody th,7649,172693
tbody tr:nth-child(child7652,172759
@media print,7662,173033
@media print, screen and 7662,173033
table.hover:not(.unstriped) tr:nth-of-type(type7688,173544
.breadcrumbs::before,breadcrumbs::before7722,174242
.breadcrumbs li:not(not7740,174703
.pagination::before,pagination::before7872,177614
.pagination li:last-child,child7889,178051
@media print,7891,178142
@media print, screen and 7891,178142
.pagination a,7894,178249
.pagination a:hover,hover7900,178386
.pagination-previous a::before,7919,178881
.pagination-next a::after,7925,179022
.accordion-title:hover,hover8052,182212
@media print,8084,182995
@media print, screen and 8084,182995
.media-object-section:last-child:not(not8097,183374
@media print,8101,183520
@media print, screen and 8101,183520
.orbit-previous,previous8151,184548
[data-whatinput='mouse'] .orbit-previous,previous8160,184782
.orbit-previous:hover,hover8162,184883
.orbit-previous:hover, .orbit-next:hover,hover8162,184883
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active,active8162,184883
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active,active8162,184883
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus,focus8162,184883
.responsive-embed,embed8190,185594
.responsive-embed iframe,8197,185730
.responsive-embed object,8198,185758
.responsive-embed embed,8199,185786
.responsive-embed video,8200,185813
.flex-video iframe,8201,185840
.flex-video object,8202,185862
.flex-video embed,8203,185884
.responsive-embed.widescreen,widescreen8210,186013
.tabs::before,tabs::before8219,186203
.tabs.primary > li > a:hover,hover8246,186774
.tabs-title > a:focus,focus8262,187181
a.thumbnail:hover,hover8299,188145
.menu a,8320,188701
.menu input,8326,188825
.menu select,8327,188840
.menu a,8328,188856
.menu,menu8333,188953
@media print,8365,189904
@media print, screen and 8365,189904
@media print,8394,190866
@media print, screen and 8394,190866
.menu.icon-top a,8431,192005
.menu.icon-top a, .menu.icon-right a,8431,192005
.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a,8431,192005
.menu.icon-left li a img,8442,192389
.menu.icon-left li a i,8443,192419
.menu.icon-right li a img,8452,192713
.menu.icon-right li a i,8453,192744
.menu.icon-top li a img,8462,193044
.menu.icon-top li a i,8463,193073
.menu.icon-bottom li a img,8476,193510
.menu.icon-bottom li a i,8477,193542
@media print,8877,203841
@media print, screen and 8877,203841
@media print,8933,205550
@media print, screen and 8933,205550
.off-canvas-content.has-transition-overlap,overlap9245,215718
@media print,9259,216342
@media print, screen and 9259,216342
@media print,9333,218840
@media print, screen and 9333,218840
@media print,9407,221322
@media print, screen and 9407,221322
@media print,9426,222022
@media print, screen and 9426,222022
@media print,9481,223473
@media print, screen and 9481,223473
@media print,9488,223649
@media print, screen and 9488,223649
@media print,9494,223797
@media print, screen and 9494,223797
@media print,9498,223909
@media print, screen and 9498,223909
@media print,9502,224022
@media print, screen and 9502,224022
@media print,9518,224343
@media print, screen and 9518,224343
.title-bar-left,left9579,225654
.top-bar,bar9614,226482
.top-bar .top-bar-left,left9625,226727
@media print,9632,226913
@media print, screen and 9632,226913
@media print,9649,227450
@media print, screen and 9649,227450
@media print,9661,227886
@media print, screen and 9661,227886
.top-bar-left,left9681,228473
.clearfix::before,clearfix::before9699,228777
-webkit-box-ordinal-group:group9818,231756
-webkit-order:order9819,231788
-ms-flex-order:order9820,231808
order:order9821,231833
-webkit-box-ordinal-group:group9824,231873
-webkit-order:order9825,231905
-ms-flex-order:order9826,231925
order:order9827,231950
-webkit-box-ordinal-group:group9830,231990
-webkit-order:order9831,232022
-ms-flex-order:order9832,232042
order:order9833,232067
-webkit-box-ordinal-group:group9836,232107
-webkit-order:order9837,232139
-ms-flex-order:order9838,232159
order:order9839,232184
-webkit-box-ordinal-group:group9842,232224
-webkit-order:order9843,232256
-ms-flex-order:order9844,232276
order:order9845,232301
-webkit-box-ordinal-group:group9848,232341
-webkit-order:order9849,232373
-ms-flex-order:order9850,232393
order:order9851,232418
@media print,9853,232441
@media print, screen and 9853,232441
@media print,9885,233251
@media print, screen and 9885,233251
@media print,9969,235339
@media print, screen and 9969,235339
@media print,10015,236807
@media print, screen and 10015,236807
@media print,10067,238344
@media print, screen and 10067,238344
@media screen and (max-width: 0em), screen and 10071,238455
@media print,10075,238582
@media print, screen and 10075,238582
@media screen and 10079,238683
@media print,10083,238783
@media print, screen and 10083,238783
@media screen and (max-width: 39.99875em), screen and 10087,238917
@media print,10091,239052
@media print, screen and 10091,239052
@media screen and 10095,239152
@media print,10099,239251
@media print, screen and 10099,239251
@media screen and (max-width: 63.99875em), screen and 10103,239384
.show-on-focus:active,active10118,239787
@media screen and 10129,240084
@media screen and 10133,240218
@media screen and 10141,240423
@media screen and 10145,240556
.shake,shake10880,267047
.spin-cw,cw10881,267055
.spin-ccw,ccw10882,267065

+ 30
- 0
foundation_shopping_list/config.yml View File

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# UnCSS will use these settings
UNCSS_OPTIONS:
html:
# Search for used CSS classes in generated HTML files
- "dist/**/*.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
# Path to dist folder
dist: "dist"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- "node_modules/@fortawesome/fontawesome-free/webfonts"
- "!src/assets/{img,js,scss}/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/@fortawesome/fontawesome-free/scss"
- "src/assets/scss/components"
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/app.js"

+ 173
- 0
foundation_shopping_list/gulpfile.babel.js View File

'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {

const postCssPlugins = [
// Autoprefixer
autoprefixer(),

// UnCSS - Uncomment to remove unused styles in production
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
].filter(Boolean);

return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}

let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.terser()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin([
$.imagemin.jpegtran({ progressive: true }),
])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
}, done);
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

+ 13246
- 0
foundation_shopping_list/package-lock.json
File diff suppressed because it is too large
View File


+ 58
- 0
foundation_shopping_list/package.json View File

{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"foundation-sites": "^6.6.0",
"jquery": "^3.2.1",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.2.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"private": true
}

+ 70
- 0
foundation_shopping_list/readme.md View File

# ZURB Template

[![devDependency Status](https://david-dm.org/zurb/foundation-zurb-template/dev-status.svg)](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)

**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**

This is the official ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:

- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- JavaScript module bundling with webpack
- Built-in BrowserSync server
- For production builds:
- CSS compression
- JavaScript module bundling with webpack
- Image compression

## Installation

To use this template, your computer needs:

- [NodeJS](https://nodejs.org/en/) (Version 6 or greater recommended, tested with 6.11.4 and 8.12.0)
- [Git](https://git-scm.com/)

This template can be installed with the Foundation CLI, or downloaded and set up manually.

### Using the CLI

Install the Foundation CLI with this command:

```bash
npm install foundation-cli --global
```

Use this command to set up a blank Foundation for Sites project with this template:

```bash
foundation new --framework sites --template zurb
```

The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.

Now `cd` to your project name and to start your project run

```bash
foundation watch
```

### Manual Setup

To manually set up the template, first download it with Git:

```bash
git clone https://github.com/zurb/foundation-zurb-template projectname
```

Then open the folder in your command line, and install the needed dependencies:

```bash
cd projectname
yarn
```

Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL:

```
http://localhost:8000
```

To create compressed, production-ready assets, run `yarn run build`.

BIN
foundation_shopping_list/src/assets/img/asparagus.jpg View File


BIN
foundation_shopping_list/src/assets/img/veg1.jpg View File


BIN
foundation_shopping_list/src/assets/img/veg2.jpg View File


BIN
foundation_shopping_list/src/assets/img/veg3.jpg View File


+ 17
- 0
foundation_shopping_list/src/assets/js/app.js View File

import $ from 'jquery';
import 'what-input';

// Foundation JS relies on a global variable. In ES6, all imports are hoisted
// to the top of the file so if we used `import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';


$(document).foundation();

+ 83
- 0
foundation_shopping_list/src/assets/js/lib/foundation-explicit-pieces.js View File

import $ from 'jquery';

import { Foundation } from 'foundation-sites/js/foundation.core';
import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
import { Box } from 'foundation-sites/js/foundation.util.box'
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
import { Nest } from 'foundation-sites/js/foundation.util.nest';
import { Timer } from 'foundation-sites/js/foundation.util.timer';
import { Touch } from 'foundation-sites/js/foundation.util.touch';
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
import { Abide } from 'foundation-sites/js/foundation.abide';
import { Accordion } from 'foundation-sites/js/foundation.accordion';
import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
import { Interchange } from 'foundation-sites/js/foundation.interchange';
import { Magellan } from 'foundation-sites/js/foundation.magellan';
import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
import { Orbit } from 'foundation-sites/js/foundation.orbit';
import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
import { Reveal } from 'foundation-sites/js/foundation.reveal';
import { Slider } from 'foundation-sites/js/foundation.slider';
import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
import { Sticky } from 'foundation-sites/js/foundation.sticky';
import { Tabs } from 'foundation-sites/js/foundation.tabs';
import { Toggler } from 'foundation-sites/js/foundation.toggler';
import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';

Foundation.addToJquery($);

// Add Foundation Utils to Foundation global namespace for backwards
// compatibility.
Foundation.rtl = CoreUtils.rtl;
Foundation.GetYoDigits = CoreUtils.GetYoDigits;
Foundation.transitionend = CoreUtils.transitionend;
Foundation.RegExpEscape = CoreUtils.RegExpEscape;
Foundation.onLoad = CoreUtils.onLoad;

Foundation.Box = Box;
Foundation.onImagesLoaded = onImagesLoaded;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;
Foundation.Timer = Timer;

// Touch and Triggers previously were almost purely sede effect driven,
// so no need to add it to Foundation, just init them.
Touch.init($);
Triggers.init($, Foundation);
MediaQuery._init();

Foundation.plugin(Abide, 'Abide');
Foundation.plugin(Accordion, 'Accordion');
Foundation.plugin(AccordionMenu, 'AccordionMenu');
Foundation.plugin(Drilldown, 'Drilldown');
Foundation.plugin(Dropdown, 'Dropdown');
Foundation.plugin(DropdownMenu, 'DropdownMenu');
Foundation.plugin(Equalizer, 'Equalizer');
Foundation.plugin(Interchange, 'Interchange');
Foundation.plugin(Magellan, 'Magellan');
Foundation.plugin(OffCanvas, 'OffCanvas');
Foundation.plugin(Orbit, 'Orbit');
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
Foundation.plugin(Reveal, 'Reveal');
Foundation.plugin(Slider, 'Slider');
Foundation.plugin(SmoothScroll, 'SmoothScroll');
Foundation.plugin(Sticky, 'Sticky');
Foundation.plugin(Tabs, 'Tabs');
Foundation.plugin(Toggler, 'Toggler');
Foundation.plugin(Tooltip, 'Tooltip');
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');

export { Foundation };

+ 895
- 0
foundation_shopping_list/src/assets/scss/_settings.scss View File

// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Breakpoints
// 3. The Grid
// 4. Base Typography
// 5. Typography Helpers
// 6. Abide
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
// 12. Button Group
// 13. Callout
// 14. Card
// 15. Close Button
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
// 19. Flexbox Utilities
// 20. Forms
// 21. Label
// 22. Media Object
// 23. Menu
// 24. Meter
// 25. Off-canvas
// 26. Orbit
// 27. Pagination
// 28. Progress Bar
// 29. Prototype Arrow
// 30. Prototype Border-Box
// 31. Prototype Border-None
// 32. Prototype Bordered
// 33. Prototype Display
// 34. Prototype Font-Styling
// 35. Prototype List-Style-Type
// 36. Prototype Overflow
// 37. Prototype Position
// 38. Prototype Rounded
// 39. Prototype Separator
// 40. Prototype Shadow
// 41. Prototype Sizing
// 42. Prototype Spacing
// 43. Prototype Text-Decoration
// 44. Prototype Text-Transformation
// 45. Prototype Text-Utilities
// 46. Responsive Embed
// 47. Reveal
// 48. Slider
// 49. Switch
// 50. Table
// 51. Tabs
// 52. Thumbnail
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
// 56. Xy Grid

@import 'util/util';

// 1. Global
// ---------

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true;
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
$print-hrefs: true;

@include add-foundation-colors;

// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoints-hidpi: (
hidpi-1: 1,
hidpi-1-5: 1.5,
hidpi-2: 2,
retina: 2,
hidpi-3: 3
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);

// 3. The Grid
// -----------

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

// 4. Base Typography
// ------------------

$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': ('font-size': 24),
'h2': ('font-size': 20),
'h3': ('font-size': 19),
'h4': ('font-size': 18),
'h5': ('font-size': 17),
'h6': ('font-size': 16),
),
medium: (
'h1': ('font-size': 48),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
'h5': ('font-size': 20),
'h6': ('font-size': 16),
),
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true;
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$enable-cite-block: true;
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;

// 5. Typography Helpers
// ---------------------

$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
$cite-color: $dark-gray;
$cite-font-size: rem-calc(13);
$cite-pseudo-content: '\2014 \0020';
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $light-gray;
$code-border: 1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$code-block-padding: 1rem;
$code-block-margin-bottom: 1.5rem;

// 6. Abide
// --------

$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: get-color(alert);
$form-label-color-invalid: get-color(alert);
$input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;

// 7. Accordion
// ------------

$accordion-background: $white;
$accordion-plusminus: true;
$accordion-plus-content: '\002B';
$accordion-minus-content: '\2013';
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;

// 8. Accordion Menu
// -----------------

$accordionmenu-padding: $global-menu-padding;
$accordionmenu-nested-margin: $global-menu-nested-margin;
$accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
$accordionmenu-item-background: null;
$accordionmenu-border: null;
$accordionmenu-submenu-toggle-background: null;
$accordion-submenu-toggle-border: $accordionmenu-border;
$accordionmenu-submenu-toggle-width: 40px;
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
$accordionmenu-arrow-size: 6px;

// 9. Badge
// --------

$badge-background: $primary-color;
$badge-color: $white;
$badge-color-alt: $black;
$badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;

// 10. Breadcrumbs
// ---------------

$breadcrumbs-margin: 0 0 $global-margin 0;
$breadcrumbs-item-font-size: rem-calc(11);
$breadcrumbs-item-color: $primary-color;
$breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
$breadcrumbs-item-separator: true;
$breadcrumbs-item-separator-item: '/';
$breadcrumbs-item-separator-item-rtl: '\\';
$breadcrumbs-item-separator-color: $medium-gray;

// 11. Button
// ----------

$button-font-family: inherit;
$button-font-weight: null;
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-border: 1px solid transparent;
$button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%;
$button-hollow-hover-lightness: -50%;
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
$button-responsive-expanded: false;

// 12. Button Group
// ----------------

$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
$buttongroup-radius-on-each: true;

// 13. Callout
// -----------

$callout-background: $white;
$callout-background-fade: 85%;
$callout-border: 1px solid rgba($black, 0.25);
$callout-margin: 0 0 1rem 0;
$callout-sizes: (
small: 0.5rem,
default: 1rem,
large: 3rem,
);
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;

// 14. Card
// --------

$card-background: $white;
$card-font-color: $body-font-color;
$card-divider-background: $light-gray;
$card-border: 1px solid $light-gray;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding;
$card-margin-bottom: $global-margin;

// 15. Close Button
// ----------------

$closebutton-position: right top;
$closebutton-z-index: 10;
$closebutton-default-size: medium;
$closebutton-offset-horizontal: (
small: 0.66rem,
medium: 1rem,
);
$closebutton-offset-vertical: (
small: 0.33em,
medium: 0.5rem,
);
$closebutton-size: (
small: 1.5em,
medium: 2em,
);
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;

// 16. Drilldown
// -------------

$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
$drilldown-padding: $global-menu-padding;
$drilldown-nested-margin: 0;
$drilldown-background: $white;
$drilldown-submenu-padding: $drilldown-padding;
$drilldown-submenu-background: $white;
$drilldown-arrow-color: $primary-color;
$drilldown-arrow-size: 6px;

// 17. Dropdown
// ------------

$dropdown-padding: 1rem;
$dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
$dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
);

// 18. Dropdown Menu
// -----------------

$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: null;
$dropdownmenu-submenu-background: $white;
$dropdownmenu-padding: $global-menu-padding;
$dropdownmenu-nested-margin: 0;
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
$dropdownmenu-border: 1px solid $medium-gray;
$dropdown-menu-item-color-active: get-color(primary);
$dropdown-menu-item-background-active: transparent;

// 19. Flexbox Utilities
// ---------------------

$flex-source-ordering-count: 6;
$flexbox-responsive-breakpoints: true;

// 20. Forms
// ---------

$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal;
$input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;

// 21. Label
// ---------

$label-background: $primary-color;
$label-color: $white;
$label-color-alt: $black;
$label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;

// 22. Media Object
// ----------------

$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;

// 23. Menu
// --------

$menu-margin: 0;
$menu-nested-margin: $global-menu-nested-margin;
$menu-items-padding: $global-menu-padding;
$menu-simple-margin: 1rem;
$menu-item-color-active: $white;
$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;

// 24. Meter
// ---------

$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;

// 25. Off-canvas
// --------------

$offcanvas-sizes: (
small: 250px,
);
$offcanvas-vertical-sizes: (
small: 250px,
);
$offcanvas-background: $light-gray;
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
$offcanvas-inner-shadow-size: 20px;
$offcanvas-inner-shadow-color: rgba($black, 0.25);
$offcanvas-overlay-zindex: 11;
$offcanvas-push-zindex: 12;
$offcanvas-overlap-zindex: 13;
$offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';

// 26. Orbit
// ---------

$orbit-bullet-background: $medium-gray;
$orbit-bullet-background-active: $dark-gray;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;

// 27. Pagination
// --------------

$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $black;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
$pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
$pagination-arrow-previous: '\00AB';
$pagination-arrow-next: '\00BB';

// 28. Progress Bar
// ----------------

$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;

// 29. Prototype Arrow
// -------------------

$prototype-arrow-directions: (
down,
up,
right,
left
);
$prototype-arrow-size: 0.4375rem;
$prototype-arrow-color: $black;

// 30. Prototype Border-Box
// ------------------------

$prototype-border-box-breakpoints: $global-prototype-breakpoints;

// 31. Prototype Border-None
// -------------------------

$prototype-border-none-breakpoints: $global-prototype-breakpoints;

// 32. Prototype Bordered
// ----------------------

$prototype-bordered-breakpoints: $global-prototype-breakpoints;
$prototype-border-width: rem-calc(1);
$prototype-border-type: solid;
$prototype-border-color: $medium-gray;

// 33. Prototype Display
// ---------------------

$prototype-display-breakpoints: $global-prototype-breakpoints;
$prototype-display: (
inline,
inline-block,
block,
table,
table-cell
);

// 34. Prototype Font-Styling
// --------------------------

$prototype-font-breakpoints: $global-prototype-breakpoints;
$prototype-wide-letter-spacing: rem-calc(4);
$prototype-font-normal: $global-weight-normal;
$prototype-font-bold: $global-weight-bold;

// 35. Prototype List-Style-Type
// -----------------------------

$prototype-list-breakpoints: $global-prototype-breakpoints;
$prototype-style-type-unordered: (
disc,
circle,
square
);
$prototype-style-type-ordered: (
decimal,
lower-alpha,
lower-latin,
lower-roman,
upper-alpha,
upper-latin,
upper-roman
);

// 36. Prototype Overflow
// ----------------------

$prototype-overflow-breakpoints: $global-prototype-breakpoints;
$prototype-overflow: (
visible,
hidden,
scroll
);

// 37. Prototype Position
// ----------------------

$prototype-position-breakpoints: $global-prototype-breakpoints;
$prototype-position: (
static,
relative,
absolute,
fixed
);
$prototype-position-z-index: 975;

// 38. Prototype Rounded
// ---------------------

$prototype-rounded-breakpoints: $global-prototype-breakpoints;
$prototype-border-radius: rem-calc(3);

// 39. Prototype Separator
// -----------------------

$prototype-separator-breakpoints: $global-prototype-breakpoints;
$prototype-separator-align: center;
$prototype-separator-height: rem-calc(2);
$prototype-separator-width: 3rem;
$prototype-separator-background: $primary-color;
$prototype-separator-margin-top: $global-margin;

// 40. Prototype Shadow
// --------------------

$prototype-shadow-breakpoints: $global-prototype-breakpoints;
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
0 2px 10px 0 rgba(0,0,0,.12);

// 41. Prototype Sizing
// --------------------

$prototype-sizing-breakpoints: $global-prototype-breakpoints;
$prototype-sizing: (
width,
height
);
$prototype-sizes: (
25: 25%,
50: 50%,
75: 75%,
100: 100%
);

// 42. Prototype Spacing
// ---------------------

$prototype-spacing-breakpoints: $global-prototype-breakpoints;
$prototype-spacers-count: 3;

// 43. Prototype Text-Decoration
// -----------------------------

$prototype-decoration-breakpoints: $global-prototype-breakpoints;
$prototype-text-decoration: (
overline,
underline,
line-through,
);

// 44. Prototype Text-Transformation
// ---------------------------------

$prototype-transformation-breakpoints: $global-prototype-breakpoints;
$prototype-text-transformation: (
lowercase,
uppercase,
capitalize
);

// 45. Prototype Text-Utilities
// ----------------------------

$prototype-utilities-breakpoints: $global-prototype-breakpoints;
$prototype-text-overflow: ellipsis;

// 46. Responsive Embed
// --------------------

$responsive-embed-margin-bottom: rem-calc(16);
$responsive-embed-ratios: (
default: 4 by 3,
widescreen: 16 by 9,
);

// 47. Reveal
// ----------

$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);

// 48. Slider
// ----------

$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
$slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;

// 49. Switch
// ----------

$switch-background: $medium-gray;
$switch-background-active: $primary-color;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $global-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
$switch-opacity-disabled: .5;
$switch-cursor-disabled: not-allowed;

// 50. Table
// ---------

$table-background: $white;
$table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
$table-stack-breakpoint: medium;

// 51. Tabs
// --------

$tab-margin: 0;
$tab-background: $white;
$tab-color: $primary-color;
$tab-background-active: $light-gray;
$tab-active-color: $primary-color;
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-content-background: $white;
$tab-content-border: $light-gray;
$tab-content-color: $body-font-color;
$tab-content-padding: 1rem;

// 52. Thumbnail
// -------------

$thumbnail-border: 4px solid $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;

// 53. Title Bar
// -------------

$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;

// 54. Tooltip
// -----------

$has-tip-cursor: help;
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
$tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-radius: $global-radius;

// 55. Top Bar
// -----------

$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;

// 56. Xy Grid
// -----------

$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
small: 20px,
medium: 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width;
$xy-block-grid-max: 8;


+ 74
- 0
foundation_shopping_list/src/assets/scss/app.scss View File

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

// fontawesome
@import 'fontawesome';
@import 'solid';
@import 'brands';


// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;

// component styling
@import 'navigation';
@import 'carousel';

+ 0
- 0
foundation_shopping_list/src/assets/scss/components/.gitkeep View File


+ 13
- 0
foundation_shopping_list/src/assets/scss/components/_carousel.scss View File

.orbit{
.orbit-image {
max-height: 600px;
object-fit: cover;
}

.orbit-caption {
p {
font-size: 150%
}
}

}

+ 24
- 0
foundation_shopping_list/src/assets/scss/components/_navigation.scss View File

.menu {
background-color: $black;
font-size: 150%;

.menu-text {
color: $primary-color;
}

li {
span,i {
color: $white;
}

i {
padding-right: 10px;
}

&:hover:not(.menu-text) {
background-color: lighten($black, 20%);
}

padding: 50px;
}
}

+ 0
- 0
foundation_shopping_list/src/assets/scss/global/_typography.scss View File


+ 1
- 0
foundation_shopping_list/src/assets/webfonts View File

../../node_modules/@fortawesome/fontawesome-free/webfonts/

+ 0
- 0
foundation_shopping_list/src/data/.gitkeep View File


+ 13
- 0
foundation_shopping_list/src/data/global.yml View File

nav:
-
link: vegetables.html
text: Gemüse
icon: fas fa-carrot
-
link: milk.html
text: Milchprodukte
icon: fas fa-cheese
-
link: meat.html
text: Fleisch
icon: fas fa-drumstick-bite

+ 14
- 0
foundation_shopping_list/src/data/products.yml View File

vegslides:
-
img: veg1.jpg
caption-heading: Frühling
caption-body: Besonders zartes Obst und Gemüse bekommt man im Frühling. Dazu zählen zum Beispiel Spargel und Erdbeeren
alt: Vegetables
-
img: veg2.jpg
caption: Lots of different vegetables
alt: Vegetables
-
img: veg3.jpg
caption: Lots of different vegetables
alt: Vegetables

+ 23
- 0
foundation_shopping_list/src/layouts/default.html View File

{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einkaufsliste | {{page}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>

{{> navigation}}
{{#unlesspage 'index'}}
{{> carousel}}
{{/unlesspage}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}

<script src="{{root}}assets/js/app.js"></script>
</body>
</html>

+ 0
- 0
foundation_shopping_list/src/pages/index.html View File


+ 0
- 0
foundation_shopping_list/src/pages/meat.html View File


+ 0
- 0
foundation_shopping_list/src/pages/milk.html View File


+ 0
- 0
foundation_shopping_list/src/pages/vegetables.html View File


+ 0
- 0
foundation_shopping_list/src/partials/.gitkeep View File


+ 18
- 0
foundation_shopping_list/src/partials/carousel.html View File

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
</div>
<ul class="orbit-container">
{{#each products.vegslides}}
<li class="is-active orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../assets/img/{{img}}" alt="{{ alt }}">
<figcaption class="orbit-caption"><h1>{{ caption-heading }}</h1> <br> <p> {{ caption-body }} </p></figcaption>
</figure>
</li>
{{/each}}
</ul>
</div>
</div>

+ 7
- 0
foundation_shopping_list/src/partials/navigation.html View File

<ul class="menu simple icons icons-left">
<li class="menu-text"> Einkaufsliste </li>
{{#each global.nav}}
<li><a href="{{root}}{{link}}"><i class="{{icon}}"></i><span>{{text}}</span></a></li>
{{/each}}
</ul>


+ 355
- 0
foundation_shopping_list/src/styleguide/index.md View File

# The Grid

<p class="lead">Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!</p>

---

## Overview

The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell.

---

## Nesting

In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.

---

## How to Use

Using this framework is easy. Here's how your code will look when you use a series of `<div>` tags to create cells.

```html
<div class="grid-x">
<div class="small-6 medium-4 large-3 cell">...</div>
<div class="small-6 medium-8 large-9 cell">...</div>
</div>
```

<div class="grid-x display">
<div class="small-12 large-4 cell">4</div>
<div class="small-12 large-4 cell">4</div>
<div class="small-12 large-4 cell">4</div>
</div>
<div class="grid-x display">
<div class="small-12 large-3 cell">3</div>
<div class="small-12 large-6 cell">6</div>
<div class="small-12 large-3 cell">3</div>
</div>
<div class="grid-x display">
<div class="small-12 large-2 cell">2</div>
<div class="small-12 large-8 cell">8</div>
<div class="small-12 large-2 cell">2</div>
</div>
<div class="grid-x display">
<div class="small-12 large-3 cell">3</div>
<div class="small-12 large-9 cell">9</div>
</div>
<div class="grid-x display">
<div class="small-12 large-4 cell">4</div>
<div class="small-12 large-8 cell">8</div>
</div>
<div class="grid-x display">
<div class="small-12 large-5 cell">5</div>
<div class="small-12 large-7 cell">7</div>
</div>
<div class="grid-x display">
<div class="small-12 large-6 cell">6</div>
<div class="small-12 large-6 cell">6</div>
</div>

---

## Nesting grid-x

In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.

```html
<div class="grid-x">
<div class="small-8 cell">8
<div class="grid-x">
<div class="small-8 cell">8 Nested
<div class="grid-x">
<div class="small-8 cell">8 Nested Again</div>
<div class="small-4 cell">4</div>
</div>
</div>
<div class="small-4 cell">4</div>
</div>
</div>
<div class="small-4 cell">4</div>
</div>
```

<div class="grid-x display">
<div class="small-8 cell">8
<div class="grid-x">
<div class="small-8 cell">8 Nested
<div class="grid-x">
<div class="small-8 cell">8 Nested Again</div>
<div class="small-4 cell">4</div>
</div>
</div>
<div class="small-4 cell">4</div>
</div>
</div>
<div class="small-4 cellgi">4</div>
</div>

---

## Small Grid

As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.

```html
<div class="grid-x">
<div class="small-2 cell">2</div>
<div class="small-10 cell">10, last</div>
</div>
<div class="grid-x">
<div class="small-3 cell">3</div>
<div class="small-9 cell">9, last</div>
</div>
```

<div class="grid-x display">
<div class="small-2 cell">2</div>
<div class="small-10 cell">10, last</div>
</div>
<div class="grid-x display">
<div class="small-3 cell">3</div>
<div class="small-9 cell">9, last</div>
</div>



# Colors

<p class="lead">Below you can find the different values we created that support the primary color variable you can change at any time in <code>\_settings.scss</code></p>

---

<div class="row up-1 medium-up-3 large-up-5">
<div class="column">
<div class="color-block">
<span style="background: #2199e8"></span>
#2199e8
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #3adb76"></span>
#3adb76
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #ffae00"></span>
#ffae00
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #ec5840"></span>
#ec5840
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #0a0a0a"></span>
#0a0a0a
</div>
</div>
</div>



# Typography

<p class="lead">This design uses Helvetica Neue for headings and paragraph text.</p>

---

## Headings

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)

---

## Paragraphs

Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.

---

<h1>Heading Level 1</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

<h2>Heading Level 2</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

<h3>Heading Level 3</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

<h4>Heading Level 4</h4>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

<h5>Heading Level 5</h5>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

<h6>Heading Level 6</h6>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.



# Buttons

<p class="lead">Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.</p>

---

## Primary Buttons

These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes.

```html_example
<a href="#" class="primary large button">Large button</a>
<a href="#" class="primary button">Regular button</a>
<a href="#" class="primary small button">Small button</a>
<a href="#" class="primary tiny button">Tiny button</a>
```

---

## Secondary Buttons

These buttons are used for less important, secondary actions on a page.

```html_example
<a href="#" class="secondary large button">Large button</a>
<a href="#" class="secondary button">Regular button</a>
<a href="#" class="secondary small button">Small button</a>
<a href="#" class="secondary tiny button">Tiny button</a>
```



# Forms

<p class="lead">Use forms to allow users to interact with the site and provide information to the company.</p>

---

## Elements of a Form

A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):

- Form
- Label
- Input
- Select
- Text area
- Button

---

## How to Use

Make forms great and easy to use with the following rules:

- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
- Series of checkboxes and radio buttons below within a `<ul class="inline-list">`.
- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).

---

## Learn All About Forms

Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.

---

## Form Layouts

Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

- You can size inputs using column sizes, like `.medium-6`, `.small-6`.
- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.

---

## Form Example

```html_example
<form>
<div class="row">
<div class="large-12 columns">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
<div class="large-6 columns">
<div class="row collapse">
<label>Label</label>
<div class="input-group">
<input class="input-group-field" type="text" placeholder="placeholder">
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box</label>
<select>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Choose Your Favorite</label>
<input type="radio" name="radio1" value="radio1" id="radio1"><label for="radio1">Red</label>
<input type="radio" name="radio2" value="radio2" id="radio2"><label for="radio2">Blue</label>
</div>
<div class="large-6 columns">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="placeholder"></textarea>
</div>
</div>
</form>
```



# New Section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla.

```html_example
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
```

+ 135
- 0
foundation_shopping_list/src/styleguide/template.html View File

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Guide</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">

<!-- Style guide-specific CSS goes here. -->
<style>
/* This styles individual sections of the style guide */
.ss-section:not(:last-child) {
padding-bottom: 4rem;
border-bottom: 2px solid #ccc;
margin-bottom: 4rem;
}

/* This styles code blocks used for examples. */
.ss-code code {
display: block;
padding: 1rem;
overflow-x: scroll;
margin-bottom: 1.5rem;
}

/* This styles the example rows used in the grid documentation. */
.grid-x.display {
background: #eee;
font-size: 11px;
margin-bottom: 10px;
line-height: 2rem;
border: solid 1px #c6c6c6;
margin-left: 0 !important;
margin-right: 0 !important; }
.grid-x.display .cell:nth-child(2), .grid-x.display .cell.small-centered, .grid-x.display .cell.large-centered {
background: #e1e1e1; }
.grid-x.display .cell.color-end {
background: #d4d4d4; }

/* This styles the color blocks used in the color documentation. */
.color-block {
border-radius: 2px;
display: block;
padding: 8px 8px 6px;
color: #333;
text-transform: uppercase;
border: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.color-block span {
display: block;
width: 100%;
height: 100px;
margin-bottom: 0.42857rem;
}

.sg-header {
background: #eee;
padding: 2rem;
}

.grid-container {
max-width: 1400px;
}

.sg-side-menu {
margin-left: 1rem;
}

.grid-container.padded {
padding-top: 2rem;
}

.sg-side-menu a {
transition: all 0.15s ease-in;
}

.sg-side-menu a:hover {
background: #eee;
}

.sg-side-menu a:focus {
background: #1468a0;
color: #fff;
}

.sg-side-menu.menu {
overflow: auto;
height: 100vh;
padding-bottom: 5rem;
}
</style>
</head>
<body>

<header class="sg-header" id="sg-header">
<div class="grid-container">
<h1>Style Guide</h1>
<p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
<a href="https://foundation.zurb.com/sites/docs/" class="button">Visit the Docs</a>
<a href="https://foundation.zurb.com/forum" class="secondary button">Foundation Forum</a>
<a href="https://foundation.zurb.com/get-involved/support.html" class="secondary button">Technical Support</a>
</div>
</header>

<div class="grid-container padded">
<div class="grid-x grid-margin-x" data-sticky-container>

<div class="large-3 medium-4 cell">
<div class="sticky" data-sticky data-top-anchor="sg-header:bottom">
<ul class="vertical menu sg-side-menu" data-smooth-scroll data-animation-easing="swing">

{{#each pages}}
<li><a href="#{{ anchor }}">{{ title }}</a></li>
{{/each}}

</ul>
</div>
</div>

<div class="large-9 medium-8 cell">
{{#each pages}}
<section class="ss-section" id="{{ anchor }}">
{{ body }}
</section>
{{/each}}
</div>

</div>
</div>

<script src="assets/js/app.js"></script>
</body>
</html>

+ 8692
- 0
foundation_shopping_list/yarn.lock
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save