diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 4f766470cf..3d9342a40c 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -54,14 +54,6 @@ strong {
font-weight: 600;
}
-.text-left {
- text-align: left;
-}
-
.text-center {
text-align: center;
}
-
-.text-right {
- text-align: right;
-}
diff --git a/src/styles/components/_action-menu.scss b/src/styles/components/_action-menu.scss
new file mode 100644
index 0000000000..a538a545f3
--- /dev/null
+++ b/src/styles/components/_action-menu.scss
@@ -0,0 +1,100 @@
+@use "../base/variables";
+
+/**
+ * Licensed to The Apereo Foundation under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ *
+ * The Apereo Foundation licenses this file to you under the Educational
+ * Community License, Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License. You may obtain a copy of the License
+ * at:
+ *
+ * http://opensource.org/licenses/ecl2.txt
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ *
+ */
+
+
+.action-menu {
+ width: 160px;
+ height: 40px;
+ border-radius: variables.$main-border-radius;
+ padding-left: 15px;
+ font-weight: 600;
+ font-size: 12px;
+ cursor: pointer;
+ user-select: none;
+ position: relative;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ // Pulled from Button Mixin (keep in sync with those styles)
+ background: linear-gradient(variables.$white, variables.$color-lightgray);
+ border: variables.$thin-border-stroke variables.$main-border-color;
+ box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow;
+ color: variables.$medium-prim-color;
+ text-shadow: 0px 1px 0px variables.$white;
+
+ &:hover {
+ border: variables.$thin-border-stroke variables.$l-blue;
+ box-shadow: 0 0 0 1px variables.$l-blue;
+ }
+
+ &:active {
+ box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow;
+ }
+
+ .chevron-down {
+ color: inherit;
+ font-size: 12px;
+ margin-right: 10px;
+ }
+
+ > ul {
+ position: absolute;
+ transition: all 200ms;
+ background: variables.$off-white;
+ list-style: none;
+ border-bottom-left-radius: variables.$main-border-radius;
+ border-bottom-right-radius: variables.$main-border-radius;
+ border: variables.$thin-border-stroke variables.$main-border-color;
+ opacity: 1;
+ pointer-events: auto;
+ z-index: variables.$max-z + 10;
+ top: 100%;
+ left: -1px;
+ right: -1px;
+
+ > li {
+ text-decoration: none;
+ text-shadow: 0 1px 0 variables.$white;
+ display: block;
+ position: relative;
+ transition: all 200ms;
+
+ button {
+ display: block;
+ padding: 12px 15px;
+ width: 100%;
+ text-align: left;
+ font-size: inherit;
+ line-height: 20px;
+
+ &:hover, &:focus {
+ color: variables.$off-white;
+ background: variables.$bright-blue;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/components/_components-config.scss b/src/styles/components/_components-config.scss
index 7f9de404b0..51126ee8c2 100644
--- a/src/styles/components/_components-config.scss
+++ b/src/styles/components/_components-config.scss
@@ -23,7 +23,7 @@
@use "about";
@use "breadcrumbs";
@use "datepicker-custom";
-@use "dropdowns";
+@use "action-menu";
@use "footer";
@use "form";
@use "header";
diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss
deleted file mode 100644
index 1afbad781f..0000000000
--- a/src/styles/components/_dropdowns.scss
+++ /dev/null
@@ -1,212 +0,0 @@
-@use "../base/variables";
-
-/**
- * Licensed to The Apereo Foundation under one or more contributor license
- * agreements. See the NOTICE file distributed with this work for additional
- * information regarding copyright ownership.
- *
- *
- * The Apereo Foundation licenses this file to you under the Educational
- * Community License, Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License. You may obtain a copy of the License
- * at:
- *
- * http://opensource.org/licenses/ecl2.txt
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- */
-
-
-.drop-down-container {
- width: 160px;
- height: 40px;
- border-radius: variables.$main-border-radius;
- padding-left: 15px;
- font-weight: 600;
- font-size: 12px;
- cursor: pointer;
- user-select: none;
- position: relative;
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
-
- // Pulled from Button Mixin (keep in sync with those styles)
- background: linear-gradient(variables.$white, variables.$color-lightgray);
- border: variables.$thin-border-stroke variables.$main-border-color;
- box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow;
- color: variables.$medium-prim-color;
- text-shadow: 0px 1px 0px variables.$white;
-
- &:hover {
- border: variables.$thin-border-stroke variables.$l-blue;
- box-shadow: 0 0 0 1px variables.$l-blue;
- }
-
- &:active {
- box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow;
- }
-
- // Menu Icon Settings
- $icon-color: variables.$medium-prim-color;
- $icon-font-size: 15px;
- $icon-display-value: inline-block;
- $icon-pesudo-position: before;
-
- .chevron-down {
- color: inherit;
- font-size: 12px;
- margin-right: 10px;
- }
-
- > ul {
- position: absolute;
- transition: all 200ms;
- background: variables.$off-white;
- list-style: none;
- border-bottom-left-radius: variables.$main-border-radius;
- border-bottom-right-radius: variables.$main-border-radius;
- border: variables.$thin-border-stroke variables.$main-border-color;
- opacity: 1;
- pointer-events: auto;
- z-index: variables.$max-z + 10;
- top: 100%;
- left: -1px;
- right: -1px;
-
- > li {
- text-decoration: none;
- text-shadow: 0 1px 0 variables.$white;
- display: block;
- position: relative;
- transition: all 200ms;
-
- button {
- display: block;
- padding: 12px 15px;
- width: 100%;
- text-align: left;
- font-size: inherit;
- line-height: 20px;
-
- &:hover, &:focus {
- color: variables.$off-white;
- background: variables.$bright-blue;
- }
-
- &.more-link {
- text-align: center;
- color: variables.$l-blue;
- }
- }
-
- &:last-child a {
- border-bottom-left-radius: variables.$main-border-radius;
- border-bottom-right-radius: variables.$main-border-radius;
- }
- }
-
- > span {
- padding: 3px 15px 3px 45px;
- display: block;
-
- > span {
- display: block;
- font-size: 10px;
- color: variables.$light-prim-color;
- margin-top: -20px;
- }
- }
- }
-
- &.small {
- width: 75px;
- height: 28px;
- font-weight: 600;
- font-size: 12px;
- text-shadow: 0 1px 0 variables.$white;
- background-repeat: repeat-x;
-
- &:after {
- position: absolute;
- top: 7px;
- right: 10px;
- }
-
- > ul {
- position: absolute;
- transition: all 200ms;
- background: variables.$off-white;
- list-style: none;
- border-bottom-left-radius: variables.$main-border-radius;
- border-bottom-right-radius: variables.$main-border-radius;
- border: variables.$thin-border-stroke variables.$main-border-color;
- opacity: 1;
- pointer-events: auto;
- z-index: variables.$max-z + 10;
-
- > li {
- color: variables.$medium-prim-color;
- font-size: 12px;
- line-height: 20px;
- font-weight: 600;
- cursor: default;
- display: block;
-
- span > span {
- display: block;
- font-size: 10px;
- color: variables.$light-prim-color;
- margin-top: -20px;
- }
-
- button {
- display: block;
- padding: 4px 15px;
- }
- }
- }
- }
-
- // Flipped
- &.flipped {
-
- &.active {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: variables.$main-border-radius;
- border-bottom-right-radius: variables.$main-border-radius;
- }
-
- > ul {
- top: auto;
- bottom: 100%;
- border-top-left-radius: variables.$main-border-radius;
- border-top-right-radius: variables.$main-border-radius;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
-
- // Active State
- &.active {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
-
- &:after {
- transform: rotate(180deg);
- }
-
- > ul {
- opacity: 1;
- pointer-events: auto;
- }
- }
-}
diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss
index e3760ab08f..b3be00a6b7 100644
--- a/src/styles/components/_form.scss
+++ b/src/styles/components/_form.scss
@@ -79,81 +79,11 @@
float: none;
}
- input,
- textarea,
- .drop-down-container,
-
-
- // Checkbox Content
- // ----------------------------------------
-
- // ## Todo: Update markup and require a block level container
- // to split checkboxes and labels into groups and rows
-
- .checkbox-container.one-line { // refactor out .one-line after markup change
-
- input[type="checkbox"],
- label {
- display: inline-block;
- width: auto;
- }
-
- input[type='checkbox'] {
- margin-right: 5px;
- }
-
- }
-
-
- // Inline Content
- // ----------------------------------------
-
- .inline-content {
-
- > label {
- float: left;
- margin-top: 14px;
- margin-right: 8px;
- margin-left: 8px;
- }
-
- > input {
- float: left;
- }
-
- &.inline-content-padded {
- padding: 18px 0 0;
- }
- }
-
input[type="radio"] {
float: left;
margin: 1px 5px 0 0;
}
- // Layout Options
- // ----------------------------------------
-
- &.no-padding {
- margin-top: 0;
- }
-
- [class$="-column"] {
- display: inline-block;
- }
-
- .small-column {
- width: 25%;
- padding-right: 10px;
- }
-
- .medium-column {
- width: 40%;
-
- > .inline-content > label {
- width: 50%;
- }
- }
}
.button-container {
@@ -162,42 +92,9 @@
a {
padding: 10px 20px;
}
-
- &.float-opposite {
- a:first-child {
- float: left;
- }
- a:last-child {
- float: right;
- }
- }
- }
-
- &.tiny-form {
- max-width: 150px;
- }
-
- &.smaller-form {
- max-width: 280px;
- }
-
- &.small-form {
- max-width: 500px;
- }
-
- &.medium-form {
- max-width: 800px;
- }
-
- &.large-form {
- max-width: 1000px;
}
&.compact {
margin: 0;
}
-
- > .drop-down-container {
- width: 100%;
- }
}
diff --git a/src/styles/components/_multi-select.scss b/src/styles/components/_multi-select.scss
index 8b2e81c9f5..d28b633ba5 100644
--- a/src/styles/components/_multi-select.scss
+++ b/src/styles/components/_multi-select.scss
@@ -72,11 +72,6 @@
}
}
-.multi-select-search {
- @extend .multi-select-col;
- float: none;
-}
-
// Used to indicate the correlation between multiple select columns
.exchange-icon {
width: 6%;
@@ -94,23 +89,18 @@
$icon-top-margin: 90px;
$multiple-select-expanded-height: 133px;
- &.offset-col-1,
- &.offset-col-2 {
+ &.offset-col {
.exchange-icon {
top: $icon-top-margin;
}
}
- &.offset-col-1 .multi-select-col:first-child select[multiple] {
- height: $multiple-select-expanded-height;
- }
-
- &.offset-col-2 .multi-select-col:last-child .row:first-child {
+ &.offset-col .multi-select-col:last-child .row:first-child {
margin-top: 50px;
}
- &.offset-col-2 .multi-select-col:last-child select[multiple] {
+ &.offset-col .multi-select-col:last-child select[multiple] {
height: $multiple-select-expanded-height;
}
}
diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss
index 3b9b070dc2..d4248d82af 100644
--- a/src/styles/components/_statistics-graph.scss
+++ b/src/styles/components/_statistics-graph.scss
@@ -82,19 +82,21 @@
}
}
+ .stats-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+
.total {
- float: left;
- position: absolute;
padding-top: 17px;
padding-left: 20px;
font-size: 12px;
}
.download {
- float: right;
padding-top: 14px;
padding-right: 14px;
- margin-left: -100%;
.download-icon {
font-size: 30px;
diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss
index 9992172147..566b3fd602 100644
--- a/src/styles/components/_table-filter-profiles.scss
+++ b/src/styles/components/_table-filter-profiles.scss
@@ -183,7 +183,8 @@
.btn-container {
width: 100%;
- float: right;
+ display: flex;
+ justify-content: flex-end;
padding: 5px;
border-bottom-left-radius: variables.$main-border-radius;
border-bottom-right-radius: variables.$main-border-radius;
@@ -191,17 +192,17 @@
border-top: 1px solid variables.$main-border-color;
}
+ // When both buttons are present, push cancel to the opposite end
+ // from save instead of leaving a fixed gap between them.
.cancel {
@include button.btn(white);
- margin-right: 3px;
- float: left;
+ margin-right: auto;
height: 28px;
} // cancel
.save {
@include button.btn(green);
text-shadow: none;
- float: right;
height: 28px;
} // save
} // input-container
diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss
index b4e43ab170..f318e02f5d 100644
--- a/src/styles/components/_tables.scss
+++ b/src/styles/components/_tables.scss
@@ -131,25 +131,6 @@
box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow;
}
- // Special column
- &.action {
- width: 202px;
- text-align: center;
- padding-left: 0;
-
- &.single {
- width: 70px !important;
- }
-
- &.double {
- width: 80px !important;
- }
-
- &.triple {
- width: 110px !important;
- }
- }
-
&.small {
width: 30px;
}
@@ -166,10 +147,6 @@
width: 100%;
}
- &.status-col {
- width: 43px;
- }
-
span {
display: flex;
flex-direction: row;
@@ -235,10 +212,6 @@
}
}
- &.darker-row {
- background: variables.$color-lightgray-dark-2;
- }
-
&.disabled {
opacity: 50%;
}
@@ -275,6 +248,7 @@
vertical-align: middle;
// Action icons
+ // Each modifier below is a sibling selector
> a, > button {
display: inline-block;
margin-right: 10px;
@@ -284,79 +258,77 @@
color: variables.$ref-blue;
padding: unset;
line-height: normal;
+ }
- &.action-cell-button {
- width: 17px;
- height: 17px;
-
- > svg {
- width: 100%;
- height: 100%;
- }
-
- .blue {
- color: variables.$ref-blue;
- }
+ > a.action-cell-button, > button.action-cell-button {
+ width: 17px;
+ height: 17px;
- .darkgrey {
- color: variables.$color-darkgray;
- }
+ > svg {
+ width: 100%;
+ height: 100%;
}
- &.remove {
- color: variables.$red;
+ .blue {
+ color: variables.$ref-blue;
}
- &.more-series {
- color: variables.$green;
+ .darkgrey {
+ color: variables.$color-darkgray;
}
+ }
- &.cut {
- .badge {
- position: relative;
- margin-right: -9px;
- left: -7px;
- bottom: 10px;
- width: 6px;
- height: 6px;
- display: inline-block;
- border-radius:100%;
- background-color: variables.$red;
- }
- }
+ > a.remove, > button.remove {
+ color: variables.$red;
+ }
- &.edit {
- color: variables.$l-blue;
- }
+ > a.more-series, > button.more-series {
+ color: variables.$green;
+ }
- &.fa {
- font-size: 18px;
- color: variables.$color-darkgray;
- }
+ > a.cut .badge, > button.cut .badge {
+ position: relative;
+ margin-right: -9px;
+ left: -7px;
+ bottom: 10px;
+ width: 6px;
+ height: 6px;
+ display: inline-block;
+ border-radius:100%;
+ background-color: variables.$red;
+ }
- &.crosslink {
- border-bottom: 1px solid transparent;
- text-align: left;
+ > a.edit, > button.edit {
+ color: variables.$l-blue;
+ }
- &:hover {
- border-bottom: 1px solid;
- }
- }
-
- .notification {
- position: absolute;
- top: -3px;
- right: -3px;
- width: 7px;
- height: 7px;
- border-radius: 50%;
- border: 2px solid variables.$white;
- background: variables.$red;
- width: 10px;
- height: 10px;
+ > a.fa, > button.fa {
+ font-size: 18px;
+ color: variables.$color-darkgray;
+ }
+
+ > a.crosslink, > button.crosslink {
+ border-bottom: 1px solid transparent;
+ text-align: left;
+
+ &:hover {
+ border-bottom: 1px solid;
}
}
+ > a .notification, > button .notification {
+ position: absolute;
+ top: -3px;
+ right: -3px;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ border: 2px solid variables.$white;
+ background: variables.$red;
+ width: 10px;
+ height: 10px;
+ }
+
.notes-container {
overflow-y: auto;
@@ -390,11 +362,6 @@
white-space: nowrap;
}
- // For action row that only has one button
- &.single-btn > a {
- margin-left: 10px;
- }
-
&:last-child {
border-right: none;
}
diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss
index 80a1945802..cd6ae92196 100644
--- a/src/styles/components/modals/_modal-base.scss
+++ b/src/styles/components/modals/_modal-base.scss
@@ -260,31 +260,31 @@
.tbl-container {
width: variables.$modal-full-col-width;
+ }
+ }
+}
- .obj-container .table-series .wrapper {
-
- padding: 1% 2%;
+// Audio/video stream tables on the event asset media details tab
+.media-stream-table-wrapper {
+ padding: 1% 2%;
- &:first-child {
- padding-top: 2%;
- }
+ &:first-child {
+ padding-top: 2%;
+ }
- &:last-child {
- padding-bottom: 2%;
- }
+ &:last-child {
+ padding-bottom: 2%;
+ }
- header {
- border: variables.$thin-border-stroke variables.$main-border-color;
- }
+ header {
+ border: variables.$thin-border-stroke variables.$main-border-color;
+ }
- .main-tbl {
- border: variables.$thin-border-stroke variables.$main-border-color;
- border-top: none;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- }
- }
+ .main-tbl {
+ border: variables.$thin-border-stroke variables.$main-border-color;
+ border-top: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
}
@@ -319,11 +319,6 @@
border: none;
padding-left: 0;
- &.main-tbl.top-tbl {
- border-bottom: 1px solid variables.$main-border-color;
- border-radius: 0;
- }
-
td {
line-height: 25px !important;
padding-top: 4px;
@@ -335,10 +330,6 @@
margin: 0;
}
- a.external-link {
- float: right;
- }
-
.circle {
margin-top: 7px;
}
@@ -371,12 +362,6 @@
}
}
- h3.section-heading {
- color: variables.$dark-prim-color;
- padding: 10px 20px 5px;
- border-bottom: 1px solid variables.$main-border-color;
- }
-
h4 {
color: variables.$dark-prim-color;
font-size: 14px;
diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss
index 2b699047a9..532b5e5405 100644
--- a/src/styles/components/modals/_modal-components.scss
+++ b/src/styles/components/modals/_modal-components.scss
@@ -186,20 +186,6 @@
}
}
-
- // Quick Actions
- // ----------------------------------------
-
- &.quick-actions {
-
- .drop-down-container {
- width: 200px;
- text-align: left;
- }
- }
-
-
-
// Headerless Table Lists
// ----------------------------------------
@@ -265,19 +251,6 @@
}
}
-
- // Dropdown Container
- // ----------------------------------------
-
- .drop-down-container {
- margin: 0 0;
-
- &.full-width {
- width: 100%;
- }
- }
-
-
// Manage Files
// ----------------------------------------
diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss
index 5b704a29ce..778ab3e182 100644
--- a/src/styles/components/modals/_nav.scss
+++ b/src/styles/components/modals/_nav.scss
@@ -23,7 +23,7 @@
*/
-.modal .modal-nav, .event-container .modal-nav {
+.modal .modal-nav {
$height: 50px;
$line-height: 20px;
@@ -46,11 +46,6 @@
color: variables.$modal-nav-link-color;
font-size: 13px;
- &.wider {
- padding-left: 2px;
- padding-right: 2px;
- }
-
&:first-child {
margin-left: 3px;
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5d6d10eb6a..d6794470d0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -123,10 +123,6 @@ td.editable {
white-space: pre-wrap;
}
- .vertical-resize {
- resize: vertical;
- }
-
i.saved, i.edit {
float: right;
cursor: pointer;
diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss
index 8b00ca42d4..36a3c15570 100644
--- a/src/styles/mixins/_button.scss
+++ b/src/styles/mixins/_button.scss
@@ -181,26 +181,6 @@ button {
}
// Buttons
-.add-btn {
- @include btn(green);
- display: inline;
-
- // Circle button
- &.circle-btn {
- border-radius: 50%;
- display: inline-block;
- padding: 0;
- width: 24px;
- height: 24px;
-
- > i {
- position: absolute;
- top: 7px;
- left: 7px;
- }
- }
-}
-
.cancel-btn {
@include btn(white);
}
@@ -209,7 +189,6 @@ button {
@include btn(lightblue);
}
-.red-btn,
.danger-btn {
@include btn(red);
}
diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss
index 9f45b682e7..218946b117 100644
--- a/src/styles/views/_core.scss
+++ b/src/styles/views/_core.scss
@@ -41,10 +41,6 @@ body {
margin-left: 130px;
}
- &.has-alert {
- padding: 10px variables.$side-margin 60px 0;
- }
-
.title {
h1 {
@@ -93,7 +89,7 @@ body {
color: variables.$medium-prim-color;
}
- .drop-down-container {
+ .action-menu {
margin-right: 10px;
&:last-child {
@@ -156,9 +152,5 @@ body {
text-shadow: 0 0 3px variables.$color-pagination-active-box-shadow;
}
}
-
- .drop-down-container {
- float: right;
- }
}
}
diff --git a/src/styles/views/modals/_edit-table-view.scss b/src/styles/views/modals/_edit-table-view.scss
index bcdca95ce5..86f5f2d15a 100644
--- a/src/styles/views/modals/_edit-table-view.scss
+++ b/src/styles/views/modals/_edit-table-view.scss
@@ -91,8 +91,7 @@
background: linear-gradient(to bottom, variables.$white, variables.$color-off-white-dark-2);
}
- &:active,
- &.being-dragged {
+ &:active {
background: linear-gradient(to bottom, variables.$white-semidark, variables.$color-off-white-dark-3);
cursor: move;
box-shadow: 0 0 4px variables.$color-active-box-shadow;
diff --git a/src/styles/views/modals/_group.scss b/src/styles/views/modals/_group.scss
index 579881c5ec..83e7aecca9 100644
--- a/src/styles/views/modals/_group.scss
+++ b/src/styles/views/modals/_group.scss
@@ -24,7 +24,7 @@
.modal#group-modal {
@extend .medium-modal; //small-modal
- .multi-select-col, .multi-select-search {
+ .multi-select-col {
width: 47%;
input.search {