diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index e863d56ac..914e8f384 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -18,38 +18,6 @@ bottom: $newToolbarSizeWithPadding; } - &__toolbar { - @include flex(); - flex-direction: column-reverse; - flex-wrap: nowrap; - position: relative; - width: $filmstripToggleButtonWidth; - - button { - font-size: 14px; - line-height: 1.2; - text-align: center; - background: transparent; - opacity: 0.7; - height: auto; - width: 100%; - padding: 0; - margin: 0; - border: none; - outline: none; - - -webkit-appearance: none; - - &:hover { - opacity: 1; - } - - i { - cursor: pointer; - } - } - } - &__videos { @extend %align-right; position:relative; diff --git a/css/filmstrip/_filmstrip_toolbar.scss b/css/filmstrip/_filmstrip_toolbar.scss new file mode 100644 index 000000000..13f99f945 --- /dev/null +++ b/css/filmstrip/_filmstrip_toolbar.scss @@ -0,0 +1,31 @@ +.filmstrip__toolbar { + @include flex(); + flex-direction: column-reverse; + flex-wrap: nowrap; + position: relative; + width: $filmstripToggleButtonWidth; + + button { + font-size: 14px; + line-height: 1.2; + text-align: center; + background: transparent; + opacity: 0.7; + height: auto; + width: 100%; + padding: 0; + margin: 0; + border: none; + outline: none; + + -webkit-appearance: none; + + &:hover { + opacity: 1; + } + + i { + cursor: pointer; + } + } +} diff --git a/css/main.scss b/css/main.scss index 3e38d4c47..ef95aea86 100644 --- a/css/main.scss +++ b/css/main.scss @@ -70,6 +70,7 @@ @import 'policy'; @import 'popover'; @import 'filmstrip'; +@import 'filmstrip/filmstrip_toolbar'; @import 'unsupported-browser/main'; @import 'modals/invite/add-people'; @import 'vertical_filmstrip_overrides';