@collectionspace/cspace-public-browser 1.5.1

package/styles/cspace/SearchQueryInput.css

@@ -0,0 +1,30 @@
+@value searchInputHeight from '../dimensions.css';
+@value highlightColor, inputBgColor, inputBorderColor from '../colors.css';
+
+.common {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.common > input {
+  width: 100%;
+  height: searchInputHeight;
+  box-sizing: border-box;
+  border: 1px solid inputBorderColor;
+  padding: 0 88px 0 32px;
+  background-image: url(../../images/search.svg);
+  background-repeat: no-repeat;
+  background-position: 6px center;
+}
+
+.common > input:focus {
+  outline: 2px solid highlightColor;
+}
+
+.common > button {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 78px;
+  height: 30px;
+}

package/styles/cspace/SearchResultImage.css

@@ -0,0 +1,29 @@
+@value searchResultTileWidth from '../dimensions.css';
+@value panelBorderColor from '../colors.css';
+
+.common {
+  width: 100%;
+  height: searchResultTileWidth;
+  background-color: rgb(252, 252, 252);
+  background-size: cover;
+  box-sizing: border-box;
+}
+
+.noimage {
+  composes: common;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  color: panelBorderColor;
+  font-size: inherit;
+  font-weight: 600;
+  padding: 10%;
+}
+
+@media only screen
+  and (max-width: 539px) {
+  .common {
+    height: 105px;
+  }
+}

package/styles/cspace/SearchResultList.css

@@ -0,0 +1,10 @@
+.common {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0 2px;
+}
+
+.common > p {
+  padding-top: 32px;
+}

package/styles/cspace/SearchResultPanel.css

@@ -0,0 +1,31 @@
+@value filterPanelWidth from '../dimensions.css';
+
+.common {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 0 0 0 filterPanelWidth;
+  min-height: 500px;
+}
+
+.common > header {
+  font-size: .85rem;
+  padding: 10px 10px 2px 10px;
+}
+
+.common > header > div {
+  display: flex;
+  align-items: baseline;
+}
+
+@media only screen
+and (max-width: 768px) {
+  .common {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .common > header {
+    padding-left: 62px;
+  }
+}

package/styles/cspace/SearchResultStats.css

@@ -0,0 +1,4 @@
+.common {
+  flex: 1 1 auto;
+  margin: 0 8px;
+}

package/styles/cspace/SearchResultTile.css

@@ -0,0 +1,67 @@
+@value highlightColor from '../colors.css';
+@value searchResultTileMargin, searchResultTileWidth, searchResultTileBodyHeight from '../dimensions.css';
+
+.common {
+  width: searchResultTileWidth;
+  margin: searchResultTileMargin;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25);
+  border-radius: .25rem;
+  overflow: hidden;
+  text-decoration: none;
+  background-color: white;
+  color: inherit;
+  font-size: 0.9rem;
+  border: 1px solid transparent;
+}
+
+.common:hover {
+  box-shadow:  0 0 8px 1px rgba(0, 0, 0, 0.3);
+  text-decoration: none;
+}
+
+.common:focus {
+  outline: none;
+  border: 1px solid highlightColor;
+  box-shadow:  0 0 8px 1px highlightColor;
+}
+
+.common > article {
+  padding: 10px;
+  height: searchResultTileBodyHeight;
+  box-sizing: border-box;
+}
+
+.common > article > h2 {
+  margin: 0 0 6px 0;
+  font-size: inherit;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media only screen
+and (max-width: 695px) {
+  .common {
+    width: 158px;
+    margin: 6px;
+  }
+
+  .common > div {
+    height: 158px;
+  }
+
+  .common > article {
+    height: 94px;
+  }
+}
+
+@media only screen
+  and (max-width: 539px) {
+  .common {
+    width: 105px;
+    margin: 4px;
+  }
+  .common > article {
+    height: 128px;
+  }
+}

package/styles/cspace/SearchStatus.css

@@ -0,0 +1,12 @@
+@value searchResultTileMargin, searchResultTileWidth, searchResultTileBodyHeight from '../dimensions.css';
+
+.common {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: searchResultTileWidth;
+  height: searchResultTileWidth;
+  margin: searchResultTileMargin;
+  color: #606060;
+  text-align: center;
+}

package/styles/cspace/SearchSubmitButton.css

@@ -0,0 +1,3 @@
+.common {
+  padding: 0;
+}

package/styles/cspace/SortSelect.css

@@ -0,0 +1,19 @@
+@value highlightColor, inputBorderColor from '../colors.css';
+
+.common {
+  -webkit-appearance: none;
+  margin-right: 10px;
+  border: 1px solid inputBorderColor;
+  border-radius: 0;
+  font: inherit;
+  padding: 8px 22px 8px 8px;
+  background-color: inherit;
+  background-image: url(../../images/select.svg);
+  background-repeat: no-repeat;
+  background-position: calc(100% - 2px) center;
+  background-size: 16px;
+}
+
+.common:focus {
+  outline: 2px solid highlightColor;
+}

package/styles/cspace/ToggleFilterPanelButton.css

@@ -0,0 +1,44 @@
+@value highlightColor, panelBorderColor from '../colors.css';
+
+.common {
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  left: 6px;
+  top: 58px;
+  border-radius: 32px;
+  border: none;
+  padding: 0;
+  background: white;
+  background-repeat: no-repeat;
+  background-position: center center;
+  box-shadow: 0 0 9px 3px panelBorderColor;
+  display: none;
+  z-index: 15;
+}
+
+.common:focus {
+  outline: none;
+  box-shadow: 0 0 9px 3px highlightColor;
+}
+
+.common:hover {
+  background-color: rgb(248, 248, 248);
+}
+
+.collapsed {
+  composes: common;
+  background-image: url(../../images/filter.svg);
+}
+
+.expanded {
+  composes: common;
+  background-image: url(../../images/hideLeft.svg);
+}
+
+@media only screen
+and (max-width: 768px) {
+  .common {
+    display: block;
+  }
+}

package/styles/dimensions.css

@@ -0,0 +1,9 @@
+@value searchInputHeight: 42px;
+@value searchInputPaddingHeight: 16px;
+@value searchInputBorderWidth: 1px;
+@value filterPanelCollapsedLeft: -284px;
+@value filterPanelCutoffWidth: 768px;
+@value filterPanelWidth: 284px;
+@value searchResultTileMargin: 8px;
+@value searchResultTileWidth: 210px;
+@value searchResultTileBodyHeight: 60px;