bynder.search_view.css in Bynder 8
Same filename and directory in other branches
bynder.search_view.css Styles for Entity browser search widget.
File
css/bynder.search_view.cssView source
- /**
- * @file bynder.search_view.css
- * Styles for Entity browser search widget.
- */
-
- /* set default standard media queries for responsive grid. */
- @media only screen and (min-width: 320px) {
- .grid-sizer,
- .grid-item {
- width: 96%;
- }
-
- .gutter-sizer {
- width: 20px;
- }
- }
-
- @media only screen and (min-width: 768px) {
- .grid-sizer,
- .grid-item {
- width: 46%;
- }
-
- .gutter-sizer {
- width: 20px;
- }
- }
-
- @media only screen and (min-width: 992px) {
- .grid-sizer,
- .grid-item {
- width: 23%;
- }
-
- .gutter-sizer {
- width: 10px;
- }
- }
-
- /* Jump back down for XL screens to better utilize the space. */
- @media only screen and (min-width: 1600px) {
- .grid-sizer,
- .grid-item {
- width: 15%;
- }
-
- .gutter-sizer {
- width: 10px;
- }
- }
-
- #thumbnails {
- margin-top: 2em;
- }
-
- .grid-item {
- border: 2px solid lightgray;
- box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.13);
- float: left;
- position: relative;
- transition: .2s;
- }
-
- .grid-item .form-type-checkbox {
- display: none;
- }
-
- .grid-item img {
- display: block;
- width: 100%;
- }
-
- .grid-item .more-info {
- background: #000000;
- background: rgba(0, 0, 0, 0.85);
- bottom: 0;
- color: whitesmoke;
- left: 0;
- overflow: hidden;
- position: absolute;
- transition: .2s;
- width: 100%;
- }
-
- .grid-item:hover .more-info {
- opacity: .15;
- }
-
- .grid-item .more-info .name {
- margin: 0.5em 0.5em 0 0.5em;
- }
-
- .grid-item .more-info .type {
- margin: 0 0.5em 0.5em 0.5em;
- }
-
- .grid-item.checked:after {
- background-size: 54px 54px;
- }
-
- .grid-item.item-style {
- opacity: 1;
- transition: opacity .25s ease-in-out;
- -moz-transition: opacity .25s ease-in-out;
- -webkit-transition: opacity .25s ease-in-out;
- }
-
- .grid-item:hover {
- border: 2px solid darkgrey;
- }
-
- .grid-item.checked {
- border: 2px solid darkgrey;
- }
-
- .grid-item.checked:after {
- background: url("../images/checkmark.svg") no-repeat center center;
- content: " ";
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
- }
-
- .bynder-filters .form-item {
- display: inline-block;
- vertical-align: top;
- }
-
- #edit-search-button {
- clear: both;
- display: block;
- margin-left: 0;
- }