diff --git a/packages/compass-shell/.gitignore b/packages/compass-shell/.gitignore index fb3225f067e..ce34908eb64 100644 --- a/packages/compass-shell/.gitignore +++ b/packages/compass-shell/.gitignore @@ -10,5 +10,5 @@ coverage .nyc_output *.swp lib/ -compass/ +./compass/ src/assets/fonts/akzid* diff --git a/packages/compass-shell/src/assets/less/compass/_theme.less b/packages/compass-shell/src/assets/less/compass/_theme.less new file mode 100644 index 00000000000..32b17c789a5 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/_theme.less @@ -0,0 +1,6 @@ +//-- Import base Compass Styles +@import "~less/compass/variables/_index"; +@import "~less/compass/components/_index"; + +//-- Import third-party libraries +@import "~font-awesome/less/font-awesome"; diff --git a/packages/compass-shell/src/assets/less/compass/components/_buttons.less b/packages/compass-shell/src/assets/less/compass/components/_buttons.less new file mode 100644 index 00000000000..a43f8c2acfd --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_buttons.less @@ -0,0 +1,236 @@ +.btn { + height: 32px; + padding:0 20px 0 20px; + border-radius: 3px; + font-family: "Akzidenz"; + font-weight: normal; + font-size: 15px; + text-align: center; + color: #464C4F; + transition: all 0.3s ease-out; + + &.disabled, + &[disabled], + &[disabled]:hover, + fieldset[disabled] & { + cursor: @cursor-disabled; + .opacity(.65); + .box-shadow(none); + } + + & { + &.disabled, + fieldset[disabled] & { + pointer-events: none; + } + } + + + // COLOR STATES + + &-default { + background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%); + box-shadow: inset 0 -1px 0 0 #DDDDDD; + border: 1px solid #DDDDDD; + + &:hover, &:focus { + background: linear-gradient(180deg, #FFFFFF 0%, #EDEDED 100%); + box-shadow: inset 0 -1px 0 0 #CACACA, 0 2px 4px 0 rgba(0,0,0,0.1); + border: 1px solid #CACACA; + } + + &:active { + background: linear-gradient(180deg, #EDEDED 0%, #FFFFFF 99.31%); + box-shadow: inset 0 2px 2px 0 #CACACA; + } + } + + &-primary { + background: linear-gradient(180deg, #6BA442 0%, #5A9330 100%); + border: 1px solid #4D7A2D; + box-shadow: inset 0 -1px 0 0 #4D7A2D; + color: white; + + &:hover, &:focus { + background: linear-gradient(180deg, #6BA442 0%, #4A7E25 100%); + box-shadow: inset 0 -1px 0 0 #3B6A1B, 0 2px 4px 0 rgba(0,0,0,0.1); + border: 1px solid #3B6A1B; + } + + &:active { + background: linear-gradient(180deg, #4A7E25 0%, #6BA442 100%); + box-shadow: inset 0 2px 2px 0 #3B6A1B; + border: 1px solid #3B6A1B; + } + } + + &-info { + background-color: #FFFFFF; + border: 1px solid #6BA442; + border-radius: 3px; + box-shadow: none; + color: #6BA442; + + &:hover, &:focus { + background: linear-gradient(180deg, #6BA442 0%, #5A9330 100%); + box-shadow: inset 0 -1px 0 0 #4D7A2D, 0 2px 4px 0 rgba(0,0,0,0.1); + border: 1px solid #4D7A2D; + color: white; + } + + &:active { + background: linear-gradient(180deg, #578B30 0%, #6BA442 100%); + box-shadow: inset 0 2px 2px 0 #4D7A2D; + } + } + + &-alert { + background: linear-gradient(180deg, #EF4C4C 0%, #C93434 100%); + border: 1px solid #9D2121; + box-shadow: inset 0 -1px 0 0 #9D2121; + color: white; + + &:hover, &:focus { + background: linear-gradient(180deg, #CA3535 0%, #901717 100%); + box-shadow: inset 0 -1px 0 0 #6F1212; + border: 1px solid #6F1313; + color: white; + } + + &:active { + background: linear-gradient(180deg, #C93434 0%, #EF4C4C 100%); + box-shadow: inset 0 2px 2px 0 #9D2121; + } + } + + // SIZE STATES + + &-lg { + height: 45px; + font-size: 18px; + line-height: 43px; + } + + &-sm { + padding: 0 10px 0 10px; + height: 28px; + font-weight: bold; + font-size: 13px; + line-height: 26px; + text-transform: uppercase; + } + + &-xs { + padding: 0 10px 0px 10px; + height: 22px; + font-weight: bold; + font-size: 11px; + line-height: 20px; + text-transform: uppercase; + } + + &-full-width { + width: 100%; + } + + // OTHER + + &-circle { + width: 30px; + height: 30px; + padding: 6px 0; + border-radius: 50% + } + + &-icon { + background-color: transparent; + box-shadow: none; + padding: 0 10px 0 10px; + } + + &-group { + display: inline-block; + } + + &-crud { + background-color: transparent; + color: #a09f9e; + border: none; + text-transform: none; + font-size: 11px; + border-radius: 8px; + padding: 1px 12px; + } + + &-borderless { + color: #a06c29; + font-weight: bold; + background-color: transparent; + border: 0; + } + + &-edit { + background: none; + color: #a06c29; + border: 1px solid #a06c29; + box-shadow: inset 0 -1px 0 0 #a06c29; + + &:hover, &:focus { + box-shadow: none; + background: none; + } + } +} + +// REMOVE BLUE SELECTOR + +.btn, button { + outline: none; +} + +// VIEW SWITCHER + +.view-switcher { + + .active { + background: linear-gradient(180deg, #EDEDED 0%, #FFFFFF 99.31%); + box-shadow: inset 0 2px 2px 0 #CACACA; + border: 1px solid #CACACA; + } + + .btn { + + &:first-child { + border-radius: 3px 0 0 3px; + } + + &:last-child { + border-radius: 0 3px 3px 0; + } + } +} + +// DROPDOWN TOGGLE + +.dropdown { + + &-toggle { + padding: 0 10px 1px 10px; + font-size: 13px; + } + + &-menu { + padding: 2px; + + > li > a { + padding: 3px 8px; + + &:focus, &:hover, &:active { + color: white; + background: linear-gradient(180deg, #2469BE 0%, #11509E 100%); + border-radius: 2px; + outline: none; + } + } + } +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_caret.less b/packages/compass-shell/src/assets/less/compass/components/_caret.less new file mode 100644 index 00000000000..ba2a2982c3d --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_caret.less @@ -0,0 +1,20 @@ +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; +} +.caret-down { + .caret; + border-top: @caret-width-base solid; + border-right: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; +} + +.caret-right { + .caret; + border-left: @caret-width-base solid; + border-right: 0; + border-top: @caret-width-base solid transparent; + border-bottom: @caret-width-base solid transparent; +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_index.less b/packages/compass-shell/src/assets/less/compass/components/_index.less new file mode 100644 index 00000000000..dab8f469af0 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_index.less @@ -0,0 +1,10 @@ +//-- Import global component styles for Compass + +@import "~less/compass/components/_buttons"; +@import "~less/compass/components/_caret"; +@import "~less/compass/components/_message-background"; +@import "~less/compass/components/_mms-icons"; +@import "~less/compass/components/_modal-status-message"; +@import "~less/compass/components/_react-select"; +@import "~less/compass/components/_sortable-table"; +@import "~less/compass/components/_zero-state"; diff --git a/packages/compass-shell/src/assets/less/compass/components/_message-background.less b/packages/compass-shell/src/assets/less/compass/components/_message-background.less new file mode 100644 index 00000000000..c3858b40e2e --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_message-background.less @@ -0,0 +1,37 @@ +ul.message-background { + color: rgba(0, 0, 0, 0.2); + font-size: (@font-size-base * 2); + font-weight: 400; + margin: 0; + padding: 0; + + &.with-sidebar { + margin-left: @sidebar-width; + } +} + +ul.message-background.centered { + display: -webkit-flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + -webkit-align-items: center; + text-align: center; +} + +ul.message-background.centered li { + width: 100%; +} +ul.message-background li { + margin: 0; + padding: 0; + list-style: none; + color: @gray5; +} + +.message-background-tip { + font-size: @font-size-base; + margin-top: (@font-size-base * 3); +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_mms-icons.less b/packages/compass-shell/src/assets/less/compass/components/_mms-icons.less new file mode 100644 index 00000000000..2a3d27008f6 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_mms-icons.less @@ -0,0 +1,267 @@ +@import "~less/compass/variables/_index"; + +i[class^="mms-icon-"], +i[class^="mms-icon-"] i { + -moz-osx-font-smoothing: grayscale; +} + +i[class^="mms-icon-"], +i[class^="mms-icon-"] i { + font-family: "MMS Icons"; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + font-weight: normal !important; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop); + zoom: 1; + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + -o-transition: all 200ms ease; + transition: all 200ms ease; +} + +.register h2 { + i[class^="mms-icon-"] { + font-size: 32px; + margin-right: 15px; + } +} + +i.mms-icon-rocketbot, +i.mms-icon-snowbot { + font-size: 64px; +} + +i[class^="mms-icon-deployment-location-"], +i.mms-icon-bigplay, +i.mms-icon-bookshelf, +i.mms-icon-desktop, +i[class^="mms-icon-import-existing-"], +i[class^="mms-icon-build-new-"], +i.mms-icon-big-check { + font-size: 128px; +} + +i[class^="mms-icon-"] { + position: relative; + i { + position: absolute; + top: 0; + left: 0; + } + &[class$="-add"] i { color: @green2; &:before { content: "\E085" } } + &[class$="-remove"] i { color: @errorText; &:before { content: "\E086" } } + &[class$="-edit"] i { color: @warningText; &:before { content: "\E087" } } + &[class$="-exclamation"] i { color: @warningText; &:before { content: "\E098" } } + &[class$="-restart"] i { color: @alertBlue; &:before { content: "\E089" } } + &[class$="-selected"] { color: @gray1; } +} +i[class^="mms-icon-group-"] { + &[class$="-add"] i:before { content: "\E090" } + &[class$="-remove"] i:before { content: "\E091" } + &[class$="-edit"] i:before { content: "\E092" } + &[class$="-restart"] i:before { content: "\E094" } +} +i[class^="mms-icon-mongos-"], +i[class^="mms-icon-configsvr-"], +i[class^="mms-icon-wrench-"] { + &[class$="-add"] i:before { content: "\E095" } + &[class$="-remove"] i:before { content: "\E096" } + &[class$="-edit"] i:before { content: "\E097" } + &[class$="-exclamation"] i:before { content: "\E098" } + &[class$="-restart"] i:before { content: "\E099" } +} +i[class^="mms-icon-nostate-"]:before { content: "\E100" } +i[class^="mms-icon-startup-"]:before { content: "\E101" } +i[class^="mms-icon-primary-"]:before { content: "\E102" } +i[class^="mms-icon-secondary-"]:before { content: "\E103" } +i[class^="mms-icon-arbiter-"]:before { content: "\E104" } +i[class^="mms-icon-hidden-s-"]:before { content: "\E105" } +i[class^="mms-icon-delayed-"]:before { content: "\E106" } +i[class^="mms-icon-recovering-"]:before { content: "\E107" } +i[class^="mms-icon-down-"]:before { content: "\E108" } +i[class^="mms-icon-fatal-"]:before { content: "\E109" } +i[class^="mms-icon-shunned-"]:before { content: "\E110" } +i[class^="mms-icon-rollback-"]:before { content: "\E111" } +i[class^="mms-icon-unknown-"]:before { content: "\E112" } +i[class^="mms-icon-standalone-"]:before { content: "\E130" } +i[class^="mms-icon-replica-set-"]:before { content: "\E131" } +i[class^="mms-icon-cluster-"]:before { content: "\E132" } +i[class^="mms-icon-mongos-"]:before { content: "\E133" } +i[class^="mms-icon-configsvr-"]:before { content: "\E134" } +i[class^="mms-icon-automation-"]:before { content: "\E135" } +i[class^="mms-icon-backup-"]:before { content: "\E136" } +i[class^="mms-icon-monitoring-"]:before { content: "\E137" } +i[class^="mms-icon-group-"]:before { content: "\E138" } +i[class^="mms-icon-user-"]:before { content: "\E139" } +i[class^="mms-icon-role-"]:before { content: "\E140" } +i[class^="mms-icon-leaf-"]:before { content: "\E141" } +i[class^="mms-icon-server-"]:before { content: "\E142" } +i[class^="mms-icon-wrench-"]:before { content: "\E227" } + + +i.mms-icon-nostate:before { content: "\E000" } +i.mms-icon-startup:before { content: "\E001" } +i.mms-icon-startup-selected:before { content: "\E002" } +i.mms-icon-startup2:before { content: "\E001" } +i.mms-icon-startup2-selected:before { content: "\E002" } + +i.mms-icon-primary:before { content: "\E004" } +i.mms-icon-primary-selected:before { content: "\E004" } +i.mms-icon-secondary:before { content: "\E005" } +i.mms-icon-secondary-selected:before { content: "\E006" } +i.mms-icon-arbiter:before { content: "\E007" } +i.mms-icon-arbiter-selected:before { content: "\E008" } +i.mms-icon-hidden-s:before { content: "\E009" } +i.mms-icon-hidden-s-selected:before { content: "\E010" } +i.mms-icon-delayed:before { content: "\E011" } +i.mms-icon-delayed-selected:before { content: "\E012" } +i.mms-icon-recovering:before { content: "\E013" } +i.mms-icon-recovering-selected:before { content: "\E014" } +i.mms-icon-down:before { content: "\E015" } +i.mms-icon-down-selected:before { content: "\E016" } +i.mms-icon-fatal:before { content: "\E017" } +i.mms-icon-fatal-selected:before { content: "\E018" } +i.mms-icon-shunned:before { content: "\E019" } +i.mms-icon-shunned-selected:before { content: "\E020" } +i.mms-icon-rollback:before { content: "\E021" } +i.mms-icon-rollback-selected:before { content: "\E022" } +i.mms-icon-unknown:before { content: "\E023" } +i.mms-icon-unknown-selected:before { content: "\E024" } +i.mms-icon-standalone:before { content: "\E030" } +i.mms-icon-replica-set:before { content: "\E031" } +i.mms-icon-cluster:before { content: "\E032" } +i.mms-icon-mongos:before { content: "\E033" } +i.mms-icon-configsvr:before { content: "\E034" } + +i.mms-icon-addtopright:before { content: "\E085" } +i.mms-icon-removetopright:before { content: "\E086" } +i.mms-icon-edittopright:before { content: "\E087" } +i.mms-icon-exclamationtopright:before { content: "\E088" } +i.mms-icon-restarttopright:before { content: "\E089" } + +i.mms-icon-addbottomleft:before { content: "\E090" } +i.mms-icon-removebottomleft:before { content: "\E091" } +i.mms-icon-editbottomleft:before { content: "\E092" } +i.mms-icon-exclamationbottomleft:before { content: "\E093" } +i.mms-icon-restartbottomleft:before { content: "\E094" } + +i.mms-icon-addtopleft:before { content: "\E095" } +i.mms-icon-removetopleft:before { content: "\E096" } +i.mms-icon-edittopleft:before { content: "\E097" } +i.mms-icon-exclamationtopleft:before { content: "\E098" } +i.mms-icon-restarttopleft:before { content: "\E099" } + +i.mms-icon-dragtopleft:before { content: "\E200" } +i.mms-icon-bell:before { content: "\E201" } +i.mms-icon-list:before { content: "\E202" } +i.mms-icon-topology:before { content: "\E203" } +i.mms-icon-cloud:before { content: "\E204" } +i.mms-icon-lock:before { content: "\E205" } +i.mms-icon-laptop:before { content: "\E206" } +i.mms-icon-office:before { content: "\E207" } +i.mms-icon-floppy:before { content: "\E208" } +i.mms-icon-support1:before { content: "\E209" } +i.mms-icon-support2:before { content: "\E210" } +i.mms-icon-add:before { content: "\E211" } +i.mms-icon-remove:before { content: "\E212" } +i.mms-icon-check:before { content: "\E213" } +i.mms-icon-creditcard:before { content: "\E214" } +i.mms-icon-graph:before { content: "\E215" } +i.mms-icon-api:before { content: "\E216" } +i.mms-icon-2fa:before { content: "\E217" } +i.mms-icon-smartphone:before { content: "\E218" } +i.mms-icon-continuous:before { content: "\E219" } +i.mms-icon-pointintime:before { content: "\E220" } +i.mms-icon-hammer:before { content: "\E221" } +i.mms-icon-edit:before { content: "\E222" } +i.mms-icon-umbrella:before { content: "\E223" } +i.mms-icon-ellipsis:before { content: "\E224" } +i.mms-icon-dragleft:before { content: "\E225" } +i.mms-icon-list-skinny:before { content: "\E226" } +i.mms-icon-wrench:before { content: "\E227" } +i.mms-icon-grid:before { content: "\E228" } +i.mms-icon-ssl:before { content: "\E229" } +i.mms-icon-auth:before { content: "\E230" } +i.mms-icon-right-arrow:before { content: "\E237" } +i.mms-icon-add-circle:before { content: "\E238" } +i.mms-icon-automation:before { content: "\E300" } +i.mms-icon-backup:before { content: "\E301" } +i.mms-icon-monitoring:before { content: "\E302" } +i.mms-icon-group:before { content: "\E303" } +i.mms-icon-user:before { content: "\E304" } +i.mms-icon-role:before { content: "\E305" } +i.mms-icon-leaf:before { content: "\E306" } +i.mms-icon-databases:before { content: "\E307" } +i.mms-icon-database:before { content: "\E308" } +i.mms-icon-servers:before { content: "\E309" } +i.mms-icon-server:before { content: "\E310" } +i.mms-icon-dashboard:before { content: "\E311" } +i.mms-icon-setup:before { content: "\E312" } +i.mms-icon-settings:before { content: "\E313" } +i.mms-icon-activity:before { content: "\E314" } +i.mms-icon-desktop:before { content: "\E400" } +i.mms-icon-deployment-location-laptop:before { content: "\E401" } +i.mms-icon-deployment-location-servers:before { content: "\E402" } +i.mms-icon-deployment-location-aws:before { content: "\E403" } +i.mms-icon-bigplay:before { content: "\E404" } +i.mms-icon-bookshelf:before { content: "\E405" } +i.mms-icon-build-new-01:before { content: "\E406" } +i.mms-icon-import-existing-01:before { content: "\E407" } +i.mms-icon-build-new-02:before { content: "\E408" } +i.mms-icon-import-existing-02:before { content: "\E409" } +i.mms-icon-big-check:before { content: "\E410" } + +i.mms-icon-logo-amazon:before { content: "\E500" } +i.mms-icon-logo-ubuntu:before { content: "\E501" } +i.mms-icon-logo-apple:before { content: "\E502" } +i.mms-icon-logo-linux:before { content: "\E503" } +i.mms-icon-logo-windows:before { content: "\E504" } +i.mms-icon-logo-redhat:before { content: "\E505" } +i.mms-icon-rocketbot:before { content: "\F006" } +i.mms-icon-snowbot:before { content: "\F007" } + +.mongod, +.mongos { + display: inline-block; +} +/* color for error states */ +.down, +.fatal, +.shunned, +.unknown { + i.mms-icon-mongod { + color: @errorText; + } +} + +i[class^="mms-icon-down"], +i[class^="mms-icon-fatal"], +i[class^="mms-icon-shunned"], +i[class^="mms-icon-unknown"] { + color: @errorText; + &[class$="-selected"] { color: @errorText; } +} + +i.mms-icon-wrench-exclamation { + color: @gray5; +} + +.startup, +.startup2, +.rollback, +.recovering { + i.mms-icon-mongod { + color: @warningText; + } +} + +/* color for startup states */ +i[class^="mms-icon-startup"], +i[class^="mms-icon-rollback"], +i[class^="mms-icon-recovering"] { + color: @warningText; + &[class$="-selected"] { color: @warningText; } +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_modal-status-message.less b/packages/compass-shell/src/assets/less/compass/components/_modal-status-message.less new file mode 100644 index 00000000000..8c50f6e6c52 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_modal-status-message.less @@ -0,0 +1,82 @@ +.modal-status-error { + background: #ef4c4c; + color: #fff; + margin-bottom: 10px; + overflow: auto; + + .panel-body { + padding: 8px; + + .row { + margin-left: -7px; + margin-right: -8px; + + .col-md-1 { + width: 8%; + } + + .col-md-11 { + width: 90%; + } + } + } + + .modal-status-error-icon { + font-size: 20px; + font-weight: bold; + margin-bottom: 0px; + margin-left: 4px; + vertical-align: middle; + } + + .modal-status-error-message { + display: inline-block; + font-family: sans-serif; + font-weight: bold; + font-size: 15px; + margin-bottom: 0px; + margin-left: 12px; + vertical-align: middle; + } +} + +.modal-status-in-progress { + background: rgb(73, 180, 230); + color: #fff; + margin-bottom: 10px; + + .panel-body { + padding: 8px; + + .row { + margin-left: -7px; + margin-right: -8px; + + .col-md-1 { + width: 8%; + } + + .col-md-11 { + width: 90%; + } + } + } + + .modal-status-in-progress-icon { + font-size: 20px; + font-weight: bold; + margin-bottom: 0px; + margin-left: 8px; + vertical-align: middle; + } + + .modal-status-in-progress-message { + display: inline-block; + font-family: sans-serif; + font-weight: bold; + font-size: 15px; + margin-bottom: 0px; + margin-left: 12px; + vertical-align: middle; + } +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_react-select.less b/packages/compass-shell/src/assets/less/compass/components/_react-select.less new file mode 100644 index 00000000000..8e6e28dffab --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_react-select.less @@ -0,0 +1,381 @@ +.Select { + position: relative; + + &-control { + height: 32px; + width: 100%; + color: #444444; + border-radius: 3px; + border: 1px solid #DDDDDD; + background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%); + box-shadow: inset 0 -1px 0 0 #DDDDDD; + + &:hover { + background: linear-gradient(180deg, #FFFFFF 0%, #EDEDED 100%); + box-shadow: inset 0 -1px 0 0 #CACACA, 0 2px 4px 0 rgba(0,0,0,0.1); + border: 1px solid #CACACA; + } + } + + &-arrow { + border-color: #999 transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + margin: 11.5px 0px 11.5px 0px; + display: inline-block; + + &-zone { + height: 31px; + padding-right: 5px; + float: right; + } + } + + &-menu { + padding: 2px; + background-image: linear-gradient(-180deg, #F6F6F6 0%, #FFFFFF 100%); + max-height: 198px; + overflow-y: auto; + padding-top: 5px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + + &-outer { + background-color: #fff; + border: 1px solid #ccc; + border-top-color: #e6e6e6; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + position: absolute; + top: 100%; + width: 100%; + z-index: 1; + -webkit-overflow-scrolling: touch; + } + + &::-webkit-scrollbar { + display:none; + } + } + + &-option { + padding: 3px 8px; + + &.is-focused { + color: white; + background: linear-gradient(180deg, #2469BE 0%, #11509E 100%); + border-radius: 2px; + width: 100%; + } + } + + &-multi-value-wrapper { + padding-bottom: 5px; + } + + &.is-open > .Select-control { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border: 1px solid #5CAEEB; + box-shadow: 0 2px 6px 0 rgba(77,175,233,0.30); + } + + &.is-focused > .Select-menu-outer { + border: 1px solid #5CAEEB; + border-top: none; + box-shadow: 0 2px 6px 0 rgba(77,175,233,0.30); + } + + &.is-searchable.is-open > .Select-control > .Select-multi-value-wrapper > .Select-input { + background: #FFFFFF; + border: 1px solid #4EAFE9; + border-radius: 2px; + width: 85%; + margin: 2px; + } +} + +.Select-option:last-child { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.Select-option.is-disabled { + color: #cccccc; + cursor: default; +} + +.Select, +.Select div, +.Select input, +.Select span { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.Select.is-disabled > .Select-control { + background-color: #f9f9f9; +} +.Select.is-disabled > .Select-control:hover { + box-shadow: none; +} +.Select.is-disabled .Select-arrow-zone { + cursor: default; + pointer-events: none; + opacity: 0.35; +} + +.Select-control .Select-input:focus { + outline: none; +} +.is-searchable.is-open > .Select-control { + cursor: text; +} + +.is-open > .Select-control .Select-arrow { + top: -2px; + border-color: transparent transparent #999; + border-width: 0 5px 5px; +} +.is-searchable.is-focused:not(.is-open) > .Select-control { + cursor: text; +} + +.Select-placeholder, +.Select--single > .Select-control .Select-value { + bottom: 0; + left: 0; + line-height: 32px; + padding-left: 10px; + padding-right: 10px; + position: absolute; + right: 0; + top: 0; + max-width: 85%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.has-value.Select--single > .Select-control .Select-value .Select-value-label, +.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { + color: #333; +} +.has-value.Select--single > .Select-control .Select-value a.Select-value-label, +.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { + cursor: pointer; + text-decoration: none; +} +.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, +.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + color: #007eff; + outline: none; + text-decoration: underline; +} +.Select-input { + height: 25px; + padding-left: 5px; +} + +.Select-input > input { + width: 100%; + background: none transparent; + border: 0 none; + box-shadow: none; + cursor: default; + display: inline-block; + font-family: inherit; + font-size: inherit; + margin: 0; + outline: none; + -webkit-appearance: none; +} +.is-focused .Select-input > input { + cursor: text; +} +.has-value.is-pseudo-focused .Select-input { + opacity: 0; +} +.Select-control:not(.is-searchable) > .Select-input { + outline: none; +} +.Select-loading-zone { + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 16px; +} +.Select-loading { + -webkit-animation: Select-animation-spin 400ms infinite linear; + -o-animation: Select-animation-spin 400ms infinite linear; + animation: Select-animation-spin 400ms infinite linear; + width: 16px; + height: 16px; + box-sizing: border-box; + border-radius: 50%; + border: 2px solid #ccc; + border-right-color: #333; + display: inline-block; + position: relative; + vertical-align: middle; +} +.Select-clear-zone { + -webkit-animation: Select-animation-fadeIn 200ms; + -o-animation: Select-animation-fadeIn 200ms; + animation: Select-animation-fadeIn 200ms; + color: #999; + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 17px; +} +.Select-clear-zone:hover { + color: #D0021B; +} +.Select-clear { + display: inline-block; + font-size: 18px; + line-height: 1; +} +.Select--multi .Select-clear-zone { + width: 17px; +} + +.is-open .Select-arrow, +.Select-arrow-zone:hover > .Select-arrow { + border-top-color: #666; +} +.Select--multi .Select-multi-value-wrapper { + display: inline-block; +} +.Select .Select-aria-only { + display: inline-block; + height: 1px; + width: 1px; + margin: -1px; + clip: rect(0, 0, 0, 0); + overflow: hidden; + float: left; +} +@-webkit-keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + + +.Select-noresults { + box-sizing: border-box; + color: #999999; + cursor: default; + display: block; + padding: 8px 10px; +} +.Select--multi .Select-input { + vertical-align: middle; + margin-left: 10px; + padding: 0; +} +.Select--multi.has-value .Select-input { + margin-left: 5px; +} +.Select--multi .Select-value { + background-color: #ebf5ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.08); + border-radius: 2px; + border: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border: 1px solid rgba(0, 126, 255, 0.24); + color: #007eff; + display: inline-block; + font-size: 0.9em; + line-height: 1.4; + margin-left: 5px; + margin-top: 5px; + vertical-align: top; +} +.Select--multi .Select-value-icon, +.Select--multi .Select-value-label { + display: inline-block; + vertical-align: middle; +} +.Select--multi .Select-value-label { + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; + cursor: default; + padding: 2px 5px; +} +.Select--multi a.Select-value-label { + color: #007eff; + cursor: pointer; + text-decoration: none; +} +.Select--multi a.Select-value-label:hover { + text-decoration: underline; +} +.Select--multi .Select-value-icon { + cursor: pointer; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + border-right: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border-right: 1px solid rgba(0, 126, 255, 0.24); + padding: 1px 5px 3px; +} +.Select--multi .Select-value-icon:hover, +.Select--multi .Select-value-icon:focus { + background-color: #d8eafd; + /* Fallback color for IE 8 */ + background-color: rgba(0, 113, 230, 0.08); + color: #0071e6; +} +.Select--multi .Select-value-icon:active { + background-color: #c2e0ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.24); +} +.Select--multi.is-disabled .Select-value { + background-color: #fcfcfc; + border: 1px solid #e3e3e3; + color: #333; +} +.Select--multi.is-disabled .Select-value-icon { + cursor: not-allowed; + border-right: 1px solid #e3e3e3; +} +.Select--multi.is-disabled .Select-value-icon:hover, +.Select--multi.is-disabled .Select-value-icon:focus, +.Select--multi.is-disabled .Select-value-icon:active { + background-color: #fcfcfc; +} +@keyframes Select-animation-spin { + to { + transform: rotate(1turn); + } +} +@-webkit-keyframes Select-animation-spin { + to { + -webkit-transform: rotate(1turn); + } +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_sortable-table.less b/packages/compass-shell/src/assets/less/compass/components/_sortable-table.less new file mode 100644 index 00000000000..22b4dbd36c5 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_sortable-table.less @@ -0,0 +1,74 @@ +.sortable-table { + &-table { + table-layout: auto; + border-collapse: separate; + border-spacing: 0 3px; + width: 100%; + } + + &-sort-icon { + visibility: hidden; + } + + &-th { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + padding-left: 24px; + background-color: @gray8; + + &-is-active { + .sortable-table-sort-icon { + visibility: visible; + } + } + + &-is-last-col { + width: 77px; + } + + &:hover:not(.sortable-table-th-is-active) { + .sortable-table-sort-icon { + visibility: visible; + opacity: 0.5; + } + } + } + + &-thead-tr { + margin-top: 30px; + height: 50px; + } + + &-tbody-tr { + height: 50px; + background-color: @pw; + box-shadow: 0 2px 10px 0 rgba(0,0,0,0.075); + } + + &-td { + padding: 13px 0 13px 24px; + } + + &-trash-button { + padding: 0 8px 0 8px; + } + + &-is-dark-theme { + .sortable-table-th, .sortable-table-td { + color: @pw; + } + + .sortable-table-tbody-tr { + background-color: #2B3033; + } + + .sortable-table-td { + border-color: #3D4247; + } + + .sortable-table-th { + background-color: #3D4247; + } + } +} diff --git a/packages/compass-shell/src/assets/less/compass/components/_zero-state.less b/packages/compass-shell/src/assets/less/compass/components/_zero-state.less new file mode 100644 index 00000000000..b11fe05176b --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/components/_zero-state.less @@ -0,0 +1,25 @@ +.zero-state { + &-header { + font-size: 32px; + font-weight: lighter; + margin: 0; + padding: 30px 0 11px 0; + } + + &-subheader { + font-size: 21px; + font-weight: lighter; + line-height: 26px; + max-width: 600px; + padding: 0 0 28px 0; + margin: 0 auto; + } + + &-body { + .zero-state-link { + display: block; + padding-top: 20px; + font-size: 16px; + } + } +} diff --git a/packages/compass-shell/src/assets/less/compass/variables/_index.less b/packages/compass-shell/src/assets/less/compass/variables/_index.less new file mode 100644 index 00000000000..f28aa3c6d0d --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/variables/_index.less @@ -0,0 +1,11 @@ +//-- Import variable configuration +@import "~less/compass/variables/_layout"; +@import "~less/compass/variables/_palette"; + +//-- Import Boostrap variable configuration +// Note: Boostrap component styles have to be global, and so are imported directly in electron/renderer/index.js) +@import "~bootstrap/less/variables"; +@import "~bootstrap/less/mixins"; + +//-- Font-awesome Configuration +@fa-font-path: "~font-awesome/fonts"; diff --git a/packages/compass-shell/src/assets/less/compass/variables/_layout.less b/packages/compass-shell/src/assets/less/compass/variables/_layout.less new file mode 100644 index 00000000000..255fb94bd9a --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/variables/_layout.less @@ -0,0 +1 @@ + @sidebar-width: 250px; diff --git a/packages/compass-shell/src/assets/less/compass/variables/_palette.less b/packages/compass-shell/src/assets/less/compass/variables/_palette.less new file mode 100644 index 00000000000..ebb4e2462f0 --- /dev/null +++ b/packages/compass-shell/src/assets/less/compass/variables/_palette.less @@ -0,0 +1,92 @@ +@sidebar-bg: @slate1; +@sidebar-width: 250px; + +/* MongoDB Color Palette */ +/* commented colors have been deprecated */ +@green0: #365221; +@green1: #507b32; +@green2: #67b144; +@green3: #86bc63; +@green4: #a6c88e; +@green5: #c4dbb3; +@green6: #69AD55; + +@gray0: #313030; +@gray1: #494747; +@gray2: #615f5f; +@gray3: #807f7f; +@gray4: #a09f9e; +@gray5: #bfbfbe; + +/* UI Grays */ +@gray6: #dee0e3; +@gray7: #ebebed; +@gray8: #f5f6f7; +@gray9: #AAAAAA; +@gray10: #E4E4E4; + +@slate0: #42494f; +@slate1: #4c5259; +@slate2: #70757a; + +@blue3: #5b81a9; // TODO: deprecate +@blue4: #84a1bf; // TODO: deprecate +@blue5: #adc0d4; // TODO: deprecate + +@purple0: #373e50; // TODO: deprecate +@purple1: #535d77; // TODO: deprecate +@purple2: #6e7c9f; // TODO: deprecate +@purple3: #8b96b2; // TODO: deprecate +@purple4: #a8b0c5; // TODO: deprecate +@purple5: #c5cbd9; // TODO: deprecate + +/* Other Colors */ +@red: #ed271c; +@lightRed: #ffeaea; +@yellow: @alertOrange; +@pw: #fff; +@cautionOrange: @alertOrange; +@errorBackground: #fdd0d1; +@greenBg: #e9f2e3; + +/* Text Colors */ +/* default text color is @gray1 */ +@linkText: #006cbc; +@linkOnDark: #2898dd; +@warningText: #ffb618; +@successText: #6ca439; +@errorText: #ed271c; +@mutedText: @gray4; +@veryMutedText: @gray5; +@subNavText: #6f6763; + +/*Chart Colors*/ +@chart0: #F68A1E; +@chart1: #43B1E5; +@chart2: #F38183; +@chart3: #26A348; +@chart4: #FBB129; +@chart5: #92A83B; +@chart6: #46929A; +@chart7: #D381B3; +@chart8: #85CA98; + +@chartAverage: #d29e29; +@chartTotal: #6ba442; + +@chartRestart: #ef4c65; +@chartBecamePrimary: #fbb129; +@chartBecameSecondary: #7f6a4e; + +/* Alert Colors */ +@alertOrange: #fbb129; +@alertOrangeBg: #fff4dc; +@alertOrangeBorder: #a06c29; +@alertRed: #ef4c4c; +@alertRedBg: #feeded; +@alertRedText: #A94442; +@alertBlue: #43b1e5; + +/* Semantic Colors */ + +@inactiveIcon: @gray4;