Add full width and no border css modifiers

7 years ago · ddc3d52378
--- a/index.html
+++ b/index.html
@@ -8,8 +8,7 @@
  <link rel="stylesheet" href="dist/lesspass.min.css">
  <style>
    div.center {
      width: 470px;
      max-width: 100%;
      max-width: 420px;
      display: block;
      margin-left: auto;
      margin-right: auto;
@@ -17,14 +16,14 @@

    @media (min-width: 544px) {
      #lesspass {
        margin-top: 1em;
        margin-top: 3em;
      }
    }
  </style>
 </head>
 <body>
 <div class="center">
  <div id="lesspass" class="m-x-auto"></div>
 <div class="center lesspass--full-width">
  <div id="lesspass"></div>
 </div>
 <script src="dist/lesspass.min.js"></script>
 </body>
--- a/src/LessPass.scss
+++ b/src/LessPass.scss
@@ -43,8 +43,17 @@
@import '~hint.css/hint.css';
@import '~awesomplete/awesomplete.css';

 .lesspass--unbordered #lesspass{
  border: none;
 }

 .lesspass--full-width #lesspass{
  max-width: none !important;
 }

 #lesspass {
  color: #464646;
  max-width: 420px;
 }

@media (max-width: 419px) {
--- a/src/LessPass.vue
+++ b/src/LessPass.vue
@@ -1,5 +1,5 @@
 <template>
  <div id="lesspass" class="card" style="max-width: 420px;">
  <div id="lesspass" class="card">
    <lesspass-menu></lesspass-menu>
    <lesspass-message></lesspass-message>
    <div class="card-block">