diff --git a/less/common/TextEditor.less b/less/common/TextEditor.less new file mode 100644 index 0000000000..9c65809880 --- /dev/null +++ b/less/common/TextEditor.less @@ -0,0 +1,49 @@ +.TextEditor .TextEditor-editor { + border-radius: 0; + padding: 0 0 10px; + border: 0; + resize: none; + color: @text-color; + font-size: 14px; + line-height: 1.7; + + &, &:focus, &[disabled] { + background: none; + border: 0; + } + + @media @phone { + font-size: 16px; // minimum font-size required to prevent page zoom on focus in iOS 10 + } +} +.TextEditor-controls { + margin: 0; + padding: 10px 0; + list-style-type: none; + overflow-x: auto; + white-space: nowrap; + + li { + display: inline-block; + margin-right: 10px; + } +} +.TextEditor-toolbar { + .Button--icon { + width: 28px; + } +} + +@media @tablet-up { + .TextEditor-controls { + margin: 0 -20px 0 -105px; + padding: 10px 20px; + border-top: 1px solid @control-bg; + + .fullScreen & { + margin: 0; + border-top: 0; + padding: 20px 0; + } + } +} diff --git a/less/common/common.less b/less/common/common.less index f627941961..6d126bc29f 100644 --- a/less/common/common.less +++ b/less/common/common.less @@ -25,5 +25,6 @@ @import "Placeholder"; @import "Search"; @import "Select"; +@import "TextEditor"; @import "Tooltip"; @import "ValidationError"; diff --git a/less/forum/Composer.less b/less/forum/Composer.less index d58d15a674..28f38062bc 100644 --- a/less/forum/Composer.less +++ b/less/forum/Composer.less @@ -319,56 +319,3 @@ left: @pane-width; } } - -// ------------------------------------ -// Text Editor - -.TextEditor .TextEditor-editor { - border-radius: 0; - padding: 0 0 10px; - border: 0; - resize: none; - color: @text-color; - font-size: 14px; - line-height: 1.7; - - &, &:focus, &[disabled] { - background: none; - border: 0; - } - - @media @phone { - font-size: 16px; // minimum font-size required to prevent page zoom on focus in iOS 10 - } -} -.TextEditor-controls { - margin: 0; - padding: 10px 0; - list-style-type: none; - overflow-x: auto; - white-space: nowrap; - - li { - display: inline-block; - margin-right: 10px; - } -} -.TextEditor-toolbar { - .Button--icon { - width: 28px; - } -} - -@media @tablet-up { - .TextEditor-controls { - margin: 0 -20px 0 -105px; - padding: 10px 20px; - border-top: 1px solid @control-bg; - - .fullScreen & { - margin: 0; - border-top: 0; - padding: 20px 0; - } - } -}