diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index f658c087ef..9a71ee173f 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -122,7 +122,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/alerts"; @import "components/verify_other_explorers"; @import "components/errors"; - +@import "components/log-search"; :export { dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; dashboardLineColorMarket: $dashboard-line-color-market; diff --git a/apps/block_scout_web/assets/css/components/_log-search.scss b/apps/block_scout_web/assets/css/components/_log-search.scss new file mode 100644 index 0000000000..51ca8713d0 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_log-search.scss @@ -0,0 +1,60 @@ +.logs-topbar { + padding-bottom: 30px; + @media (min-width: 600px) { + display: flex; + justify-content: space-between; + } + .pagination-container.position-top { + padding-top: 0 !important; + } +} + +.logs-search { + display: flex; + @media (max-width: 599px) { + margin-bottom: 30px; + } +} + +.logs-search-input, .logs-search-btn, .logs-search-btn-cancel { + height: 24px; + background-color: #f5f6fa; + border: 1px solid #f5f6fa; + color: #333; + border-radius: 2px; + outline: none; + font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 12px; + font-weight: 600; +} + +.logs-search-input { + padding-left: 6px; + display: inline-flex; + flex-grow: 2; + min-width: 160px; + &::placeholder { + color: #a3a9b5; + } +} + +.logs-search-btn { + margin-left: 6px; + color: #a3a9b5; + transition: .1s ease-in; + cursor: pointer; + &:hover { + background-color: $primary; + color: #fff; + border-color: $primary; + } +} + +.logs-search-btn-cancel { + color: #a3a9b5; + cursor: pointer; + transition: .1s ease-in; + &:hover { + color: #333; + } +} \ No newline at end of file