bulma tests

by toubia95

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<div class="field has-addons test1">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Sear
    </a>
  </div>
</div>
<div class="field has-addons test2">
    <input class="input" type="text" placeholder="Find a repository">
    <a class="button is-info">
      Search
    </a>
</div>

CSS

body {
  padding: 20px !important;
}

.field.has-addons.test1 .control:first-child:not(:only-child) .input {
  width: 141%;
  max-width: 141%;
  border-bottom-right-radius: 4px !important;
  border-top-right-radius: 4px !important;
  }
.field.has-addons.test1 .control:first-child:not(:only-child) .input:not([disabled]):focus,
.field.has-addons.test1 .control:first-child:not(:only-child) .input:not([disabled]):hover {
  z-index: 0 !important;
  }


/*
.input:focus {
   border-color: #3273dc !important;
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25) !important;
   outline: 0 !important;
  }
.field.has-addons .control .input:not([disabled]):focus {
  z-index: 0 !important;
  }
.field.has-addons .control:first-child:not(:only-child) .input {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  }
.field.has-addons .control:first-child:not(:only-child) .input:focus {
  box-shadow: -0.125em 0em 0em 0.125em rgba(50, 115, 220, 0.25) !important;
  }

.button:hover {
  box-shadow: 0.125em 0em 0em 0.125em rgba(50, 115, 220, 0.25) !important;
  }
  */

 .test2 input.input:focus ~ a.button {
   color: red !important;
 }