kpsul/bds/static/src/sass/bds.scss

// Compilation command : 
// sass -I shared/static/src/ --watch bds/static/src/sass/bds.scss bds/static/bds/css/bds.css --style compressed

$text: black;

@import "bulma/bulma.sass";

$primary_color: #3e2263;
$background_color: #ddcecc;

html, body {
  background: $background_color;
  font-size: 18px;
}

a {
  text-decoration: none;
  color: #a82305;
}

/* header */

#search-bar {
  background-color: $primary_color;
  padding: 0 1em;
  margin-bottom: 0;

  #logout-mobile {
    display: none;
  }

  @include mobile {
    display: flex;
    flex-wrap: wrap;

    #logout-mobile {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }

    #logout {
      display: none;
    }

    #search-input {
      flex: 0 1 100%;
    }
  }

  // Workaround : `justify-content : <left/right>` pas encore supporté
  // Voir https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  & :first-child, & :last-child {
    justify-content: space-between;
  }

  & :last-child {
    flex-direction: row-reverse;
  }

  input {
    border-radius: 0;
    margin: 10px 0;
  }
}

/* Autocomplétion du BDS */

.highlight {
  text-decoration: underline;
  font-weight: bold;
}

.yourlabs-autocomplete {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      height: 2em;
      line-height: 2em;
      padding: 0;

      a {
        color: inherit;
      }
    }

    li.hilight {
      background: #e8554e;
    }
  }
}

.autocomplete-item {
  display: block;
  width: 480px;
  height: 100%;
  padding: 2px 10px;
  margin: 0;
}

.autocomplete-header {
  background: #b497e1;
}

.autocomplete-value, .autocomplete-new, .autocomplete-more {
  background: white;
}

/* --- Forms --- */

$button_color: lighten($primary_color, 10);

input[type="submit"] {
    background-color: $button_color;
    color: findColorInvert($button_color);

    &:hover {
      background-color: $primary_color;
      color: findColorInvert($primary_color);
    }
}

.button.is-primary {
  background-color: $button_color;
    color: findColorInvert($button_color);

    &:hover {
      background-color: $primary_color;
      color: findColorInvert($primary_color);
    }
}

/* --- Message styling --- */

.notification {
  padding: 0.5em 0;
  font-size: 1.2em;
  text-align: center;
}

/* --- Modals --- */

.modal-card-head {
  background-color: $primary_color;

  .modal-card-title {
    color: findColorInvert($primary_color);
  }
}