diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl index cb51f02..9186743 100644 --- a/app/stylus/components/Room.styl +++ b/app/stylus/components/Room.styl @@ -275,6 +275,101 @@ } } +.Dropdown-root { + position: relative; + padding: 0.3vmin; +} + +.Dropdown-control { + position: relative; + overflow: hidden; + background-color: white; + border: 1px solid #ccc; + border-radius: 2px; + box-sizing: border-box; + color: #333; + cursor: default; + outline: none; + padding: 8px 52px 8px 10px; + transition: all 200ms ease; +} + +.Dropdown-control:hover { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); +} + +.Dropdown-arrow { + border-color: #999 transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + content: ' '; + display: block; + height: 0; + margin-top: -ceil(2.5); + position: absolute; + right: 10px; + top: 14px; + width: 0 +} + +.is-open .Dropdown-arrow { + border-color: transparent transparent #999; + border-width: 0 5px 5px; +} + +.Dropdown-menu { + background-color: white; + border: 1px solid #ccc; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + overflow-y: auto; + position: absolute; + top: 100%; + width: 100%; + z-index: 1000; + -webkit-overflow-scrolling: touch; +} + +.Dropdown-menu .Dropdown-group > .Dropdown-title { + padding: 8px 10px; + color: rgba(51, 51, 51, 1.2); + font-weight: bold; + text-transform: capitalize; +} + +.Dropdown-option { + box-sizing: border-box; + color: rgba(51, 51, 51, 0.8); + cursor: pointer; + display: block; + padding: 8px 10px; +} + +.Dropdown-option:last-child { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} + +.Dropdown-option:hover { + background-color: #f2f9fc; + color: #333; +} + +.Dropdown-option.is-selected { + background-color: #f2f9fc; + color: #333; +} + +.Dropdown-noresults { + box-sizing: border-box; + color: #ccc; + cursor: default; + display: block; + padding: 8px 10px; +} + @keyframes Room-info-state-connecting { 50% { background-color: rgba(orange, 0.75); } } diff --git a/app/stylus/components/Settings.styl b/app/stylus/components/Settings.styl index 3e4e902..a58d04a 100644 --- a/app/stylus/components/Settings.styl +++ b/app/stylus/components/Settings.styl @@ -28,100 +28,6 @@ } > .settings { - .Dropdown-root { - position: relative; - padding: 0.3vmin; - } - - .Dropdown-control { - position: relative; - overflow: hidden; - background-color: white; - border: 1px solid #ccc; - border-radius: 2px; - box-sizing: border-box; - color: #333; - cursor: default; - outline: none; - padding: 8px 52px 8px 10px; - transition: all 200ms ease; - } - - .Dropdown-control:hover { - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); - } - - .Dropdown-arrow { - border-color: #999 transparent transparent; - border-style: solid; - border-width: 5px 5px 0; - content: ' '; - display: block; - height: 0; - margin-top: -ceil(2.5); - position: absolute; - right: 10px; - top: 14px; - width: 0 - } - - .is-open .Dropdown-arrow { - border-color: transparent transparent #999; - border-width: 0 5px 5px; - } - - .Dropdown-menu { - background-color: white; - border: 1px solid #ccc; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); - box-sizing: border-box; - margin-top: -1px; - max-height: 200px; - overflow-y: auto; - position: absolute; - top: 100%; - width: 100%; - z-index: 1000; - -webkit-overflow-scrolling: touch; - } - - .Dropdown-menu .Dropdown-group > .Dropdown-title { - padding: 8px 10px; - color: rgba(51, 51, 51, 1.2); - font-weight: bold; - text-transform: capitalize; - } - - .Dropdown-option { - box-sizing: border-box; - color: rgba(51, 51, 51, 0.8); - cursor: pointer; - display: block; - padding: 8px 10px; - } - - .Dropdown-option:last-child { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - - .Dropdown-option:hover { - background-color: #f2f9fc; - color: #333; - } - - .Dropdown-option.is-selected { - background-color: #f2f9fc; - color: #333; - } - - .Dropdown-noresults { - box-sizing: border-box; - color: #ccc; - cursor: default; - display: block; - padding: 8px 10px; - } } > .footer {