canvas-lms/app/stylesheets/components/_imageSearch.scss

100 lines
2.1 KiB
SCSS

/*
* Copyright (C) 2019 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.Unsplash__logo {
width: $ic-sp*10
}
.ImageSearch__images {
margin-top: $ic-sp;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-flow: row wrap;
}
.ImageSearch__loading {
margin-top: $ic-sp*5;
width: 100%;
display: flex;
justify-content: center;
}
.ImageSearch__item {
height: $ic-sp*10;
position: relative;
background: transparent;
border: none;
padding: 0;
&:focus {
outline: 2px solid var(--ic-brand-primary);
outline-offset: 2px;
}
}
.ImageSearch__screenreader {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
}
.ImageSearch__img {
width: auto;
height: 100%;
}
.ImageSearch__wrapper {
position: relative;
margin: $ic-sp;
}
.ImageSearch__attribution {
position: absolute;
bottom: 0;
left: 0; /* stylelint-disable-line property-disallowed-list */
width: 100%;
min-height: 8px;
opacity: 0;
background-color: rgba($ic-color-dark, 1);
z-index: 99;
}
.ImageSearch__wrapper:focus-within .ImageSearch__attribution {
opacity: 0.8;
}
.ImageSearch__wrapper:hover .ImageSearch__attribution {
opacity: 0.8;
}
.ImageSearch__attribution {
& a, & a:link, & a:visited, & a:focus, & a:hover {
color: rgba($ic-color-light, 1);
overflow: wrap;
margin: 0 .25rem;
}
& a:focus, & a:hover {
outline: 1px solid rgba($ic-color-light, 1);
}
}