fix: add reset buttons

feat: add header messages BREAKING CHANGE: add "button" element instead "link" element in user-menu
FromDoppler · Feb 22, 2019 · 6fbd933 · 6fbd933
1 parent fc3cbde
commit 6fbd933
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 9 deletions.
diff --git a/assets/scss/core/_reset.scss b/assets/scss/core/_reset.scss
@@ -85,6 +85,7 @@ pre {
  */
 a {
   background-color: transparent;
+  text-decoration: none;
 }
 /**
  * 1. Remove the bottom border in Chrome 57-
@@ -159,6 +160,14 @@ img {
 }
 /* Forms
    ========================================================================== */
+
+button {
+  font-family: inherit;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background: none;
+}
 /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.

diff --git a/assets/scss/templates/_header.scss b/assets/scss/templates/_header.scss
@@ -1,14 +1,14 @@
 /* header */
 $dp-header-height: 4em;
 $dp-border-radius: 5px;
-$dp-text-aling: center;
-/* header */
+$dp-text-aling: center; /* header */
+
 .header-main {
   height: $dp-header-height;
   border-bottom: 1px solid $dp-color-sylver;
   box-shadow: 0 0 0 4px $dp-color-snow;
   background: $dp-color-white;
-  position: fixed;
+  position: relative;
   width: 100%;
   left: 0;
   top: 0;
@@ -122,6 +122,7 @@ $dp-text-aling: center;
   width: 100%;
 }
 /* nav right */
+
 .nav-right-main {
   display: flex;
 }
@@ -291,12 +292,17 @@ $dp-text-aling: center;
   border-top: 1px solid $dp-border-grey;
   padding: 10px 0;
 
-  .buy-plan {
+  .user-plan {
     color: $dp-color-green;
     font-size: 11px;
     text-transform: uppercase;
   }
 
+  .disabled {
+    cursor: text;
+    opacity: 0.4;
+  }
+
   .buy-plan:hover {
     color: $dp-color-darkgreen;
   }
@@ -321,7 +327,8 @@ $dp-text-aling: center;
 
   .header-main.open {
     .nav-left-main {
-      right: 0;
+      // right: 0;
+      width: 303px;
     }
 
     .nav-right-main .icon-close {
@@ -341,12 +348,13 @@ $dp-text-aling: center;
 
   .nav-left-main {
     position: absolute;
-    right: -300px;
+    right: 0;
+    width: 0;
     top: 65px;
     height: calc(100vh - 65px);
     background: $dp-color-white;
     border-left: 1px solid $dp-color-ghostwhite;
-    transition: right 0.6s ease;
+    transition: all 0.6s ease;
   }
 
   .nav-right-main {

diff --git a/assets/scss/templates/_messages-header.scss b/assets/scss/templates/_messages-header.scss
@@ -0,0 +1,73 @@
+/* messages headers*/
+
+.messages-container {
+  display: flex;
+  // height: 50px;
+  padding: 0 2%;
+  margin-bottom: 4px;
+  font-family: $dp-font-family;
+}
+
+.messages-container .wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.messages-container p {
+  color: #fff;
+  font-size: $dp-font-size-small;
+}
+
+.messages-container.error .button {
+  color: #e34f45;
+}
+
+.messages-container.message .button {
+  color: #65c192;
+}
+
+.messages-container .button {
+  margin-left: 20px;
+}
+
+.messages-container.message {
+  background: $dp-color-lightgreen;
+}
+
+.messages-container.warning {
+  background: $dp-color-yellow;
+}
+
+.messages-container.error {
+  background: $dp-color-red;
+}
+/* buttons */
+.button {
+  border: 0;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  font-size: $dp-font-size-small;
+  line-height: 45px;
+  padding-left: 20px;
+  padding-right: 20px;
+  height: 45px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.button--light {
+  background: #fff;
+  border: 1px solid #fff;
+  color: #666;
+}
+
+.button--tiny {
+  font-size: 13px;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
diff --git a/assets/templates/index.html b/assets/templates/index.html
@@ -29,6 +29,26 @@
   <link rel="shortcut icon" type="image/x-icon" href="https://www.fromdoppler.com/favicon.ico" />
 </head>
 <body>
+<!-- rojo -->
+<div class="messages-container error">
+  <div class="wrapper">
+    <p class="ng-binding">Para que puedas enviar tu próxima Campaña, antes necesitamos verificar el origen de tus Suscriptores.</p>
+    <a href="#" class="button button--light button--tiny">Verificar Ahora</a>
+  </div>
+</div><!-- error -->
+<!-- amarillo -->
+<div class="messages-container warning">
+  <div class="wrapper">
+    <p>Thanks! We’ll contact you ASAP and if everything is fine, you’ll be able to send your Campaign.</p>
+  </div>
+</div><!-- warning-->
+<!-- verde -->
+<div class="messages-container message">
+  <div class="wrapper">
+    <p>Posees una cuenta gratis de 500  Suscriptores. Potencia tus Campañas con los beneficios de un Plan Pago.</p>
+    <a href="#" class="button button--light button--tiny">Comprar Ahora</a>
+  </div>
+</div><!-- message -->
 <header class="header-main">
   <div class="header-wrapper">
       <div class="logo"><span class="ms-icon icon-doppler-logo"></span></div>
@@ -73,8 +93,8 @@
                   <p class="user-plan--monthly-text">Cuenta Gratis | <strong>500 Suscriptores</strong></p>
                   <p class=""><strong>500</strong> Suscriptores disponibles</p>
                 </div>
-                  <a href="#" class="buy-plan">comprar</a>
-              </div>
+                  <button class="user-plan" type="button">comprar</button>
+              </div><!-- user-plan--container -->
                 <ul class="options-user">
                   <li><a href="">Panel de Control</a></li>
                   <li><a href="">Centro de descargas</a></li>