Refactor grid element style naming.

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index d9a78c4c8e0bc641f275d25f15ae277054f99f5f..c0a1cf84a7c11c5be766e1922d1a36cb2cc93027 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -592,60 +592,56 @@
                .flex.y-full {
                        height: 100%;
                }
-               .grid-x {
+               .grid {
                        align-items: center;
                        display: grid;
                        grid-template-columns: repeat(12, 1fr);
                }
-               .grid-y {
-                       display: grid;
-                       grid-template-rows: repeat(12, 1fr);
-               }
-               .grid.x-1 {
+               .grid > .col-1 {
                        grid-column-start: auto;
                        grid-column-end: span 1;
                }
-               .grid.x-2 {
+               .grid > .col-2 {
                        grid-column-start: auto;
                        grid-column-end: span 2;
                }
-               .grid.x-3 {
+               .grid > .col-3 {
                        grid-column-start: auto;
                        grid-column-end: span 3;
                }
-               .grid.x-4 {
+               .grid > .col-4 {
                        grid-column-start: auto;
                        grid-column-end: span 4;
                }
-               .grid.x-5 {
+               .grid > .col-5 {
                        grid-column-start: auto;
                        grid-column-end: span 5;
                }
-               .grid.x-6 {
+               .grid > .col-6 {
                        grid-column-start: auto;
                        grid-column-end: span 6;
                }
-               .grid.x-7 {
+               .grid > .col-7 {
                        grid-column-start: auto;
                        grid-column-end: span 7;
                }
-               .grid.x-8 {
+               .grid > .col-8 {
                        grid-column-start: auto;
                        grid-column-end: span 8;
                }
-               .grid.x-9 {
+               .grid > .col-9 {
                        grid-column-start: auto;
                        grid-column-end: span 9;
                }
-               .grid.x-10 {
+               .grid > .col-10 {
                        grid-column-start: auto;
                        grid-column-end: span 10;
                }
-               .grid.x-11 {
+               .grid > .col-11 {
                        grid-column-start: auto;
                        grid-column-end: span 11;
                }
-               .grid.x-12 {
+               .grid > .col-12 {
                        grid-column-start: auto;
                        grid-column-end: span 12;
                }
@@ -748,9 +744,9 @@
 
                        <!-- Wallet Select -->
 
-                       <div id="wallets" class="grid-x">
-                               <label for="wallet" class="grid x-3">Wallet</label>
-                               <select id="wallet" class="grid x-9" onchange="selectWallet()">
+                       <div id="wallets" class="grid">
+                               <label for="wallet" class="col-3">Wallet</label>
+                               <select id="wallet" class="col-9" onchange="selectWallet()">
                                        <option disabled selected value>Choose...</option>
                                        <hr />
                                        <option value="_new">New</option>
@@ -763,9 +759,9 @@
 
                        <!-- Account Select -->
 
-                       <div id="accounts" class="grid-x">
-                               <label for="account" class="grid x-3">Account</label>
-                               <select id="account" class="grid x-9" disabled onchange="selectAccount()">
+                       <div id="accounts" class="grid">
+                               <label for="account" class="col-3">Account</label>
+                               <select id="account" class="col-9" disabled onchange="selectAccount()">
                                        <option disabled selected value>Choose...</option>
                                        <hr />
                                        <option value="_new">New</option>
@@ -811,10 +807,10 @@
                                                        placeholder="Password" required />
                                        </div>
                                        <hr />
-                                       <div class="grid-x">
-                                               <div class="grid x-4"></div>
-                                               <button id="wallet-new-cancel" class="cancel grid x-4">Cancel</button>
-                                               <button id="wallet-new-ok" class="grid x-4"
+                                       <div class="grid">
+                                               <div class="col-3"></div>
+                                               <button id="wallet-new-cancel" class="cancel col-3">Cancel</button>
+                                               <button id="wallet-new-ok" class="col-3"
                                                        onclick="createWallet().then(w => { console.log(w) })">OK</button>
                                        </div>
                                </div>
@@ -866,10 +862,10 @@
                                                        placeholder="Password" required />
                                        </div>
                                        <hr />
-                                       <div class="grid-x">
-                                               <div class="grid x-4"></div>
-                                               <button id="wallet-import-cancel" class="cancel grid x-4">Cancel</button>
-                                               <button id="wallet-import-ok" class="grid x-4"
+                                       <div class="grid">
+                                               <div class="col-3"></div>
+                                               <button id="wallet-import-cancel" class="cancel col-3">Cancel</button>
+                                               <button id="wallet-import-ok" class="col-3"
                                                        onclick="importWallet().then(w => { console.log(w) })">OK</button>
                                        </div>
                                </div>
@@ -897,10 +893,10 @@
                                                <input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
                                                        placeholder="Password" required />
                                        </div>
-                                       <div class="grid-x">
-                                               <div class="grid x-4"></div>
-                                               <button id="account-new-cancel" class="cancel grid x-4">Cancel</button>
-                                               <button id="account-new-ok" class="grid x-4"
+                                       <div class="grid">
+                                               <div class="col-3"></div>
+                                               <button id="account-new-cancel" class="cancel col-3">Cancel</button>
+                                               <button id="account-new-ok" class="col-3"
                                                        onclick="createAccount().then(a => { console.log(a) })">OK</button>
                                        </div>
                                </div>