style: added button colors
This commit is contained in:
Joshua Shoemaker
parent
68145eb08e
commit
745599db46
@ -27,4 +27,28 @@ button{
|
|||||||
|
|
||||||
#app{
|
#app{
|
||||||
width: 960px;
|
width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-yellow{
|
||||||
|
background-color: lightgoldenrodyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-brown{
|
||||||
|
background-color: #FFF3E8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-purple{
|
||||||
|
background-color: #F3E8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-green{
|
||||||
|
background-color: #E8FFF3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-grey{
|
||||||
|
background-color: #E8FCFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-blue{
|
||||||
|
background-color: #E8F4FF;
|
||||||
}
|
}
|
||||||
118
index.html
118
index.html
@ -32,7 +32,7 @@
|
|||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row" style="background-color: rgb(250, 250, 250);">
|
<div class="row" style="background-color: rgb(253, 253, 253);">
|
||||||
|
|
||||||
<div id="order" class="three columns">
|
<div id="order" class="three columns">
|
||||||
<h5>Order</h5>
|
<h5>Order</h5>
|
||||||
@ -43,28 +43,28 @@
|
|||||||
<div id="menu" class="seven columns" data-view="drink-builder">
|
<div id="menu" class="seven columns" data-view="drink-builder">
|
||||||
<div id="options-menu" class="drink-menu">
|
<div id="options-menu" class="drink-menu">
|
||||||
<h5>Drink Options</h5>
|
<h5>Drink Options</h5>
|
||||||
<button class="button-primary" data-name="ICED" data-value="">ICED</button>
|
<button class="button-blue" data-name="ICED" data-value="">ICED</button>
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="CAFFEINE" data-value="DECAF">DECAF</button>
|
<button class="button-brown" data-name="CAFFEINE" data-value="DECAF">DECAF</button>
|
||||||
<button class="button-primary" data-name="CAFFEINE" data-value="HALFCAF">1/2 Caf</button>
|
<button class="button-brown" data-name="CAFFEINE" data-value="HALFCAF">1/2 Caf</button>
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="CAFFEINE" data-value="TWOTHIRDS">2/3 Caf</button>
|
<button class="button-brown" data-name="CAFFEINE" data-value="TWOTHIRDS">2/3 Caf</button>
|
||||||
<button class="button-primary" data-name="CAFFEINE" data-value="THREEFOURTHS">3/4 Caf</button>
|
<button class="button-brown" data-name="CAFFEINE" data-value="THREEFOURTHS">3/4 Caf</button>
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="SHOTCOUNT" data-value="SOLO">SOLO</button>
|
<button class="button-purple" data-name="SHOTCOUNT" data-value="SOLO">SOLO</button>
|
||||||
<button class="button-primary" data-name="SHOTCOUNT" data-value="DOPPIO">DOPPIO</button>
|
<button class="button-purple" data-name="SHOTCOUNT" data-value="DOPPIO">DOPPIO</button>
|
||||||
<button class="button-primary" data-name="SHOTCOUNT" data-value="TRIPLE">TRIPLE</button>
|
<button class="button-purple" data-name="SHOTCOUNT" data-value="TRIPLE">TRIPLE</button>
|
||||||
<button class="button-primary" data-name="SHOTCOUNT" data-value="QUAD">QUAD</button>
|
<button class="button-purple" data-name="SHOTCOUNT" data-value="QUAD">QUAD</button>
|
||||||
<button class="button-primary" data-name="SHOTCOUNT" data-value="MORESHOTS">MORESHOTS</button>
|
<button class="button-purple" data-name="SHOTCOUNT" data-value="MORESHOTS">MORESHOTS</button>
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
@ -73,20 +73,20 @@
|
|||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
|
|
||||||
<button class="button-primary" data-name="SIZE" data-value="KIDS">KIDS</button>
|
<button class="button-yellow" data-name="SIZE" data-value="KIDS">KIDS</button>
|
||||||
<button class="button-primary" data-name="SIZE" data-value="MINI">MINI</button>
|
<button class="button-yellow" data-name="SIZE" data-value="MINI">MINI</button>
|
||||||
|
|
||||||
|
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="SHOTTYPE" data-value="RESTRETTO">RESTRETTO</button>
|
<button class="button-green" data-name="SHOTTYPE" data-value="RESTRETTO">RESTRETTO</button>
|
||||||
<button class="button-primary" data-name="SHOTTYPE" data-value="LONG">LONG</button>
|
<button class="button-green" data-name="SHOTTYPE" data-value="LONG">LONG</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="SIZE" data-value="SHORT">SHORT</button>
|
<button class="button-yellow" data-name="SIZE" data-value="SHORT">SHORT</button>
|
||||||
<button class="button-primary" data-name="SIZE" data-value="TALL">TALL</button>
|
<button class="button-yellow" data-name="SIZE" data-value="TALL">TALL</button>
|
||||||
<button class="button-primary" data-name="SIZE" data-value="GRANDE">GRANDE</button>
|
<button class="button-yellow" data-name="SIZE" data-value="GRANDE">GRANDE</button>
|
||||||
<button class="button-primary" data-name="SIZE" data-value="VENTI">VENTI</button>
|
<button class="button-yellow" data-name="SIZE" data-value="VENTI">VENTI</button>
|
||||||
<button class="button-primary" data-name="SIZE" data-value="TRENTA">TRENTA</button>
|
<button class="button-yellow" data-name="SIZE" data-value="TRENTA">TRENTA</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="brewed-menu" class="drink-menu" style="display: none;">
|
<div id="brewed-menu" class="drink-menu" style="display: none;">
|
||||||
@ -97,75 +97,75 @@
|
|||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="POUROVERPPR">POUR OVER PPR</button>
|
<button class="button-brown" data-name="RECIPE" data-value="POUROVERPPR">POUR OVER PPR</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="POUROVERDARK">POUR OVER DARK</button>
|
<button class="button-purple" data-name="RECIPE" data-value="POUROVERDARK">POUR OVER DARK</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="POUROVERBLOND">POUR OVER BLOND</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="POUROVERBLOND">POUR OVER BLOND</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="POUROVERDECAF">POUR OVER DECAF</button>
|
<button class="button-blue" data-name="RECIPE" data-value="POUROVERDECAF">POUR OVER DECAF</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEE">ICED COFFEE</button>
|
<button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEE">ICED COFFEE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEEWMILK">ICED COFFEE w/ MILK</button>
|
<button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEEWMILK">ICED COFFEE w/ MILK</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="DECAFICEDCOFFEE">DECAF ICED COFFEE</button>
|
<button class="button-blue" data-name="RECIPE" data-value="DECAFICEDCOFFEE">DECAF ICED COFFEE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="DECAFICEDCOFFEEWMILK">DECAF ICED COFFEE w/ MILK</button>
|
<button class="button-blue" data-name="RECIPE" data-value="DECAFICEDCOFFEEWMILK">DECAF ICED COFFEE w/ MILK</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEEREFILL">ICED COFFEE REFILL</button>
|
<button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEEREFILL">ICED COFFEE REFILL</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="COLDBREW">COLD BREW</button>
|
<button class="button-grey" data-name="RECIPE" data-value="COLDBREW">COLD BREW</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="COLDBREWWMILK">COLD BREW w/ MILK</button>
|
<button class="button-grey" data-name="RECIPE" data-value="COLDBREWWMILK">COLD BREW w/ MILK</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="NITROCOLDBREW">NITRO COLD BREW</button>
|
<button class="button-grey" data-name="RECIPE" data-value="NITROCOLDBREW">NITRO COLD BREW</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="VSWTCRMCOLDBREW">VSWTCRM COLD BREW</button>
|
<button class="button-grey" data-name="RECIPE" data-value="VSWTCRMCOLDBREW">VSWTCRM COLD BREW</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="COLDBREWREFILL">COLD BREW REFILL</button>
|
<button class="button-grey" data-name="RECIPE" data-value="COLDBREWREFILL">COLD BREW REFILL</button>
|
||||||
|
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="CAFEMISTO">CAFE MISTO</button>
|
<button class="button-brown" data-name="RECIPE" data-value="CAFEMISTO">CAFE MISTO</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="POUROVERPPR">SPCDSWTCRM COLD BREW</button>
|
<button class="button-grey" data-name="RECIPE" data-value="POUROVERPPR">SPCDSWTCRM COLD BREW</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="PIKE">PIKE PLACE ROAST</button>
|
<button class="button-brown" data-name="RECIPE" data-value="PIKE">PIKE PLACE ROAST</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="DARK">DARK ROAST</button>
|
<button class="button-purple" data-name="RECIPE" data-value="DARK">DARK ROAST</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="BLOND">BLOND ROAST</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="BLOND">BLOND ROAST</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="DECAFPIKE">DECAF PIKE PLACE ROAST</button>
|
<button class="button-blue" data-name="RECIPE" data-value="DECAFPIKE">DECAF PIKE PLACE ROAST</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="HOTCOFFEEREFILL">HOT COFFEE REFILL</button>
|
<button class="button-brown" data-name="RECIPE" data-value="HOTCOFFEEREFILL">HOT COFFEE REFILL</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="espresso-menu" class="drink-menu" style="display: none;">
|
<div id="espresso-menu" class="drink-menu" style="display: none;">
|
||||||
<h5>Espresso</h5>
|
<h5>Espresso</h5>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="AMERICANO">AMERICANO</button>
|
<button class="button-purple" data-name="RECIPE" data-value="AMERICANO">AMERICANO</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ESPRESSO">ESPRESSO</button>
|
<button class="button-purple" data-name="RECIPE" data-value="ESPRESSO">ESPRESSO</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ESPRESSOMACCHIATO">ESPRESSO MACCHIATO</button>
|
<button class="button-purple" data-name="RECIPE" data-value="ESPRESSOMACCHIATO">ESPRESSO MACCHIATO</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="ESPRESSOCONPANNA">ESPRESSO CON PANNA</button>
|
<button class="button-purple" data-name="RECIPE" data-value="ESPRESSOCONPANNA">ESPRESSO CON PANNA</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="DOUBLESHOT">STRBUX DOUBLESHOT ON ICE</button>
|
<button class="button-purple" data-name="RECIPE" data-value="DOUBLESHOT">STRBUX DOUBLESHOT ON ICE</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="LATTE">LATTE</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="LATTE">LATTE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="CINNDOLLATTE">CINN DOLCE LATTE</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="CINNDOLLATTE">CINN DOLCE LATTE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="CAPPUCCINO">CAPPUCCINO</button>
|
<button class="button-brown" data-name="RECIPE" data-value="CAPPUCCINO">CAPPUCCINO</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="FLATWHITE">FLATWHITE</button>
|
<button class="button-grey" data-name="RECIPE" data-value="FLATWHITE">FLATWHITE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="LATTEMACCHIATO">LATTE MACCHIATO</button>
|
<button class="button-grey" data-name="RECIPE" data-value="LATTEMACCHIATO">LATTE MACCHIATO</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="SKINNYLATTE">SKINNY LATTE</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="SKINNYLATTE">SKINNY LATTE</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="SKINNYCINNDOLLATTE">SKINNY CINN DOLCE LATTE</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="SKINNYCINNDOLLATTE">SKINNY CINN DOLCE LATTE</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="CARAMELMACCHIATO">CARAMEL MACCHIATO</button>
|
<button class="button-purple" data-name="RECIPE" data-value="CARAMELMACCHIATO">CARAMEL MACCHIATO</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="SKINNYCARAMELMACCHIATO">SKINNY CARAMEL MAC</button>
|
<button class="button-purple" data-name="RECIPE" data-value="SKINNYCARAMELMACCHIATO">SKINNY CARAMEL MAC</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
<button class="empty-button" data-name="" data-value="">.</button>
|
<button class="empty-button" data-name="" data-value="">.</button>
|
||||||
|
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="MOCHA">MOCHA</button>
|
<button class="button-brown" data-name="RECIPE" data-value="MOCHA">MOCHA</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="SKINNYMOCHA">SKINNY MOCHA</button>
|
<button class="button-brown" data-name="RECIPE" data-value="SKINNYMOCHA">SKINNY MOCHA</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="WHITEMOCHA">WHITE MOCHA</button>
|
<button class="button-brown" data-name="RECIPE" data-value="WHITEMOCHA">WHITE MOCHA</button>
|
||||||
<button class="button-primary" data-name="RECIPE" data-value="PSL">PUMKIN SPICE LATTE</button>
|
<button class="button-yellow" data-name="RECIPE" data-value="PSL">PUMKIN SPICE LATTE</button>
|
||||||
<button class="button-default" data-name="" data-value="">SESN/RSRV OPTIONS</button>
|
<button class="button-default" data-name="" data-value="">SESN/RSRV OPTIONS</button>
|
||||||
|
|
||||||
<button class="button-default" data-name="" data-value="">SEASONAL LATTE</button>
|
<button class="button-default" data-name="" data-value="">SEASONAL LATTE</button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user