Commit 2ee24d5e authored by David Suissa's avatar David Suissa
Browse files

Issue #3551724 by dydave, ressa: Admin Toolbar Search: Clean-up and... 

Issue #3551724 by dydave, ressa: Admin Toolbar Search: Clean-up and refactoring of CSS and image files.
parent 5e5ced63

admin_toolbar_search/css/admin.toolbar_search.css

+86 −71
Original line number Diff line number Diff line 
#admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab {

  display: none;

}

/* CSS styles for the Admin Toolbar Search module. */



#admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab.visible {

/* Styles for the search tab menu link and the mobile search tab. */

#admin-toolbar-search-tab,

#admin-toolbar-mobile-search-tab {

  /* Add a small magnifier icon before the search tab link. */

  .toolbar-item {

    display: block;

  width: 100%;

    &::before {

      /* Use the lighter color icon ('#bebebe') by default. */

      background-image: url("../images/search_icon.svg");

    }



#admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab .js-form-item.form-item {

  margin: 0.75rem 0;

  padding-left: 1rem;

  padding-right: 1rem;

}



#admin-toolbar-mobile-search-tab .toolbar-item::before {

  background-image: url('../../misc/icons/bebebe/loupe.svg');

  }



#admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab #admin-toolbar-search-input {

  width: 100%;

}



@media only screen and (min-width: 769px) {

/* Styles for the mobile search tab and its interaction with the search tab. */

#admin-toolbar-mobile-search-tab {

  /* These styles only work if the mobile tab is before the search tab. */

  ~ #admin-toolbar-search-tab {

    /* Show the search tab and hide the search field by default on mobile. */

    display: none;

  }



  #admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab {

    /* Set the search field to full width when visible. */

    &.visible {

      display: block;

      width: 100%;

    }



  #admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab.visible {

    width: auto;

    /* Add padding to the wrapper around the search label and input field. */

    .js-form-item {

      margin: 0;

      padding: 0.3rem 1rem;

    }

    /* Make the search input field take the full width on mobile. */

    #admin-toolbar-search-input {

      width: 100%;

    }



  #admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab .js-form-item.form-item {

    margin-top: 0.3rem;

    margin-bottom: 0;

  }

}



/* Styles for the search JS autocomplete input text field. */

#admin-toolbar-search-input {

  min-height: 30px;

  height: 100%;

  padding: 0 0.4rem;

  line-height: 1.75rem;

  min-height: 1.875rem;

  margin: 0;

  padding: 0 0.4rem;

  color: #3b3b3b;

  background: #fcfcfa;

  border: 1px solid #ccc;

  border-radius: unset;

  font-size: 1em;

}



.ui-autocomplete .ui-menu-item span.admin-toolbar-search-url {

  display: none;

  background: #fcfcfa;

  font-size: 0.813rem;

  line-height: 1.75rem;

}



/* Styles for the autocomplete suggestion list. Class added through the JS. */

.admin-toolbar-search-autocomplete-list {

  max-height: 300px;

  /* Limit the height of the suggestion list (to '300px' max) and enable

  vertical scrolling if needed. */

  overflow-y: scroll;

}



.admin-toolbar-search-autocomplete-list .ui-menu-item .ui-state-active {

  margin: 0;

}



.admin-toolbar-search-autocomplete-list .ui-menu-item .ui-menu-item-wrapper {

  max-height: 18.75rem;

  font-size: 0.7rem;



  /* Styles for each suggestion item in the autocomplete list. */

  .ui-menu-item {

    /* Add a bit of vertical spacing between the list items. */

    .ui-menu-item-wrapper {

      padding: 0.125rem 0.75rem;

      border: 1px solid transparent;

  padding: 3px 1em 3px 0.4em;

    }



.admin-toolbar-search-autocomplete-list .ui-menu-item a {

  color: #333333;

    /* Styles for the links within each suggestion item. */

    a {

      /* Darker color on a white background without underline. */

      text-decoration: none;

      color: #333;

    }



.admin-toolbar-search-autocomplete-list .ui-menu-item .ui-state-active:hover a,

.admin-toolbar-search-autocomplete-list .ui-menu-item .ui-state-active a {

    /* Styles for the active (hovered or keyboard selected) suggestion item. */

    .ui-state-active {

      &:hover a,

      a {

        /* Change link color on hover or when selected with keyboard. */

        color: white;

      }

    }

    /* Hide link URLs in the span tags within autocomplete suggestion items. */

    .admin-toolbar-search-url {

      display: none;

    }

  }

}



#toolbar-item-administration-search-tray label {

/* Styles for the search form within the admin toolbar tray. */

#toolbar-item-administration-search-tray {

  /* Add margin to the wrapper around the search label and input field. */

  .js-form-item {

    margin: 0.6rem;

  }

  /* Basic styles for the search label and input field. */

  label {

    display: inline-block;

  color: #000000;

  margin-right: .5em;

    margin-right: 0.45rem;

    color: #000;

    font-weight: bold;

  }



#toolbar-item-administration-search-tray div.form-item {

  margin: 0.75em;

}



#toolbar-item-administration-search-tray input {

  input {

    display: inline-block;

  padding: 0.3em 0.4em 0.3em 0.5em;

  font-size: 1em;

    padding: 0.3rem 0.5rem;

    font-size: 0.86rem;

  }



#admin-toolbar-search-tab .toolbar-item:before {

  background-image: url('../../misc/icons/bebebe/loupe.svg');

}



#admin-toolbar-search-tab .toolbar-item:active:before,

#admin-toolbar-search-tab .toolbar-item.is-active:before {

  background-image: url('../../misc/icons/ffffff/loupe.svg');

/* Mobile first media query for screens wider than 769px (desktop, tablets). */

@media only screen and (min-width: 769px) {

  .admin-toolbar-search-autocomplete-list {

    font-size: 1rem;

  }

  #admin-toolbar-mobile-search-tab {

    /* Hide the mobile search tab on wider screens by default. */

    display: none;

    /* Display the search field and adjust its styles for wider screens. */

    ~ #admin-toolbar-search-tab {

      display: block;

      /* Reset width to auto for wider screens so it fits in the toolbar. */

      &.visible {

        width: auto;

      }

    }

  }

#toolbar-item-administration-search-tray div.form-item.js-form-type-textfield {

  margin: 0.75em 0;

}

misc/icons/ffffff/loupe.svg

deleted100644 → 0
+0 −1
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#FFFFFF" d="M14.648 12.788l-4.23-4.228c.525-.855.834-1.858.834-2.938 0-3.105-2.52-5.624-5.627-5.624-3.106.002-5.625 2.521-5.625 5.627 0 3.105 2.519 5.625 5.625 5.625 1.076 0 2.08-.309 2.936-.832l4.229 4.229c.194.195.515.195.707 0l1.151-1.146c.194-.2.194-.519 0-.713zm-13.35-7.163c0-2.39 1.938-4.327 4.327-4.327 2.391 0 4.328 1.937 4.328 4.327 0 2.391-1.936 4.327-4.328 4.327-2.39 0-4.327-1.936-4.327-4.327z"/></svg>