vue-nutrition-label
Version:
VueJS component to create a 2018 FDA-style nutrition label
2 lines • 4.33 kB
CSS
@import url(https://fonts.googleapis.com/css?family=Archivo+Black);.nf{border:1px solid #000;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:14px;text-align:left}.nf-amount-per-serving,.nf-calories,.nf-highlight,.nf-serving,.nf-serving-unit-qty,.nf-title{font-family:Archivo Black,sans-serif}.nf-title{font-size:2.15em;line-height:1.15em;margin-top:-6px}.nf-serving-per-container{font-family:Arial,Helvetica,sans-serif;margin-bottom:2px}.nf-serving{font-size:1.2em;line-height:normal;padding:2px 0;clear:both;overflow:auto}.nf-serving-size{margin-left:105px;text-align:right}.nf-amount-per-serving{font-size:.94em}.nf-arrow-down,.nf-arrow-up{width:0;height:0;border-style:solid}.nf-arrows{float:left;padding:6px 5px 0 0}.nf-arrow-up{cursor:pointer;margin-bottom:4px;border-width:0 5px 6px;border-color:transparent transparent #333}.nf-arrow-down{cursor:pointer;margin-top:4px;border-width:6px 5px 0;border-color:#333 transparent transparent}.nf-modifier-field{width:30px;text-align:center;line-height:normal;border:1px solid #666;font-family:Arial,Helvetica,sans-serif;font-size:1em;float:left;padding:2px 0;margin-top:3px}.nf-item-name{display:table;margin-left:42px;min-height:25px}.nf-item-name.read-only{margin-left:0;width:100%;min-height:0}.nf-item-name.read-only .text-serving-size{float:left}.nf-item-name.read-only .text-serving-item{float:right;max-width:160px;text-align:right}.nf-item-name>div{display:table-cell;vertical-align:middle;min-height:24px}.nf-serving-unit-qty{display:inline-block}.nf-calories{font-size:2em;line-height:1em}.nf-percent-dv{font-size:.84em}.nf-vitamin-column{font-size:.94em;padding:1px 0;border-bottom:1px solid #000}.nf-disclaimer,.nf-ingredient-statement{padding-top:8px}.nf-footnote{padding-top:4px;margin-left:5px;font-size:.85em;line-height:1em}.nf-footnote:before{content:"*";float:left;margin-left:-5px}.nf-text-right{text-align:right}.nf-line{border-top:1px solid #000;padding-top:1px;padding-bottom:1px;font-size:.94em}.nf-indent2{margin-left:28px}.nf-indent{padding-left:16px}.nf-pr{float:right}.nf-bar1{height:5px}.nf-bar2{height:10px}.nf-bar1,.nf-bar2{background-color:#000}.clear:after,.clear:before{content:" ";display:table}.clear:after{clear:both}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.pull-right{float:right}.pull-left{float:left}.no-border{border:none}.nf.uk .nf-title{font-family:Arial,Helvetica,sans-serif;font-weight:700;padding-top:8px;padding-bottom:6px}.nf.uk .nf-modifier-field{width:20px;padding:3px;text-align:center;float:none;margin-top:0;margin-right:3px}.nf.uk table{width:100%;border-collapse:collapse;border-top:4px solid #000}.nf.uk table tbody tr td,.nf.uk table tr th{border-bottom:1px solid #000;padding-top:4px;padding-bottom:4px}.nf.uk table tfoot tr td{padding-top:4px;font-size:90%}@font-face{font-family:Helvetica;src:url(static/fonts/Helvetica.71a5484.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica-Bold;src:url(static/fonts/Helvetica-Bold.9d04fa7.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}.nf.ca{font-family:Helvetica;font-size:13px;line-height:15px}.nf.ca .nf-header-wrap{border-bottom:2px solid #000;margin-bottom:3px}.nf.ca .nf-title{font-family:Helvetica-Bold;font-size:19px;line-height:19px;margin:0}.nf.ca .nf-servings-wrap{font-size:14px;line-height:15px;padding-bottom:2px}.nf.ca .nf-serving-text1,.nf.ca .nf-serving-text2{line-height:15px}.nf.ca .nf-serving-text3{line-height:13px}.nf.ca .nf-indent{padding-left:8px}.nf.ca .nf-indent2{margin-left:16px}.nf.ca .nf-highlight{font-family:Helvetica-Bold;font-size:13px}.nf.ca .nf-calories{font-size:14px;border-bottom:5px solid #000;padding-bottom:2px;margin-bottom:3px;float:left}.nf.ca .nf-percent-dv{float:right;font-size:9px;line-height:9px}.nf.ca .nf-percent-dv div{line-height:9px}.nf.ca .nf-no-line{padding-bottom:2px}.nf.ca sub{line-height:1px}.nf.ca .nf-footer{padding-top:3px;font-size:10px;line-height:11px;margin-bottom:-2px}.nf.ca .nf-footer div:first-child{line-height:17px}.nf.ca .nf-footer div:nth-child(2){line-height:10px}.nf.ca .nf-bar1+.nf-line{border:none}
/*# sourceMappingURL=vue-nutrition-label.min.css.map */