SHARE
TWEET

Untitled

a guest Oct 21st, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2. <header>
  3.   <h1>HTML/edit</h1>
  4. </header>
  5. -->
  6. <slot/>
  7.  
  8. <style global type="text/scss">
  9.   /**
  10.    * Grid
  11.    */
  12.  
  13.   #main {
  14.     display: grid;
  15.     grid-auto-columns: auto 1fr auto;
  16.     grid-auto-flow: row;
  17.     grid-gap: 0.25rem 1rem;
  18.  
  19.     background: #EDEDED;
  20.     word-break: keep-all;
  21.     padding-left: 2em;
  22.   }
  23.  
  24.   .route {
  25.     grid-column: 1 / span 3;
  26.   }
  27.  
  28.   header {
  29.     grid-column: 1 / span 3;
  30.     border-radius: 25px;
  31.  
  32.     &.expandable {
  33.       grid-column: 1 / span 2;
  34.     }
  35.   }
  36.  
  37.   .search-result {
  38.     grid-column: 2 / span 1;
  39.   }
  40.  
  41.   .button-add,
  42.   .button-remove {
  43.     grid-column: 3 / span 1;
  44.     align-self: end;
  45.     padding: 0 0 0.25rem;
  46.     width: 5em;
  47.   }
  48.  
  49.   .button-remove {
  50.     grid-row: auto / span 2;
  51.   }
  52.  
  53.   label {
  54.     grid-column: 1 / span 1;
  55.     align-self: center;
  56.     grid-template-rows: 10px 50px;
  57.   }
  58.  
  59.   .label-button {
  60.     font-size: 1em;
  61.     display: grid;
  62.     text-align: center;
  63.   }
  64.  
  65.   select,
  66.   .checkbox-group {
  67.     grid-column: 2 / span 1;
  68.     background-color: #E8E8E8;
  69.    
  70.   }
  71.  
  72.   .checkbox-group {
  73.     grid-template-rows: 10px 50px;
  74.   }
  75.  
  76.   .input-text {
  77.     grid-column: 2 / span 1;
  78.     position: relative;
  79.  
  80.     &.title {
  81.       grid-column: 1 / span 2;
  82.  
  83.       margin-top: 1rem;
  84.  
  85.       input[type=text] {
  86.         border: none;
  87.         padding: 0.25rem 0;
  88.         font-size: 1.5em;
  89.       }
  90.     }
  91.  
  92.     .input {
  93.       text-decoration: underline;
  94.       margin-left: 2em;
  95.       z-index: 1;
  96.       width: 100%;
  97.       background-color: transparent;
  98.     }
  99.  
  100.     .placeholder {
  101.       position: absolute;
  102.       z-index: -1;
  103.       width: 100%;
  104.       opacity: 0.4;
  105.     }
  106.   }
  107.  
  108.   /**
  109.    * Buttons
  110.    */
  111.  
  112.   button {
  113.     display: inline;
  114.     box-sizing: content-box;
  115.  
  116.     margin: 0;
  117.     border: none;
  118.     padding: 10px;
  119.  
  120.     background: #1FC5A0;
  121.     border-radius: 25px;
  122.  
  123.     width: auto;
  124.     height: auto;
  125.  
  126.     font: inherit;
  127.     text-align: center;
  128.  
  129.     cursor: pointer;
  130.  
  131.     align-items: normal;
  132.     perspective-origin: 0 0;
  133.     transform-origin: 0 0;
  134.  
  135.     -moz-appearance: none;
  136.     // -webkit-logical-height: 1em;
  137.     // -webkit-logical-width: auto;
  138.  
  139.     .active {
  140.       font-weight: bold;;
  141.     }
  142.   }
  143.  
  144.   button:active {
  145.     color: inherit;
  146.   }
  147.  
  148.   @supports (-moz-appearance: none) { /* Mozilla-only */
  149.     button::-moz-focus-inner {
  150.       border: none;
  151.       padding: 0;
  152.     }
  153.  
  154.     button:focus {
  155.       outline-style: dotted;
  156.       outline-width: 1px;
  157.     }
  158.   }
  159.  
  160.   label.checkbox {
  161.     margin-right: 1rem;
  162.   }
  163.  
  164.   p {
  165.     color:transparent;
  166.   }
  167. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top