1 files changed, 149 insertions, 0 deletions
diff --git a/app/assets/javascripts/visual_review_toolbar/styles/toolbar.css b/app/assets/javascripts/visual_review_toolbar/styles/toolbar.css
new file mode 100644
index 00000000000..342b3599a44
--- /dev/null
+++ b/app/assets/javascripts/visual_review_toolbar/styles/toolbar.css
@@ -0,0 +1,149 @@
+/*
+  As a standalone script, the toolbar has its own css
+ */
+
+#gitlab-collapse > * {
+  pointer-events: none;
+}
+
+#gitlab-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%
+}
+
+#gitlab-review-container {
+  max-width: 22rem;
+  max-height: 22rem;
+  overflow: scroll;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 1rem;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+  font-size: .8rem;
+  font-weight: 400;
+  color: #2e2e2e;
+}
+
+.gitlab-open-wrapper {
+  max-width: 22rem;
+  max-height: 22rem;
+}
+
+.gitlab-closed-wrapper {
+  max-width: 3.4rem;
+  max-height: 3.4rem;
+}
+
+.gitlab-button {
+  cursor: pointer;
+  transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
+}
+
+.gitlab-button-secondary {
+  background: none #fff;
+  margin: 0 .5rem;
+  border: 1px solid #e3e3e3;
+}
+
+.gitlab-button-secondary:hover {
+  background-color: #f0f0f0;
+  border-color: #e3e3e3;
+  color: #2e2e2e;
+}
+
+.gitlab-button-secondary:active {
+  color: #2e2e2e;
+  background-color: #e1e1e1;
+  border-color: #dadada;
+}
+
+.gitlab-button-success:hover {
+  color: #fff;
+  background-color: #137e3f;
+  border-color: #127339;
+}
+
+.gitlab-button-success:active {
+  background-color: #168f48;
+  border-color: #12753a;
+  color: #fff;
+}
+
+.gitlab-button-success {
+  background-color: #1aaa55;
+  border: 1px solid #168f48;
+  color: #fff;
+}
+
+.gitlab-button-wide {
+  width: 100%;
+}
+
+.gitlab-button-wrapper {
+  margin-top: 1rem;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+.gitlab-collapse {
+  width: 2.4rem;
+  height: 2.2rem;
+  margin-left: 1rem;
+  padding: .5rem;
+}
+
+.gitlab-collapse-closed {
+  align-self: center;
+}
+
+.gitlab-checkbox-label {
+  padding: 0 .2rem;
+}
+
+.gitlab-checkbox-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+.gitlab-label {
+  font-weight: 600;
+  display: inline-block;
+  width: 100%;
+}
+
+.gitlab-link {
+  color: #1b69b6;
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none;
+}
+
+.gitlab-message {
+  padding: .25rem 0;
+  margin: 0;
+  line-height: 1.2rem;
+}
+
+.gitlab-metadata-note {
+  font-size: .7rem;
+  line-height: 1rem;
+  color: #666;
+  margin-bottom: 0;
+}
+
+.gitlab-input {
+  width: 100%;
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  padding: .1rem .2rem;
+  min-height: 2rem;
+  max-width: 17rem;
+}