diff --git a/assets/trix/stylesheets/icons.scss b/assets/trix/stylesheets/icons.scss new file mode 100644 index 000000000..6e49aa84a --- /dev/null +++ b/assets/trix/stylesheets/icons.scss @@ -0,0 +1,14 @@ +trix-toolbar .button_group button { + &.bold::before { background-image: asset-data-url('trix/images/bold.svg'); } + &.italic::before { background-image: asset-data-url('trix/images/italic.svg'); } + &.link::before { background-image: asset-data-url('trix/images/link.svg'); } + &.strike::before { background-image: asset-data-url('trix/images/strike.svg'); } + &.quote::before { background-image: asset-data-url('trix/images/quote.svg'); } + &.code::before { background-image: asset-data-url('trix/images/code.svg'); } + &.bullets::before { background-image: asset-data-url('trix/images/bullets.svg'); } + &.numbers::before { background-image: asset-data-url('trix/images/numbers.svg'); } + &.block-level.decrease::before { background-image: asset-data-url('trix/images/block_level_decrease.svg'); } + &.block-level.increase::before { background-image: asset-data-url('trix/images/block_level_increase.svg'); } + &.undo::before { background-image: asset-data-url('trix/images/undo.svg'); } + &.redo::before { background-image: asset-data-url('trix/images/redo.svg'); } +} diff --git a/assets/trix/stylesheets/icons.scss.erb b/assets/trix/stylesheets/icons.scss.erb deleted file mode 100644 index 8d8dba398..000000000 --- a/assets/trix/stylesheets/icons.scss.erb +++ /dev/null @@ -1,14 +0,0 @@ -trix-toolbar .button_group button { - &.bold::before { background-image: url(<%= asset_data_uri 'trix/images/bold.svg' %>); } - &.italic::before { background-image: url(<%= asset_data_uri 'trix/images/italic.svg' %>); } - &.link::before { background-image: url(<%= asset_data_uri 'trix/images/link.svg' %>); } - &.strike::before { background-image: url(<%= asset_data_uri 'trix/images/strike.svg' %>); } - &.quote::before { background-image: url(<%= asset_data_uri 'trix/images/quote.svg' %>); } - &.code::before { background-image: url(<%= asset_data_uri 'trix/images/code.svg' %>); } - &.bullets::before { background-image: url(<%= asset_data_uri 'trix/images/bullets.svg' %>); } - &.numbers::before { background-image: url(<%= asset_data_uri 'trix/images/numbers.svg' %>); } - &.block-level.decrease::before { background-image: url(<%= asset_data_uri 'trix/images/block_level_decrease.svg' %>); } - &.block-level.increase::before { background-image: url(<%= asset_data_uri 'trix/images/block_level_increase.svg' %>); } - &.undo::before { background-image: url(<%= asset_data_uri 'trix/images/undo.svg' %>); } - &.redo::before { background-image: url(<%= asset_data_uri 'trix/images/redo.svg' %>); } -} diff --git a/assets/trix/stylesheets/toolbar.scss b/assets/trix/stylesheets/toolbar.scss index a8bc71100..10428b013 100644 --- a/assets/trix/stylesheets/toolbar.scss +++ b/assets/trix/stylesheets/toolbar.scss @@ -1,18 +1,12 @@ trix-toolbar { - display: inline-block; - * { box-sizing: border-box; } - .button_groups { - height: 36px; - } - .button_group { display: inline-block; font-size: 0; - margin: 0 8px 0 0; + margin: 0 8px 4px 0; border: 1px solid #bbb; border-top-color: #ccc; border-bottom-color: #888; @@ -73,6 +67,7 @@ trix-toolbar { left: 0; right: 0; padding: 12px 8px; + line-height: 12px; background: #fff; box-shadow: 0 0.3rem 1rem #ccc; border-top: 2px solid #888; @@ -82,9 +77,12 @@ trix-toolbar { input[type=button] { font-size: 12px; height: 24px; + width: 50px; padding: 1px 8px 0 8px; width: auto; opacity: .6; + -webkit-appearance: none; + -webkit-border-radius: 0; } input[type=url], input[type=text] { @@ -96,19 +94,27 @@ trix-toolbar { border-radius: 5px; border: 1px solid #bbb; background-color: #fff; + box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; + + &.validate:invalid { + box-shadow: #F00 0px 0px 1.5px 1px; + } } &.link_dialog { + min-width: 300px; + max-width: 600px; + .button_group { - max-width: 25%; + max-width: 110px; } input[type=url] { float: left; - width: 75%; + width: calc(100% - 120px); } } }