| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <head>
- <link rel="stylesheet" href="%APPS_DIR%ckeditor/build/amd/theme/ckeditor.css">
- <style>
- .wrappable {
- white-space: initial;
- line-height: 3em;
- }
- #icons, #iconsColored {
- overflow: hidden;
- }
- #iconsColored {
- color: red;
- }
- #buttonResponsive div > div {
- font-size: 1.3em;
- line-height: 2.8em;
- }
- #buttonResponsive div .ck-button {
- font-size: inherit;
- }
- @keyframes iconColorChange {
- 0% {
- color: white;
- background: orange;
- }
- 50% {
- color: orange;
- background: white;
- }
- 100% {
- color: white;
- background: orange;
- }
- }
- #iconColorChange {
- border: 0;
- animation: iconColorChange 3s infinite;
- }
- </style>
- </head>
- <div id="editor"></div>
- <h2>Icon</h2>
- <h3>Icon: In–text</h3>
- <p>Icons
- <svg class="ck-icon"><use xlink:href="#ck-icon-quote"></use></svg>
- and
- <svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> in a plain paragraph.
- <span style="color: red">
- Icons
- <svg class="ck-icon"><use xlink:href="#ck-icon-link"></use></svg>
- follow the
- <svg class="ck-icon"><use xlink:href="#ck-icon-source"></use></svg>
- color of text.
- </span>
- </p>
- <h3>Icon: Availability</h3>
- <p id="icons" class="ck-reset-all"></p>
- <h3>Icon: Availability (colored)</h3>
- <p id="iconsColored" class="ck-reset-all"></p>
- <hr/>
- <h2>Button</h2>
- <h3>Button: States</h3>
- <div class="ck-reset-all">
- <button class="ck-button">State: normal (none)</button>
- <button class="ck-button ck-disabled">State: disabled</button>
- <button class="ck-button ck-on">State: on</button>
- </div>
- <h3>Button: Types</h3>
- <div class="ck-reset-all">
- <button class="ck-button ck-button-action">Action button</button>
- <button class="ck-button ck-rounded-corners">Rounded corners</button>
- <button class="ck-button ck-button-bold">Bold text</button>
- </div>
- <h3>Button: Icon</h3>
- <div class="ck-reset-all" >
- <div id="buttonIcon" class="wrappable"></div>
- <br/>
- <button class="ck-button">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- Icon to the left
- </button>
- <button class="ck-button">
- <svg class="ck-icon ck-icon-right"><use xlink:href="#ck-icon-bold"></use></svg>
- Icon to the right (RTL)
- </button>
- <button class="ck-button" style="border-radius: 100px; border: 0">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
- Custom style with icon
- </button>
- <br/>
- <br/>
- <button class="ck-button ck-disabled">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- Disabled with icon
- </button>
- <button class="ck-button ck-disabled ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- </button>
- <button id="iconColorChange" class="ck-button">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- Icon follows text color
- </button>
- </div>
- <h3>Button: Responsiveness</h3>
- <div id="buttonResponsive" class="ck-reset-all">
- <div>
- <button class="ck-button">A button</button>
- <button class="ck-button ck-button-action">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
- Image
- </button>
- <button class="ck-button">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- Bold
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
- </button>
- </div>
- </div>
- <hr/>
- <h2>Toolbar</h2>
- <h3>Toolbar: Text</h3>
- <div class="ck-reset-all">
- <div class="ck-toolbar">
- Just text and some <svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> icon.
- </div>
- </div>
- <h3>Toolbar: Button</h3>
- <div class="ck-reset-all">
- <div class="ck-toolbar">
- <button class="ck-button">A button</button>
- <button class="ck-button ck-disabled">Disabled button</button>
- <button class="ck-button ck-button-active">Active button</button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
- </button>
- And some text.
- </div>
- </div>
- <h3>Toolbar: Rounded</h3>
- <div class="ck-reset-all">
- <div class="ck-rounded-corners ck-toolbar">
- <button class="ck-button">A button which corners are also rounded because of toolbar class</button>
- <button class="ck-button ck-button-notext"><svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg></button>
- </div>
- </div>
- <h3>Toolbar: Wrapping content</h3>
- <div class="ck-reset-all">
- <div class="ck-toolbar" style="width: 80px">
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
- </button>
- </div>
- </div>
- <h3>Toolbar: Item separators</h3>
- <div class="ck-reset-all">
- <div class="ck-toolbar">
- <button class="ck-button">First</button>
- <button class="ck-button">Second</button>
- <span class="ck-toolbar-separator"></span>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
- </button>
- <span class="ck-toolbar-separator"></span>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
- </button>
- </div>
- </div>
- <h3>Toolbar: Multi-row</h3>
- <div class="ck-reset-all">
- <div class="ck-toolbar">
- <button class="ck-button">First row</button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
- </button>
- <span class="ck-toolbar-newline"></span>
- <button class="ck-button">Second row</button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-table"></use></svg>
- </button>
- <button class="ck-button ck-button-notext">
- <svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-source"></use></svg>
- </button>
- </div>
- </div>
|