├── .gitignore ├── .travis.yml ├── Gruntfile.coffee ├── LICENSE ├── README.md ├── SpecRunner.html ├── bower.json ├── build ├── content-tools.js ├── content-tools.min.css ├── content-tools.min.js └── images │ ├── drop-horz.svg │ ├── drop-vert-above.svg │ ├── drop-vert-below.svg │ ├── icons.woff │ └── video.svg ├── external ├── icomoon.json ├── scripts │ └── content-edit.js └── styles │ ├── _content-edit.scss │ ├── _normalize.scss │ ├── bourbon │ ├── _bourbon-deprecated-upcoming.scss │ ├── _bourbon.scss │ ├── addons │ │ ├── _clearfix.scss │ │ ├── _directional-values.scss │ │ ├── _ellipsis.scss │ │ ├── _font-family.scss │ │ ├── _hide-text.scss │ │ ├── _html5-input-types.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _border-radius.scss │ │ ├── _box-sizing.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _selection.scss │ │ ├── _text-decoration.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ ├── functions │ │ ├── _assign.scss │ │ ├── _color-lightness.scss │ │ ├── _contains.scss │ │ ├── _is-length.scss │ │ ├── _is-size.scss │ │ ├── _modular-scale.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _strip-units.scss │ │ ├── _tint-shade.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _font-source-declaration.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _is-num.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _prefixer.scss │ │ └── _px-to-em.scss │ └── neat │ ├── _neat-helpers.scss │ ├── _neat.scss │ ├── functions │ ├── _new-breakpoint.scss │ └── _private.scss │ ├── grid │ ├── _box-sizing.scss │ ├── _direction-context.scss │ ├── _display-context.scss │ ├── _fill-parent.scss │ ├── _media.scss │ ├── _omega.scss │ ├── _outer-container.scss │ ├── _pad.scss │ ├── _private.scss │ ├── _row.scss │ ├── _shift.scss │ ├── _span-columns.scss │ ├── _to-deprecate.scss │ └── _visual-grid.scss │ └── settings │ ├── _disable-warnings.scss │ ├── _grid.scss │ └── _visual-grid.scss ├── package-lock.json ├── package.json ├── sandbox ├── author-pic.jpg ├── image.png ├── index.html ├── sandbox.css └── sandbox.js ├── spec ├── content-tools-spec.js └── spec-helper.js ├── src ├── sandbox │ ├── cloudinary-image-uploader.coffee │ ├── image-uploader.coffee │ ├── sandbox.coffee │ └── sandbox.scss ├── scripts │ ├── clean-html.coffee │ ├── editor.coffee │ ├── history.coffee │ ├── namespace.coffee │ ├── styles.coffee │ ├── tools.coffee │ └── ui │ │ ├── dialogs │ │ ├── dialogs.coffee │ │ ├── image.coffee │ │ ├── link.coffee │ │ ├── properties.coffee │ │ ├── table.coffee │ │ └── video.coffee │ │ ├── events.coffee │ │ ├── flashes.coffee │ │ ├── ignition.coffee │ │ ├── inspector.coffee │ │ ├── modal.coffee │ │ ├── toolbox.coffee │ │ └── ui.coffee ├── spec │ ├── editor.coffee │ ├── history.coffee │ ├── namespace.coffee │ ├── styles.coffee │ ├── tools.coffee │ └── ui │ │ ├── dialogs │ │ ├── dialogs.coffee │ │ ├── image.coffee │ │ ├── link.coffee │ │ ├── properties.coffee │ │ ├── table.coffee │ │ └── video.coffee │ │ ├── events.coffee │ │ ├── flashes.coffee │ │ ├── ignition.coffee │ │ ├── inspector.coffee │ │ ├── modal.coffee │ │ ├── toolbox.coffee │ │ └── ui.coffee └── styles │ ├── _settings.scss │ ├── content-tools.scss │ └── ui │ ├── _attributes.scss │ ├── _crop-marks.scss │ ├── _dialogs.scss │ ├── _flashes.scss │ ├── _grips.scss │ ├── _ignition.scss │ ├── _inspector.scss │ ├── _modal.scss │ ├── _progress.scss │ ├── _sections.scss │ ├── _toolbox.scss │ └── _ui.scss └── translations ├── ar.json ├── ca.json ├── cs.json ├── da.json ├── de.json ├── es.json ├── fa.json ├── fr.json ├── he.json ├── hu.json ├── it.json ├── ko.json ├── lp.json ├── nb.json ├── nl.json ├── nn.json ├── pl.json ├── pt-br.json ├── ru.json ├── sv.json ├── tr.json ├── uk.json ├── uz.json ├── vi.json ├── zh-cn.json └── zh-tw.json /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | .sass-cache 3 | jasmine 4 | node_modules 5 | 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | before_install: 5 | - npm install -g grunt-cli -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Getme Limited (http://getme.co.uk) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | > *For information on the ContentTools 2.x roadmap please view the: [Roadmap repo](https://github.com/GetmeUK/contenttools-2-roadmap)* 3 | 4 | --- 5 | 6 | 7 | # ContentTools 8 | 9 | [![Build Status](https://travis-ci.org/GetmeUK/ContentTools.svg?branch=master)](https://travis-ci.org/GetmeUK/ContentTools) 10 | 11 | > A JS library for building WYSIWYG editors for HTML content. 12 | 13 | Demo 14 | 15 | ## Install 16 | 17 | **Using bower** 18 | 19 | ``` 20 | bower install --save ContentTools 21 | ``` 22 | 23 | **Using npm** 24 | 25 | ``` 26 | npm install --save ContentTools 27 | ``` 28 | 29 | ## Building 30 | To build the library you'll need to use Grunt. First install the required node modules ([grunt-cli](http://gruntjs.com/getting-started) must be installed): 31 | ``` 32 | git clone https://github.com/GetmeUK/ContentTools.git 33 | cd ContentTools 34 | npm install 35 | ``` 36 | 37 | Install Sass (if not already installed): 38 | ``` 39 | gem install sass 40 | ``` 41 | 42 | Then run `grunt build` to build the project. 43 | 44 | ## Testing 45 | To test the library you'll need to use Jasmine. First install Jasmine: 46 | ``` 47 | git clone https://github.com/pivotal/jasmine.git 48 | mkdir ContentTools/jasmine 49 | mv jasmine/dist/jasmine-standalone-2.0.3.zip ContentTools/jasmine 50 | cd ContentTools/jasmine 51 | unzip jasmine-standalone-2.0.3.zip 52 | ``` 53 | 54 | Then open `ContentTools/SpecRunner.html` in a browser to run the tests. 55 | 56 | Alternatively you can use `grunt jasmine` to run the tests from the command line. 57 | 58 | ## ContentTools via jsdelivr 59 | 60 | ContentTools is available via the [jsdelivr open source CDN](http://www.jsdelivr.com/), to reference a file from the ContentTools build directory use the following URL format: 61 | 62 | `http://cdn.jsdelivr.net/npm/ContenTools@{version}/{file}` 63 | 64 | For example to access the current primary JavaScript file the URL would be: 65 | 66 | `https://cdn.jsdelivr.net/npm/ContentTools@1.6.1/build/content-tools.min.js` 67 | 68 | As the project's CSS uses relative file paths you will need to either role your own version of CSS from the SASS files (recommended) or [override references to fonts/images within your local CSS](https://gist.github.com/anthonyjb/a6aec8ecfbfe6f875d5c6691687ba43d). 69 | 70 | 71 | ## Documentation 72 | Full documentation is available at http://getcontenttools.com/api/content-tools 73 | 74 | ## Where to post... 75 | 76 | - How do I? -- StackOverflow 77 | - I got this error, why? -- StackOverflow 78 | - I got this error and I'm sure it's a bug -- post an issue 79 | - I have an idea/request -- post an issue 80 | - Why do you? -- chat with me on gitter (I may then post it as an issue) 81 | - When will you? -- chat with me on gitter (I may then post it as an issue) 82 | - You suck and I hate you -- contact us privately at pm@piersmorgan.me! 83 | - You're awesome -- please find a megaphone and suitably high rooftop (but seriously any help spreading the word about ContentTools is much appreciated) 84 | 85 | > Stolen almost in it's entirety from this [post](http://meta.stackexchange.com/questions/3966/is-it-okay-to-use-stack-overflow-as-the-support-forum-for-a-product-or-project) on meta.stackexchange.com 86 | 87 | ## Browser support 88 | The current aim is for all the libraries to support IE9+, Chrome and Firefox. Test suites are complete for all the libraries except ContentTools and I'm using Jasmine to check that the tests pass in those browsers. 89 | 90 | There will be some visual differences for ContentTools in IE9 as I use CSS animations for some of the UI feedback. 91 | 92 | ## Helpful organizations 93 | ContentTools is developed using a number of tools & services provided for free by nice folks at organizations committed to supporting open-source projects including [BrowserStack](http://www.browserstack.com), [GitHub](https://github.com) and [jsdelivr](http://www.jsdelivr.com/), [Travis CI](https://travis-ci.org). 94 | -------------------------------------------------------------------------------- /SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ContentTools spec runner 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ContentTools", 3 | "description": "A JS library for building WYSIWYG editors for HTML content", 4 | "main": [ 5 | "build/content-tools.js", 6 | "build/content-tools.min.css", 7 | "build/icons.woff", 8 | "build/images/drop-horz.svg", 9 | "build/images/drop-vert-above.svg", 10 | "build/images/drop-vert-below.svg", 11 | "build/images/video.svg" 12 | ], 13 | "authors": [ 14 | { 15 | "name": "Anthony Blackshaw", 16 | "email": "ant@getme.co.uk", 17 | "url": "https://github.com/anthonyjb" 18 | } 19 | ], 20 | "license": "MIT", 21 | "keywords": [ 22 | "wysiwyg", 23 | "inline", 24 | "html", 25 | "editor" 26 | ], 27 | "homepage": "http://getcontenttools.com/api/content-tools", 28 | "repository": { 29 | "type": "git", 30 | "url": "git@github.com:GetmeUK/ContentTools.git" 31 | }, 32 | "moduleType": [ 33 | "globals" 34 | ], 35 | "ignore": [ 36 | "**/.*", 37 | "node_modules", 38 | "bower_components", 39 | "test", 40 | "tests" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /build/images/drop-horz.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 24 | 33 | 34 | -------------------------------------------------------------------------------- /build/images/drop-vert-above.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 24 | 33 | 34 | -------------------------------------------------------------------------------- /build/images/drop-vert-below.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 24 | 33 | 34 | -------------------------------------------------------------------------------- /build/images/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/build/images/icons.woff -------------------------------------------------------------------------------- /build/images/video.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /external/styles/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 4.1.0 2 | // http://bourbon.io 3 | // Copyright 2011-2014 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Settings 7 | @import "settings/prefixer"; 8 | @import "settings/px-to-em"; 9 | @import "settings/asset-pipeline"; 10 | 11 | // Custom Helpers 12 | @import "helpers/convert-units"; 13 | @import "helpers/font-source-declaration"; 14 | @import "helpers/gradient-positions-parser"; 15 | @import "helpers/is-num"; 16 | @import "helpers/linear-angle-parser"; 17 | @import "helpers/linear-gradient-parser"; 18 | @import "helpers/linear-positions-parser"; 19 | @import "helpers/linear-side-corner-parser"; 20 | @import "helpers/radial-arg-parser"; 21 | @import "helpers/radial-positions-parser"; 22 | @import "helpers/radial-gradient-parser"; 23 | @import "helpers/render-gradients"; 24 | @import "helpers/shape-size-stripper"; 25 | // @import "helpers/str-to-num"; 26 | 27 | // Custom Functions 28 | @import "functions/assign"; 29 | // @import "functions/color-lightness"; 30 | @import "functions/contains"; 31 | @import "functions/is-length"; 32 | @import "functions/is-size"; 33 | // @import "functions/px-to-em"; 34 | // @import "functions/px-to-rem"; 35 | // @import "functions/strip-units"; 36 | @import "functions/tint-shade"; 37 | @import "functions/transition-property-name"; 38 | @import "functions/unpack"; 39 | // @import "functions/modular-scale"; 40 | 41 | // CSS3 Mixins 42 | @import "css3/animation"; 43 | @import "css3/appearance"; 44 | @import "css3/backface-visibility"; 45 | @import "css3/background"; 46 | @import "css3/background-image"; 47 | @import "css3/border-image"; 48 | @import "css3/border-radius"; 49 | @import "css3/box-sizing"; 50 | @import "css3/calc"; 51 | @import "css3/columns"; 52 | @import "css3/filter"; 53 | @import "css3/flex-box"; 54 | @import "css3/font-face"; 55 | @import "css3/font-feature-settings"; 56 | @import "css3/hidpi-media-query"; 57 | @import "css3/hyphens"; 58 | @import "css3/image-rendering"; 59 | @import "css3/keyframes"; 60 | @import "css3/linear-gradient"; 61 | @import "css3/perspective"; 62 | @import "css3/placeholder"; 63 | @import "css3/radial-gradient"; 64 | @import "css3/selection"; 65 | @import "css3/text-decoration"; 66 | @import "css3/transform"; 67 | @import "css3/transition"; 68 | @import "css3/user-select"; 69 | 70 | // Addons & other mixins 71 | @import "addons/clearfix"; 72 | @import "addons/directional-values"; 73 | @import "addons/ellipsis"; 74 | @import "addons/font-family"; 75 | @import "addons/hide-text"; 76 | @import "addons/html5-input-types"; 77 | @import "addons/position"; 78 | @import "addons/prefixer"; 79 | @import "addons/retina-image"; 80 | @import "addons/size"; 81 | @import "addons/timing-functions"; 82 | // @import "addons/triangle"; 83 | @import "addons/word-wrap"; 84 | 85 | // Soon to be deprecated Mixins 86 | @import "bourbon-deprecated-upcoming"; 87 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // The clearfix mixin provides an easy way to contain floats 2 | // 3 | // Example usage: 4 | // .wrapper { 5 | // @include clearfix; 6 | // } 7 | 8 | @mixin clearfix { 9 | &::after { 10 | clear: both; 11 | content: ""; 12 | display: table; 13 | } 14 | } 15 | 16 | // Acknowledgements: 17 | // Thierry Koblentz, cssmojo 18 | // http://goo.gl/AQWvyH 19 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_directional-values.scss: -------------------------------------------------------------------------------- 1 | // directional-property mixins are shorthands 2 | // for writing properties like the following 3 | // 4 | // @include margin(null 0 10px); 5 | // ------ 6 | // margin-right: 0; 7 | // margin-bottom: 10px; 8 | // margin-left: 0; 9 | // 10 | // - or - 11 | // 12 | // @include border-style(dotted null); 13 | // ------ 14 | // border-top-style: dotted; 15 | // border-bottom-style: dotted; 16 | // 17 | // ------ 18 | // 19 | // Note: You can also use false instead of null 20 | 21 | @function collapse-directionals($vals) { 22 | $output: null; 23 | 24 | $A: nth( $vals, 1 ); 25 | $B: if( length($vals) < 2, $A, nth($vals, 2)); 26 | $C: if( length($vals) < 3, $A, nth($vals, 3)); 27 | $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); 28 | 29 | @if $A == 0 { $A: 0 } 30 | @if $B == 0 { $B: 0 } 31 | @if $C == 0 { $C: 0 } 32 | @if $D == 0 { $D: 0 } 33 | 34 | @if $A == $B and $A == $C and $A == $D { $output: $A } 35 | @else if $A == $C and $B == $D { $output: $A $B } 36 | @else if $B == $D { $output: $A $B $C } 37 | @else { $output: $A $B $C $D } 38 | 39 | @return $output; 40 | } 41 | 42 | @function contains-falsy($list) { 43 | @each $item in $list { 44 | @if not $item { 45 | @return true; 46 | } 47 | } 48 | 49 | @return false; 50 | } 51 | 52 | @mixin directional-property($pre, $suf, $vals) { 53 | // Property Names 54 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 55 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 56 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 57 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 58 | $all: $pre + if($suf, "-#{$suf}", ""); 59 | 60 | $vals: collapse-directionals($vals); 61 | 62 | @if contains-falsy($vals) { 63 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 64 | 65 | @if length($vals) == 1 { 66 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 67 | } @else { 68 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 69 | } 70 | 71 | // prop: top/bottom right/left 72 | @if length($vals) == 2 { 73 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 74 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 75 | 76 | // prop: top right/left bottom 77 | } @else if length($vals) == 3 { 78 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 79 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 80 | 81 | // prop: top right bottom left 82 | } @else if length($vals) == 4 { 83 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 84 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 85 | } 86 | 87 | // prop: top/right/bottom/left 88 | } @else { 89 | #{$all}: $vals; 90 | } 91 | } 92 | 93 | @mixin margin($vals...) { 94 | @include directional-property(margin, false, $vals...); 95 | } 96 | 97 | @mixin padding($vals...) { 98 | @include directional-property(padding, false, $vals...); 99 | } 100 | 101 | @mixin border-style($vals...) { 102 | @include directional-property(border, style, $vals...); 103 | } 104 | 105 | @mixin border-color($vals...) { 106 | @include directional-property(border, color, $vals...); 107 | } 108 | 109 | @mixin border-width($vals...) { 110 | @include directional-property(border, width, $vals...); 111 | } 112 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | word-wrap: normal; 8 | } 9 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text($height: 1em) { 2 | height: $height; 3 | line-height: 1.5; 4 | overflow: hidden; 5 | 6 | &::before { 7 | content: ""; 8 | display: block; 9 | width: 0; 10 | height: 100%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | // Bare inputs 24 | //************************************************************************// 25 | $all-text-inputs: assign-inputs($inputs-list); 26 | 27 | // Hover Pseudo-class 28 | //************************************************************************// 29 | $all-text-inputs-hover: assign-inputs($inputs-list, hover); 30 | 31 | // Focus Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-focus: assign-inputs($inputs-list, focus); 34 | 35 | // Active Pseudo-class 36 | //************************************************************************// 37 | $all-text-inputs-active: assign-inputs($inputs-list, active); 38 | 39 | 40 | // You must use interpolation on the variable: 41 | // #{$all-text-inputs} 42 | // #{$all-text-inputs-hover} 43 | // #{$all-text-inputs-focus} 44 | // #{$all-text-inputs-active} 45 | 46 | // Example 47 | //************************************************************************// 48 | // #{$all-text-inputs}, textarea { 49 | // border: 1px solid red; 50 | // } 51 | 52 | 53 | 54 | //************************************************************************// 55 | // Generate a variable ($all-button-inputs) with a list of all html5 56 | // input types that have a button-based input, excluding button. 57 | //************************************************************************// 58 | $inputs-button-list: 'input[type="button"]', 59 | 'input[type="reset"]', 60 | 'input[type="submit"]'; 61 | 62 | // Bare inputs 63 | //************************************************************************// 64 | $all-button-inputs: assign-inputs($inputs-button-list); 65 | 66 | // Hover Pseudo-class 67 | //************************************************************************// 68 | $all-button-inputs-hover: assign-inputs($inputs-button-list, hover); 69 | 70 | // Focus Pseudo-class 71 | //************************************************************************// 72 | $all-button-inputs-focus: assign-inputs($inputs-button-list, focus); 73 | 74 | // Active Pseudo-class 75 | //************************************************************************// 76 | $all-button-inputs-active: assign-inputs($inputs-button-list, active); 77 | 78 | 79 | 80 | // You must use interpolation on the variable: 81 | // #{$all-button-inputs} 82 | // #{$all-button-inputs-hover} 83 | // #{$all-button-inputs-focus} 84 | // #{$all-button-inputs-active} 85 | 86 | // Example 87 | //************************************************************************// 88 | // #{$all-button-inputs}, button { 89 | // border: 1px solid red; 90 | // } 91 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | // Set element positioning in a single statement 2 | 3 | @mixin position($position: relative, $coordinates: null null null null) { 4 | 5 | @if type-of($position) == list { 6 | $coordinates: $position; 7 | $position: relative; 8 | } 9 | 10 | $coordinates: unpack($coordinates); 11 | 12 | $offsets: ( 13 | top: nth($coordinates, 1), 14 | right: nth($coordinates, 2), 15 | bottom: nth($coordinates, 3), 16 | left: nth($coordinates, 4) 17 | ); 18 | 19 | position: $position; 20 | 21 | @each $offset, $value in $offsets { 22 | @if is-length($value) { 23 | #{$offset}: $value; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | // Set `width` and `height` in a single statement 2 | 3 | @mixin size($value) { 4 | $width: nth($value, 1); 5 | $height: $width; 6 | 7 | @if length($value) > 1 { 8 | $height: nth($value, 2); 9 | } 10 | 11 | @if is-size($height) { 12 | height: $height; 13 | } 14 | 15 | @else { 16 | @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 17 | } 18 | 19 | @if is-size($width) { 20 | width: $width; 21 | } 22 | 23 | @else { 24 | @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | $width: nth($size, 1); 6 | $height: nth($size, length($size)); 7 | 8 | $foreground-color: nth($color, 1); 9 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 10 | 11 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 12 | 13 | $width: $width / 2; 14 | $height: if(length($size) > 1, $height, $height/2); 15 | 16 | @if $direction == up { 17 | border-left: $width solid $background-color; 18 | border-right: $width solid $background-color; 19 | border-bottom: $height solid $foreground-color; 20 | 21 | } @else if $direction == right { 22 | border-top: $width solid $background-color; 23 | border-bottom: $width solid $background-color; 24 | border-left: $height solid $foreground-color; 25 | 26 | } @else if $direction == down { 27 | border-left: $width solid $background-color; 28 | border-right: $width solid $background-color; 29 | border-top: $height solid $foreground-color; 30 | 31 | } @else if $direction == left { 32 | border-top: $width solid $background-color; 33 | border-bottom: $width solid $background-color; 34 | border-right: $height solid $foreground-color; 35 | } 36 | } 37 | 38 | @else if ($direction == up-right) or ($direction == up-left) { 39 | border-top: $height solid $foreground-color; 40 | 41 | @if $direction == up-right { 42 | border-left: $width solid $background-color; 43 | 44 | } @else if $direction == up-left { 45 | border-right: $width solid $background-color; 46 | } 47 | } 48 | 49 | @else if ($direction == down-right) or ($direction == down-left) { 50 | border-bottom: $height solid $foreground-color; 51 | 52 | @if $direction == down-right { 53 | border-left: $width solid $background-color; 54 | 55 | } @else if $direction == down-left { 56 | border-right: $width solid $background-color; 57 | } 58 | } 59 | 60 | @else if ($direction == inset-up) { 61 | border-width: $height $width; 62 | border-style: solid; 63 | border-color: $background-color $background-color $foreground-color; 64 | } 65 | 66 | @else if ($direction == inset-down) { 67 | border-width: $height $width; 68 | border-style: solid; 69 | border-color: $foreground-color $background-color $background-color; 70 | } 71 | 72 | @else if ($direction == inset-right) { 73 | border-width: $width $height; 74 | border-style: solid; 75 | border-color: $background-color $background-color $background-color $foreground-color; 76 | } 77 | 78 | @else if ($direction == inset-left) { 79 | border-width: $width $height; 80 | border-style: solid; 81 | border-color: $background-color $foreground-color $background-color $background-color; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /external/styles/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | overflow-wrap: $wrap; 3 | word-wrap: $wrap; 4 | 5 | @if $wrap == break-word { 6 | word-break: break-all; 7 | } @else { 8 | word-break: $wrap; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or $background-type == list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Border Radius (Shorthand) 2 | // Provides a shorthand syntax to target and add border radii to both corners on one side of a box 3 | 4 | @mixin border-top-radius($radii) { 5 | border-top-left-radius: $radii; 6 | border-top-right-radius: $radii; 7 | } 8 | 9 | @mixin border-right-radius($radii) { 10 | border-bottom-right-radius: $radii; 11 | border-top-right-radius: $radii; 12 | } 13 | 14 | @mixin border-bottom-radius($radii) { 15 | border-bottom-left-radius: $radii; 16 | border-bottom-right-radius: $radii; 17 | } 18 | 19 | @mixin border-left-radius($radii) { 20 | border-bottom-left-radius: $radii; 21 | border-top-left-radius: $radii; 22 | } 23 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: null, $G4: null, 4 | $G5: null, $G6: null, 5 | $G7: null, $G8: null, 6 | $G9: null, $G10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 12 | $G1: nth($data, 1); 13 | $G2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $G1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 32 | $pos: if($pos, '#{$pos}, ', null); 33 | $pos-spec: if($pos, 'at #{$pos}', null); 34 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_selection.scss: -------------------------------------------------------------------------------- 1 | @mixin selection { 2 | $before-colons: ""; 3 | 4 | @if & { 5 | $before-colons: "&" 6 | } 7 | 8 | #{$before-colons}::selection { 9 | @content; 10 | } 11 | #{$before-colons}::-moz-selection { 12 | @content; 13 | } 14 | } -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | @mixin text-decoration($value) { 2 | // || || 3 | @include prefixer(text-decoration, $value, moz); 4 | } 5 | 6 | @mixin text-decoration-line($line: none) { 7 | // none || underline || overline || line-through 8 | @include prefixer(text-decoration-line, $line, moz); 9 | } 10 | 11 | @mixin text-decoration-style($style: solid) { 12 | // solid || double || dotted || dashed || wavy 13 | @include prefixer(text-decoration-style, $style, moz webkit); 14 | } 15 | 16 | @mixin text-decoration-color($color: currentColor) { 17 | // currentColor || 18 | @include prefixer(text-decoration-color, $color, moz); 19 | } 20 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition ($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } 34 | 35 | // Create lists for non-prefixed transition properties 36 | @else { 37 | $webkit: append($webkit, $list, comma); 38 | $moz: append($moz, $list, comma); 39 | $spec: append($spec, $list, comma); 40 | } 41 | } 42 | 43 | @if $needs-prefixes { 44 | -webkit-transition: $webkit; 45 | -moz-transition: $moz; 46 | transition: $spec; 47 | } 48 | @else { 49 | @if length($properties) >= 1 { 50 | @include prefixer(transition, $properties, webkit moz spec); 51 | } 52 | 53 | @else { 54 | $properties: all 0.15s ease-out 0s; 55 | @include prefixer(transition, $properties, webkit moz spec); 56 | } 57 | } 58 | } 59 | 60 | @mixin transition-property ($properties...) { 61 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 62 | -moz-transition-property: transition-property-names($properties, 'moz'); 63 | transition-property: transition-property-names($properties, false); 64 | } 65 | 66 | @mixin transition-duration ($times...) { 67 | @include prefixer(transition-duration, $times, webkit moz spec); 68 | } 69 | 70 | @mixin transition-timing-function ($motions...) { 71 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 72 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 73 | } 74 | 75 | @mixin transition-delay ($times...) { 76 | @include prefixer(transition-delay, $times, webkit moz spec); 77 | } 78 | -------------------------------------------------------------------------------- /external/styles/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_contains.scss: -------------------------------------------------------------------------------- 1 | // Test a Sass list to see if it contains a defined value 2 | // Allows for checking if a list contains several values at once 3 | 4 | @function contains($list, $values...) { 5 | @each $value in $values { 6 | @if type-of(index($list, $value)) != "number" { 7 | @return false; 8 | } 9 | } 10 | 11 | @return true; 12 | } 13 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_is-length.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid length 2 | 3 | @function is-length($value) { 4 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == 'calc' 5 | or index(auto inherit initial 0, $value) 6 | or (type-of($value) == "number" and not(unitless($value)))); 7 | } 8 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_is-size.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid size 2 | 3 | @function is-size($value) { 4 | @return is-length($value) 5 | or contains("fill" "fit-content" "min-content" "max-content", $value); 6 | } 7 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | $modular-scale-ratio: $perfect-fourth !default; 21 | $modular-scale-base: em($em-base) !default; 22 | 23 | @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { 24 | $v1: nth($value, 1); 25 | $v2: nth($value, length($value)); 26 | $value: $v1; 27 | 28 | // scale $v2 to just above $v1 29 | @while $v2 > $v1 { 30 | $v2: ($v2 / $ratio); // will be off-by-1 31 | } 32 | @while $v2 < $v1 { 33 | $v2: ($v2 * $ratio); // will fix off-by-1 34 | } 35 | 36 | // check AFTER scaling $v2 to prevent double-counting corner-case 37 | $double-stranded: $v2 > $v1; 38 | 39 | @if $increment > 0 { 40 | @for $i from 1 through $increment { 41 | @if $double-stranded and ($v1 * $ratio) > $v2 { 42 | $value: $v2; 43 | $v2: ($v2 * $ratio); 44 | } @else { 45 | $v1: ($v1 * $ratio); 46 | $value: $v1; 47 | } 48 | } 49 | } 50 | 51 | @if $increment < 0 { 52 | // adjust $v2 to just below $v1 53 | @if $double-stranded { 54 | $v2: ($v2 / $ratio); 55 | } 56 | 57 | @for $i from $increment through -1 { 58 | @if $double-stranded and ($v1 / $ratio) < $v2 { 59 | $value: $v2; 60 | $v2: ($v2 / $ratio); 61 | } @else { 62 | $v1: ($v1 / $ratio); 63 | $value: $v1; 64 | } 65 | } 66 | } 67 | 68 | @return $value; 69 | } 70 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /external/styles/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | // Used for creating the source string for fonts using @font-face 2 | // Reference: http://goo.gl/Ru1bKP 3 | 4 | @function font-url-prefixer($asset-pipeline) { 5 | @if $asset-pipeline == true { 6 | @return font-url; 7 | } @else { 8 | @return url; 9 | } 10 | } 11 | 12 | @function font-source-declaration( 13 | $font-family, 14 | $file-path, 15 | $asset-pipeline, 16 | $file-formats, 17 | $font-url) { 18 | 19 | $src: null; 20 | 21 | $formats-map: ( 22 | eot: $font-url + "(\"#{$file-path}.eot?#iefix\")" format("embedded-opentype"), 23 | woff2: $font-url + "(\"#{$file-path}.woff2\")" format("woff2"), 24 | woff: $font-url + "(\"#{$file-path}.woff\")" format("woff"), 25 | ttf: $font-url + "(\"#{$file-path}.ttf\")" format("truetype"), 26 | svg: $font-url + "(\"#{$file-path}.svg##{$font-family}\")" format("svg") 27 | ); 28 | 29 | @each $format, $file-path in $formats-map { 30 | @if contains($file-formats, $format) { 31 | $src: append($src, $file-path, comma); 32 | } 33 | } 34 | 35 | @return $src; 36 | } 37 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid number 2 | 3 | @function _is-num($value) { 4 | @return contains('0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9, $value); 5 | } 6 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: null; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /external/styles/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /external/styles/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | $asset-pipeline: false !default; 2 | -------------------------------------------------------------------------------- /external/styles/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /external/styles/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /external/styles/neat/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | @import "functions/private"; 3 | @import "functions/new-breakpoint"; 4 | 5 | // Settings 6 | @import "settings/grid"; 7 | @import "settings/visual-grid"; 8 | @import "settings/disable-warnings"; 9 | -------------------------------------------------------------------------------- /external/styles/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Neat 1.7.1 2 | // http://neat.bourbon.io 3 | // Copyright 2012-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Helpers 7 | @import "neat-helpers"; 8 | 9 | // Grid 10 | @import "grid/private"; 11 | @import "grid/box-sizing"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | @import "grid/display-context"; 23 | @import "grid/direction-context"; 24 | -------------------------------------------------------------------------------- /external/styles/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values. Each `$feature` should have a corresponding `$value`. 7 | /// 8 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 9 | /// 10 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 11 | /// 12 | /// @param {Number (unitless)} $total-columns ($grid-columns) 13 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 14 | /// 15 | /// @example scss - Usage 16 | /// $mobile: new-breakpoint(max-width 480px 4); 17 | /// 18 | /// .element { 19 | /// @include media($mobile) { 20 | /// @include span-columns(4); 21 | /// } 22 | /// } 23 | /// 24 | /// @example css - CSS Output 25 | /// @media screen and (max-width: 480px) { 26 | /// .element { 27 | /// display: block; 28 | /// float: left; 29 | /// margin-right: 7.42297%; 30 | /// width: 100%; 31 | /// } 32 | /// .element:last-child { 33 | /// margin-right: 0; 34 | /// } 35 | /// } 36 | 37 | @function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { 38 | @if length($query) == 1 { 39 | $query: $default-feature nth($query, 1) $total-columns; 40 | } @else if is-even(length($query)) { 41 | $query: append($query, $total-columns); 42 | } 43 | 44 | @if is-not(belongs-to($query, $visual-grid-breakpoints)) { 45 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 46 | } 47 | 48 | @return $query; 49 | } 50 | -------------------------------------------------------------------------------- /external/styles/neat/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Not function for Libsass compatibility 2 | // https://github.com/sass/libsass/issues/368 3 | @function is-not($value) { 4 | @return if($value, false, true); 5 | } 6 | 7 | // Checks if a number is even 8 | @function is-even($int) { 9 | @return $int % 2 == 0; 10 | } 11 | 12 | // Checks if an element belongs to a list or not 13 | @function belongs-to($tested-item, $list) { 14 | @return is-not(not-belongs-to($tested-item, $list)); 15 | } 16 | 17 | @function not-belongs-to($tested-item, $list) { 18 | @return is-not(index($list, $tested-item)); 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @return belongs-to(table, $query) 24 | or belongs-to(block, $query) 25 | or belongs-to(inline-block, $query) 26 | or belongs-to(inline, $query); 27 | } 28 | 29 | // Parses the first argument of span-columns() 30 | @function container-span($span: $span) { 31 | @if length($span) == 3 { 32 | $container-columns: nth($span, 3); 33 | @return $container-columns; 34 | } @else if length($span) == 2 { 35 | $container-columns: nth($span, 2); 36 | @return $container-columns; 37 | } 38 | 39 | @return $grid-columns; 40 | } 41 | 42 | @function container-shift($shift: $shift) { 43 | $parent-columns: $grid-columns !default !global; 44 | 45 | @if length($shift) == 3 { 46 | $container-columns: nth($shift, 3); 47 | @return $container-columns; 48 | } @else if length($shift) == 2 { 49 | $container-columns: nth($shift, 2); 50 | @return $container-columns; 51 | } 52 | 53 | @return $parent-columns; 54 | } 55 | 56 | // Generates a striped background 57 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 58 | $transparent: transparent; 59 | 60 | $column-width: flex-grid(1, $grid-columns); 61 | $gutter-width: flex-gutter($grid-columns); 62 | $column-offset: $column-width; 63 | 64 | $values: ($transparent 0, $color 0); 65 | 66 | @for $i from 1 to $grid-columns*2 { 67 | @if is-even($i) { 68 | $values: append($values, $transparent $column-offset, comma); 69 | $values: append($values, $color $column-offset, comma); 70 | $column-offset: $column-offset + $column-width; 71 | } @else { 72 | $values: append($values, $color $column-offset, comma); 73 | $values: append($values, $transparent $column-offset, comma); 74 | $column-offset: $column-offset + $gutter-width; 75 | } 76 | } 77 | 78 | @return $values; 79 | } 80 | 81 | // Layout direction 82 | @function get-direction($layout, $default) { 83 | $direction: null; 84 | 85 | @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { 86 | $direction: direction-from-layout($layout); 87 | } @else { 88 | $direction: direction-from-layout($default); 89 | } 90 | 91 | @return $direction; 92 | } 93 | 94 | @function direction-from-layout($layout) { 95 | $direction: null; 96 | 97 | @if to-upper-case($layout) == "LTR" { 98 | $direction: right; 99 | } @else { 100 | $direction: left; 101 | } 102 | 103 | @return $direction; 104 | } 105 | 106 | @function get-opposite-direction($direction) { 107 | $opposite-direction: left; 108 | 109 | @if $direction == "left" { 110 | $opposite-direction: right; 111 | } 112 | 113 | @return $opposite-direction; 114 | } 115 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @if $border-box-sizing == true { 4 | html { // http://bit.ly/1qk2tVR 5 | @include box-sizing(border-box); 6 | } 7 | 8 | * { 9 | &, 10 | &:before, 11 | &:after { 12 | @include box-sizing(inherit); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_direction-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the direction property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $direction (left-to-right) 6 | /// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. 7 | /// 8 | /// @example scss - Usage 9 | /// @include direction-context(right-to-left) { 10 | /// .right-to-left-block { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .right-to-left-block { 17 | /// float: right; 18 | /// ... 19 | /// } 20 | 21 | @mixin direction-context($direction: left-to-right) { 22 | $scope-direction: $layout-direction; 23 | 24 | @if to-lower-case($direction) == "left-to-right" { 25 | $layout-direction: LTR !global; 26 | } @else if to-lower-case($direction) == "right-to-left" { 27 | $layout-direction: RTL !global; 28 | } 29 | 30 | @content; 31 | 32 | $layout-direction: $scope-direction !global; 33 | } 34 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_display-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the display property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $display (block) 6 | /// Display value to be used within the block. Can be `table` or `block`. 7 | /// 8 | /// @example scss 9 | /// @include display-context(table) { 10 | /// .display-table { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css 16 | /// .display-table { 17 | /// display: table-cell; 18 | /// ... 19 | /// } 20 | 21 | @mixin display-context($display: block) { 22 | $scope-display: $container-display-table; 23 | $container-display-table: $display == table !global; 24 | 25 | @content; 26 | 27 | $container-display-table: $scope-display !global; 28 | } 29 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Forces the element to fill its parent container. 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include fill-parent; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// width: 100%; 13 | /// -webkit-box-sizing: border-box; 14 | /// -moz-box-sizing: border-box; 15 | /// box-sizing: border-box; 16 | /// } 17 | 18 | @mixin fill-parent() { 19 | width: 100%; 20 | 21 | @if $border-box-sizing == false { 22 | @include box-sizing(border-box); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs a media-query block with an optional grid context (the total number of columns used in the grid). 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values, where each `$feature` should have a corresponding `$value`. 7 | /// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 8 | /// 9 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 10 | /// 11 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). 12 | /// 13 | /// 14 | /// @param {Number (unitless)} $total-columns ($grid-columns) 15 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 16 | /// 17 | /// @example scss - Usage 18 | /// .responsive-element { 19 | /// @include media(769px) { 20 | /// @include span-columns(6); 21 | /// } 22 | /// } 23 | /// 24 | /// .new-context-element { 25 | /// @include media(min-width 320px max-width 480px, 6) { 26 | /// @include span-columns(6); 27 | /// } 28 | /// } 29 | /// 30 | /// @example css - CSS Output 31 | /// @media screen and (min-width: 769px) { 32 | /// .responsive-element { 33 | /// display: block; 34 | /// float: left; 35 | /// margin-right: 2.35765%; 36 | /// width: 48.82117%; 37 | /// } 38 | /// 39 | /// .responsive-element:last-child { 40 | /// margin-right: 0; 41 | /// } 42 | /// } 43 | /// 44 | /// @media screen and (min-width: 320px) and (max-width: 480px) { 45 | /// .new-context-element { 46 | /// display: block; 47 | /// float: left; 48 | /// margin-right: 4.82916%; 49 | /// width: 100%; 50 | /// } 51 | /// 52 | /// .new-context-element:last-child { 53 | /// margin-right: 0; 54 | /// } 55 | /// } 56 | 57 | @mixin media($query: $feature $value $columns, $total-columns: $grid-columns) { 58 | @if length($query) == 1 { 59 | @media screen and ($default-feature: nth($query, 1)) { 60 | $default-grid-columns: $grid-columns; 61 | $grid-columns: $total-columns !global; 62 | @content; 63 | $grid-columns: $default-grid-columns !global; 64 | } 65 | } @else { 66 | $loop-to: length($query); 67 | $media-query: "screen and "; 68 | $default-grid-columns: $grid-columns; 69 | $grid-columns: $total-columns !global; 70 | 71 | @if is-not(is-even(length($query))) { 72 | $grid-columns: nth($query, $loop-to) !global; 73 | $loop-to: $loop-to - 1; 74 | } 75 | 76 | $i: 1; 77 | @while $i <= $loop-to { 78 | $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") "; 79 | 80 | @if ($i + 1) != $loop-to { 81 | $media-query: $media-query + "and "; 82 | } 83 | 84 | $i: $i + 2; 85 | } 86 | 87 | @media #{$media-query} { 88 | @content; 89 | $grid-columns: $default-grid-columns !global; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. 4 | /// 5 | /// @param {List} $query (block) 6 | /// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). 7 | /// 8 | /// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. 9 | /// 10 | /// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead. 11 | /// 12 | /// @example scss - Usage 13 | /// .element { 14 | /// @include omega; 15 | /// } 16 | /// 17 | /// .nth-element { 18 | /// @include omega(4n); 19 | /// } 20 | /// 21 | /// @example css - CSS Output 22 | /// .element { 23 | /// margin-right: 0; 24 | /// } 25 | /// 26 | /// .nth-element:nth-child(4n) { 27 | /// margin-right: 0; 28 | /// } 29 | /// 30 | /// .nth-element:nth-child(4n+1) { 31 | /// clear: left; 32 | /// } 33 | 34 | @mixin omega($query: block, $direction: default) { 35 | $table: belongs-to(table, $query); 36 | $auto: belongs-to(auto, $query); 37 | 38 | @if $direction != default { 39 | @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); 40 | } @else { 41 | $direction: get-direction($layout-direction, $default-layout-direction); 42 | } 43 | 44 | @if $table { 45 | @include -neat-warn("The omega mixin no longer removes padding in table layouts."); 46 | } 47 | 48 | @if length($query) == 1 { 49 | @if $auto { 50 | &:last-child { 51 | margin-#{$direction}: 0; 52 | } 53 | } 54 | 55 | @else if contains-display-value($query) and $table == false { 56 | margin-#{$direction}: 0; 57 | } 58 | 59 | @else { 60 | @include nth-child($query, $direction); 61 | } 62 | } @else if length($query) == 2 { 63 | @if $auto { 64 | &:last-child { 65 | margin-#{$direction}: 0; 66 | } 67 | } @else { 68 | @include nth-child(nth($query, 1), $direction); 69 | } 70 | } @else { 71 | @include -neat-warn("Too many arguments passed to the omega() mixin."); 72 | } 73 | } 74 | 75 | @mixin nth-child($query, $direction) { 76 | $opposite-direction: get-opposite-direction($direction); 77 | 78 | &:nth-child(#{$query}) { 79 | margin-#{$direction}: 0; 80 | } 81 | 82 | @if type-of($query) == number and unit($query) == "n" { 83 | &:nth-child(#{$query}+1) { 84 | clear: $opposite-direction; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`. 4 | /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. 5 | /// 6 | /// @param {Number (unit)} $local-max-width ($max-width) 7 | /// Max width to be applied to the element. Can be a percentage or a measure. 8 | /// 9 | /// @example scss - Usage 10 | /// .element { 11 | /// @include outer-container(100%); 12 | /// } 13 | /// 14 | /// @example css - CSS Output 15 | /// .element { 16 | /// *zoom: 1; 17 | /// max-width: 100%; 18 | /// margin-left: auto; 19 | /// margin-right: auto; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin outer-container($local-max-width: $max-width) { 32 | @include clearfix; 33 | max-width: $local-max-width; 34 | margin: { 35 | left: auto; 36 | right: auto; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Adds padding to the element. 4 | /// 5 | /// @param {List} $padding (flex-gutter()) 6 | /// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include pad(30px -20px 10px default); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding: 30px -20px 10px 2.35765%; 16 | /// } 17 | 18 | @mixin pad($padding: flex-gutter()) { 19 | $padding-list: null; 20 | @each $value in $padding { 21 | $value: if($value == 'default', flex-gutter(), $value); 22 | $padding-list: join($padding-list, $value); 23 | } 24 | padding: $padding-list; 25 | } 26 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: LTR !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | @return $container-is-display-table == true or $display == table; 35 | } 36 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. 4 | /// 5 | /// @param {String} $display (default) 6 | /// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. 7 | /// 8 | /// @param {String} $direction ($default-layout-direction) 9 | /// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include row(); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// *zoom: 1; 19 | /// display: block; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin row($display: default, $direction: $default-layout-direction) { 32 | @if $direction != $default-layout-direction { 33 | @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); 34 | } 35 | 36 | $layout-direction: $direction !global; 37 | 38 | @if $display != default { 39 | @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); 40 | } 41 | 42 | @if $display == table { 43 | display: table; 44 | @include fill-parent; 45 | table-layout: fixed; 46 | $container-display-table: true !global; 47 | } @else { 48 | @include clearfix; 49 | display: block; 50 | $container-display-table: false !global; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. 4 | /// 5 | /// @param {Number (unitless)} $n-columns (1) 6 | /// Number of columns by which the element shifts. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include shift(-3); 11 | /// } 12 | /// 13 | /// @example css - CSS output 14 | /// .element { 15 | /// margin-left: -25.58941%; 16 | /// } 17 | 18 | @mixin shift($n-columns: 1) { 19 | @include shift-in-context($n-columns); 20 | } 21 | 22 | /// Translates an element horizontally by a number of columns, in a specific nesting context. 23 | /// 24 | /// @param {List} $shift 25 | /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). 26 | /// 27 | /// The two values can be separated with any string such as `of`, `/`, etc. 28 | /// 29 | /// @example scss - Usage 30 | /// .element { 31 | /// @include shift(-3 of 6); 32 | /// } 33 | /// 34 | /// @example css - CSS output 35 | /// .element { 36 | /// margin-left: -52.41458%; 37 | /// } 38 | 39 | @mixin shift-in-context($shift: $columns of $container-columns) { 40 | $n-columns: nth($shift, 1); 41 | $parent-columns: container-shift($shift) !global; 42 | 43 | $direction: get-direction($layout-direction, $default-layout-direction); 44 | $opposite-direction: get-opposite-direction($direction); 45 | 46 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 47 | 48 | // Reset nesting context 49 | $parent-columns: $grid-columns !global; 50 | } 51 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. 4 | /// 5 | /// @param {List} $span 6 | /// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). 7 | /// 8 | /// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. 9 | /// 10 | /// The values can be separated with any string such as `of`, `/`, etc. 11 | /// 12 | /// @param {String} $display (block) 13 | /// Sets the display property of the element. By default it sets the display propert of the element to `block`. 14 | /// 15 | /// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. 16 | /// 17 | /// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. 18 | /// 19 | /// @example scss - Usage 20 | /// .element { 21 | /// @include span-columns(6); 22 | /// 23 | /// .nested-element { 24 | /// @include span-columns(2 of 6); 25 | /// } 26 | /// } 27 | /// 28 | /// @example css - CSS Output 29 | /// .element { 30 | /// display: block; 31 | /// float: left; 32 | /// margin-right: 2.35765%; 33 | /// width: 48.82117%; 34 | /// } 35 | /// 36 | /// .element:last-child { 37 | /// margin-right: 0; 38 | /// } 39 | /// 40 | /// .element .nested-element { 41 | /// display: block; 42 | /// float: left; 43 | /// margin-right: 4.82916%; 44 | /// width: 30.11389%; 45 | /// } 46 | /// 47 | /// .element .nested-element:last-child { 48 | /// margin-right: 0; 49 | /// } 50 | 51 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 52 | $columns: nth($span, 1); 53 | $container-columns: container-span($span); 54 | 55 | $parent-columns: get-parent-columns($container-columns) !global; 56 | 57 | $direction: get-direction($layout-direction, $default-layout-direction); 58 | $opposite-direction: get-opposite-direction($direction); 59 | 60 | $display-table: is-display-table($container-display-table, $display); 61 | 62 | @if $display-table { 63 | display: table-cell; 64 | width: percentage($columns / $container-columns); 65 | } @else { 66 | float: #{$opposite-direction}; 67 | 68 | @if $display != no-display { 69 | display: block; 70 | } 71 | 72 | @if $display == collapse { 73 | @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); 74 | } 75 | 76 | @if $display == collapse or $display == block-collapse { 77 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 78 | 79 | &:last-child { 80 | width: flex-grid($columns, $container-columns); 81 | } 82 | 83 | } @else { 84 | margin-#{$direction}: flex-gutter($container-columns); 85 | width: flex-grid($columns, $container-columns); 86 | 87 | &:last-child { 88 | margin-#{$direction}: 0; 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_to-deprecate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 4 | @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."); 5 | 6 | @if length($query) == 1 { 7 | @media screen and ($default-feature: nth($query, 1)) { 8 | $default-grid-columns: $grid-columns; 9 | $grid-columns: $total-columns; 10 | @content; 11 | $grid-columns: $default-grid-columns; 12 | } 13 | } @else if length($query) == 2 { 14 | @media screen and (nth($query, 1): nth($query, 2)) { 15 | $default-grid-columns: $grid-columns; 16 | $grid-columns: $total-columns; 17 | @content; 18 | $grid-columns: $default-grid-columns; 19 | } 20 | } @else if length($query) == 3 { 21 | @media screen and (nth($query, 1): nth($query, 2)) { 22 | $default-grid-columns: $grid-columns; 23 | $grid-columns: nth($query, 3); 24 | @content; 25 | $grid-columns: $default-grid-columns; 26 | } 27 | } @else if length($query) == 4 { 28 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 29 | $default-grid-columns: $grid-columns; 30 | $grid-columns: $total-columns; 31 | @content; 32 | $grid-columns: $default-grid-columns; 33 | } 34 | } @else if length($query) == 5 { 35 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 36 | $default-grid-columns: $grid-columns; 37 | $grid-columns: nth($query, 5); 38 | @content; 39 | $grid-columns: $default-grid-columns; 40 | } 41 | } @else { 42 | @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details."); 43 | } 44 | } 45 | 46 | @mixin nth-omega($nth, $display: block, $direction: default) { 47 | @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead."); 48 | @include omega($nth $display, $direction); 49 | } 50 | 51 | /// Resets the active display property to `block`. Particularly useful when changing the display property in a single row. 52 | /// 53 | /// @example scss - Usage 54 | /// .element { 55 | /// @include row(table); 56 | /// // Context changed to table display 57 | /// } 58 | /// 59 | /// @include reset-display; 60 | /// // Context is reset to block display 61 | 62 | @mixin reset-display { 63 | $container-display-table: false !global; 64 | @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin."); 65 | } 66 | 67 | /// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row. 68 | /// 69 | /// @example scss - Usage 70 | /// .element { 71 | /// @include row($direction: RTL); 72 | /// // Context changed to right-to-left 73 | /// } 74 | /// 75 | /// @include reset-layout-direction; 76 | /// // Context is reset to left-to-right 77 | 78 | @mixin reset-layout-direction { 79 | $layout-direction: $default-layout-direction !global; 80 | @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin."); 81 | } 82 | 83 | /// Resets both the active layout direction and the active display property. 84 | /// 85 | /// @example scss - Usage 86 | /// .element { 87 | /// @include row(table, RTL); 88 | /// // Context changed to table table and right-to-left 89 | /// } 90 | /// 91 | /// @include reset-all; 92 | /// // Context is reset to block display and left-to-right 93 | 94 | @mixin reset-all { 95 | @include reset-display; 96 | @include reset-layout-direction; 97 | } 98 | -------------------------------------------------------------------------------- /external/styles/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin grid-column-gradient($values...) { 4 | background-image: -webkit-linear-gradient(left, $values); 5 | background-image: -moz-linear-gradient(left, $values); 6 | background-image: -ms-linear-gradient(left, $values); 7 | background-image: -o-linear-gradient(left, $values); 8 | background-image: unquote("linear-gradient(to left, #{$values})"); 9 | } 10 | 11 | @if $visual-grid == true or $visual-grid == yes { 12 | body:before { 13 | @include grid-column-gradient(gradient-stops($grid-columns)); 14 | content: ""; 15 | display: inline-block; 16 | height: 100%; 17 | left: 0; 18 | margin: 0 auto; 19 | max-width: $max-width; 20 | opacity: $visual-grid-opacity; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | width: 100%; 25 | 26 | @if $visual-grid-index == back { 27 | z-index: -1; 28 | } 29 | 30 | @else if $visual-grid-index == front { 31 | z-index: 9999; 32 | } 33 | 34 | @each $breakpoint in $visual-grid-breakpoints { 35 | @if $breakpoint { 36 | @include media($breakpoint) { 37 | @include grid-column-gradient(gradient-stops($grid-columns)); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /external/styles/neat/settings/_disable-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $disable-warnings: false !default; 8 | 9 | @mixin -neat-warn($message) { 10 | @if $disable-warnings == false { 11 | @warn "#{$message}"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /external/styles/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with a `!global` flag. 4 | /// 5 | /// @type Number (Unit) 6 | 7 | $column: golden-ratio(1em, 3) !default; 8 | 9 | /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with the `!global` flag. 10 | /// 11 | /// @type Number (Unit) 12 | 13 | $gutter: golden-ratio(1em, 1) !default; 14 | 15 | /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. 16 | /// 17 | /// @type Number (Unitless) 18 | 19 | $grid-columns: 12 !default; 20 | 21 | /// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag. 22 | /// 23 | /// @type Number (Unit) 24 | /// 25 | $max-width: em(1088) !default; 26 | 27 | /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. 28 | /// 29 | /// @type Bool 30 | /// 31 | /// @example css - CSS Output 32 | /// html { 33 | /// -webkit-box-sizing: border-box; 34 | /// -moz-box-sizing: border-box; 35 | /// box-sizing: border-box; } 36 | /// 37 | /// *, *:before, *:after { 38 | /// -webkit-box-sizing: inherit; 39 | /// -moz-box-sizing: inherit; 40 | /// box-sizing: inherit; 41 | /// } 42 | 43 | $border-box-sizing: true !default; 44 | 45 | /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. 46 | /// 47 | /// @type String 48 | 49 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 50 | 51 | ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. 52 | /// 53 | ///@type String 54 | 55 | $default-layout-direction: LTR !default; 56 | -------------------------------------------------------------------------------- /external/styles/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $visual-grid: false !default; 8 | 9 | /// Sets the visual grid color. Set with `!global` flag. 10 | /// 11 | /// @type Color 12 | 13 | $visual-grid-color: #eee !default; 14 | 15 | /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. 16 | /// 17 | /// @type String 18 | 19 | $visual-grid-index: back !default; 20 | 21 | /// Sets the opacity property of the visual grid. Set with `!global` flag. 22 | /// 23 | /// @type Number (unitless) 24 | 25 | $visual-grid-opacity: 0.4 !default; 26 | 27 | $visual-grid-breakpoints: () !default; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ContentTools", 3 | "description": "A JS library for building WYSIWYG editors for HTML content", 4 | "version": "1.6.16", 5 | "keywords": [ 6 | "wysiwyg", 7 | "inline", 8 | "html", 9 | "editor" 10 | ], 11 | "author": { 12 | "name": "Anthony Blackshaw", 13 | "email": "ant@getme.co.uk", 14 | "url": "https://github.com/anthonyjb" 15 | }, 16 | "main": "build/content-tools.js", 17 | "devDependencies": { 18 | "es6-promise": "^3.2.1", 19 | "es6-require": "^0.2.1", 20 | "grunt": "~0.4.5", 21 | "grunt-contrib-clean": "^0.6.0", 22 | "grunt-contrib-coffee": "^0.11.1", 23 | "grunt-contrib-concat": "^0.5.0", 24 | "grunt-contrib-jasmine": "^0.9.2", 25 | "grunt-contrib-sass": "^0.8.1", 26 | "grunt-contrib-uglify": "^0.7.0", 27 | "grunt-contrib-watch": "^0.6.1", 28 | "grunt-cssnano": "^2.1.0" 29 | }, 30 | "scripts": { 31 | "test": "grunt jasmine --verbose" 32 | }, 33 | "repository": { 34 | "type": "git", 35 | "url": "https://github.com/GetmeUK/ContentTools.git" 36 | }, 37 | "dependencies": { 38 | "sass": "^1.25.1-test.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /sandbox/author-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/sandbox/author-pic.jpg -------------------------------------------------------------------------------- /sandbox/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/sandbox/image.png -------------------------------------------------------------------------------- /spec/spec-helper.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | 4 | }).call(this); 5 | -------------------------------------------------------------------------------- /src/sandbox/image-uploader.coffee: -------------------------------------------------------------------------------- 1 | class ImageUploader 2 | # A dummy image uploader to allow the image dialog to be tested in the 3 | # sandbox environment. 4 | 5 | @imagePath: 'image.png' 6 | @imageSize: [600, 174] 7 | 8 | constructor: (dialog) -> 9 | # Initialize the dialog to support image uploads 10 | 11 | @_dialog = dialog 12 | 13 | # Listen to key events from the dialog and assign handlers to each 14 | @_dialog.addEventListener 'cancel', () => 15 | @_onCancel() 16 | 17 | @_dialog.addEventListener 'imageuploader.cancelupload', () => 18 | @_onCancelUpload() 19 | 20 | @_dialog.addEventListener 'imageuploader.clear', () => 21 | @_onClear() 22 | 23 | @_dialog.addEventListener 'imageuploader.fileready', (ev) => 24 | @_onFileReady(ev.detail().file) 25 | 26 | @_dialog.addEventListener 'imageuploader.mount', () => 27 | @_onMount() 28 | 29 | @_dialog.addEventListener 'imageuploader.rotateccw', () => 30 | @_onRotateCCW() 31 | 32 | @_dialog.addEventListener 'imageuploader.rotatecw', () => 33 | @_onRotateCW() 34 | 35 | @_dialog.addEventListener 'imageuploader.save', () => 36 | @_onSave() 37 | 38 | @_dialog.addEventListener 'imageuploader.unmount', () => 39 | @_onUnmount() 40 | 41 | # Event handlers 42 | 43 | _onCancel: () -> 44 | # Handle the user cancelling the dialog 45 | 46 | _onCancelUpload: () -> 47 | # Handle an upload being cancelled 48 | 49 | # Stop the upload 50 | clearTimeout(@_uploadingTimeout) 51 | 52 | # Set the dialog to empty 53 | @_dialog.state('empty') 54 | 55 | _onClear: () -> 56 | # Handle the current image being cleared 57 | @_dialog.clear() 58 | 59 | _onFileReady: (file) -> 60 | # Handle a file being selected by the user 61 | console.log file 62 | 63 | # Set the dialog state to uploading 64 | @_dialog.progress(0) 65 | @_dialog.state('uploading') 66 | 67 | # Simulate uploading the specified file 68 | upload = () => 69 | progress = @_dialog.progress() 70 | progress += 1 71 | 72 | if progress <= 100 73 | @_dialog.progress(progress) 74 | @_uploadingTimeout = setTimeout(upload, 25) 75 | else 76 | @_dialog.populate( 77 | ImageUploader.imagePath, 78 | ImageUploader.imageSize 79 | ) 80 | 81 | @_uploadingTimeout = setTimeout(upload, 25) 82 | 83 | _onMount: () -> 84 | # Handle the dialog being mounted on the UI 85 | 86 | _onRotateCCW: () -> 87 | # Handle a request by the user to rotate the image counter-clockwise 88 | 89 | # Simulate rotating the image 90 | @_dialog.busy(true) 91 | clearBusy = () => 92 | @_dialog.busy(false) 93 | setTimeout(clearBusy, 1500) 94 | 95 | _onRotateCW: () -> 96 | # Handle a request by the user to rotate the image clockwise 97 | 98 | # Simulate rotating the image 99 | @_dialog.busy(true) 100 | clearBusy = () => 101 | @_dialog.busy(false) 102 | setTimeout(clearBusy, 1500) 103 | 104 | _onSave: () -> 105 | # Handle the user saving the image 106 | 107 | # Simulate processing the image 108 | @_dialog.busy(true) 109 | clearBusy = () => 110 | @_dialog.busy(false) 111 | @_dialog.save( 112 | ImageUploader.imagePath, 113 | ImageUploader.imageSize 114 | {alt: 'Example of bad variable names'} 115 | ) 116 | 117 | setTimeout(clearBusy, 1500) 118 | 119 | _onUnmount: () -> 120 | # Handle the dialog being unmounted from the UI 121 | 122 | # Class methods 123 | 124 | @createImageUploader: (dialog) -> 125 | return new ImageUploader(dialog) 126 | 127 | window.ImageUploader = ImageUploader -------------------------------------------------------------------------------- /src/sandbox/sandbox.coffee: -------------------------------------------------------------------------------- 1 | window.onload = () -> 2 | 3 | ContentTools.IMAGE_UPLOADER = ImageUploader.createImageUploader 4 | 5 | # Uncomment the following lines to use the cloudinary image uploader 6 | #CloudinaryImageUploader.CLOUD_NAME = '' 7 | #CloudinaryImageUploader.UPLOAD_PRESET = '' 8 | #ContentTools.IMAGE_UPLOADER = (dialog) -> 9 | # return CloudinaryImageUploader.createImageUploader(dialog) 10 | 11 | # Build a palette of styles 12 | ContentTools.StylePalette.add([ 13 | new ContentTools.Style('By-line', 'article__by-line', ['p']), 14 | new ContentTools.Style('Caption', 'article__caption', ['p']), 15 | new ContentTools.Style('Example', 'example', ['pre']), 16 | new ContentTools.Style('Example + Good', 'example--good', ['pre']), 17 | new ContentTools.Style('Example + Bad', 'example--bad', ['pre']) 18 | ]) 19 | 20 | editor = ContentTools.EditorApp.get() 21 | editor.init('[data-editable], [data-fixture]', 'data-name') 22 | 23 | editor.addEventListener 'saved', (ev) -> 24 | 25 | # Handle the page being saved 26 | console.log ev.detail().regions 27 | 28 | if Object.keys(ev.detail().regions).length == 0 29 | return 30 | 31 | # Mark the ignition as busy while we save the page 32 | editor.busy(true) 33 | 34 | # Simulate saving the page 35 | saved = () => 36 | # Save has completed set the app as no longer busy 37 | editor.busy(false) 38 | 39 | # Trigger a flash to indicate the save has been successful 40 | new ContentTools.FlashUI('ok') 41 | 42 | setTimeout(saved, 2000) 43 | 44 | # Handle tools available to fixtures 45 | FIXTURE_TOOLS = [['undo', 'redo', 'remove']] 46 | IMAGE_FIXTURE_TOOLS = [['undo', 'redo', 'image']] 47 | LINK_FIXTURE_TOOLS = [['undo', 'redo', 'link']] 48 | ContentEdit.Root.get().bind 'focus', (element) -> 49 | # Determine what tools should be available to the user 50 | if element.isFixed() 51 | if element.type() is 'ImageFixture' 52 | tools = IMAGE_FIXTURE_TOOLS 53 | else if element.tagName() == 'a' 54 | tools = LINK_FIXTURE_TOOLS 55 | else 56 | tools = FIXTURE_TOOLS 57 | else 58 | tools = ContentTools.DEFAULT_TOOLS 59 | 60 | # If the tools have changed update the toolboox 61 | if editor.toolbox().tools() != tools 62 | editor.toolbox().tools(tools) 63 | 64 | # Translation example 65 | # req = new XMLHttpRequest() 66 | # req.overrideMimeType('application/json') 67 | # req.open( 68 | # 'GET', 69 | # 'https://raw.githubusercontent.com/GetmeUK/ContentTools/master/translations/lp.json', 70 | # true 71 | # ) 72 | # req.onreadystatechange = (ev) -> 73 | # if ev.target.readyState == 4 74 | # translations = JSON.parse(ev.target.responseText) 75 | # ContentEdit.addTranslations('lp', translations) 76 | # ContentEdit.LANGUAGE = 'lp' 77 | 78 | # Uncomment the following line to use the editor with pig latin translation 79 | #req.send(null) 80 | -------------------------------------------------------------------------------- /src/scripts/styles.coffee: -------------------------------------------------------------------------------- 1 | class ContentTools.StylePalette 2 | 3 | # The `StylesPalette` class stores a list of styles available to the content 4 | # editor application. A list of styles is usually defined and added to the 5 | # palette as part of initializing the application. 6 | 7 | @_styles = [] 8 | 9 | # Class methods 10 | 11 | @add: (styles) -> 12 | # Add a list of styles to the palette 13 | @_styles = @_styles.concat(styles) 14 | 15 | @styles: (element) -> 16 | # If no element is specified return a copy of the stlyes list 17 | if element is undefined 18 | return @_styles.slice() 19 | 20 | # Return the styles (optional only those applicable for the specified 21 | # tag name). 22 | tagName = element.tagName() 23 | 24 | # Filter the styles 25 | return @_styles.filter (style) -> 26 | if not style._applicableTo 27 | return true 28 | 29 | return style._applicableTo.indexOf(tagName) != -1 30 | 31 | 32 | class ContentTools.Style 33 | 34 | # The `Style` class is used to define styles (CSS classes) for use in the 35 | # editor. 36 | 37 | constructor: (name, cssClass, applicableTo) -> 38 | 39 | # A user friendly name 40 | @_name = name 41 | 42 | # The CSS class name 43 | @_cssClass = cssClass 44 | 45 | # The `applicableTo` value by default will contain a list of class names 46 | # the style can be applied to however if the `StylePalette.styles` 47 | # method is overridden then the value of applicable to maybe any 48 | # construct required to support the overridden styles method. 49 | if applicableTo 50 | @_applicableTo = applicableTo 51 | else 52 | @_applicableTo = null 53 | 54 | # Read-only properties 55 | 56 | applicableTo: () -> 57 | # Return the tag names this style is applicable to, no value means the 58 | # style is applicable to any tag. 59 | return @_applicableTo 60 | 61 | cssClass: () -> 62 | # Return the CSS class name for the style 63 | return @_cssClass 64 | 65 | name: () -> 66 | # Return the name of the style 67 | return @_name -------------------------------------------------------------------------------- /src/scripts/ui/events.coffee: -------------------------------------------------------------------------------- 1 | class ContentTools.Event 2 | 3 | # The `Event` class provides information about events dispatched by 4 | # `UIComponents`. 5 | 6 | constructor: (name, detail) -> 7 | 8 | # The name of the event 9 | @_name = name 10 | 11 | # Detail of the event (typically an object but can actually be set to 12 | # any value). 13 | @_detail = detail 14 | 15 | # The date/time the event was created 16 | @_timeStamp = Date.now() 17 | 18 | # A flag indicating if the event has been cancelled 19 | @_defaultPrevented = false 20 | 21 | # A flag indicating if the execution of additional callbacks for the 22 | # event has been halted. 23 | @_propagationStopped = false 24 | 25 | # Read-only properties 26 | 27 | defaultPrevented: () -> 28 | # Return true if the event has been cancelled 29 | return @_defaultPrevented 30 | 31 | detail: () -> 32 | # Return the detail of the event 33 | return @_detail 34 | 35 | name: () -> 36 | # Return the name of the event 37 | return @_name 38 | 39 | propagationStopped: () -> 40 | # Return true if the event has been halted 41 | return @_propagationStopped 42 | 43 | timeStamp: () -> 44 | # Return a time stamp of when the event was created 45 | return @_timeStamp 46 | 47 | # Methods 48 | 49 | preventDefault: () -> 50 | # Cancel the event preventing the default event action 51 | @_defaultPrevented = true 52 | 53 | stopImmediatePropagation: () -> 54 | # Halt the event preventing any bound listener functions that have not 55 | # yet been called for the event being called. 56 | @_propagationStopped = true -------------------------------------------------------------------------------- /src/scripts/ui/flashes.coffee: -------------------------------------------------------------------------------- 1 | class ContentTools.FlashUI extends ContentTools.AnchoredComponentUI 2 | 3 | # A flash is a visual indicator displayed typically once a task has been 4 | # completed, for example it might show that a save has been successful (or 5 | # failed). 6 | # 7 | # Flashes are short lived instances, they display as soon as mounted and are 8 | # unmount as soon as they're animation has finished. As such references to 9 | # flash instances should not be stored, e.g: 10 | # 11 | # new ContentTools.FlashUI('ok') 12 | 13 | constructor: (modifier) -> 14 | super() 15 | @mount(modifier) 16 | 17 | # Methods 18 | 19 | mount: (modifier) -> 20 | # Mount the flash to the interface, the specified modifier will be 21 | # applied as a CSS modifier class to change the icon displayed in the 22 | # flash. 23 | 24 | # Create the flash 25 | @_domElement = @constructor.createDiv([ 26 | 'ct-flash', 27 | 'ct-flash--active', 28 | "ct-flash--#{ modifier }", 29 | 'ct-widget', 30 | 'ct-widget--active', 31 | ]) 32 | 33 | # Anchor it to the app 34 | super(ContentTools.EditorApp.get().domElement()) 35 | 36 | # Monitor for when the element is no long visible, at which point we can 37 | # remove it. 38 | monitorForHidden = () => 39 | 40 | # If there's no support for `getComputedStyle` then we fallback to 41 | # unmounting the widget immediately. 42 | unless window.getComputedStyle 43 | @unmount() 44 | return 45 | 46 | # If the widget is now hidden we unmount it 47 | if parseFloat(window.getComputedStyle(@_domElement).opacity) < 0.01 48 | @unmount() 49 | else 50 | setTimeout(monitorForHidden, 250) 51 | 52 | setTimeout(monitorForHidden, 250) -------------------------------------------------------------------------------- /src/scripts/ui/modal.coffee: -------------------------------------------------------------------------------- 1 | class ContentTools.ModalUI extends ContentTools.WidgetUI 2 | 3 | # The modal UI component provides an element over the page. The modal layer 4 | # prevents the user from interacting with the page whilst allowing them to 5 | # interact with UI components above the layer, for example a dialog. 6 | 7 | constructor: (transparent, allowScrolling) -> 8 | super() 9 | 10 | # If true the modal we be displayed completely transparently. This can 11 | # be useful when displaying an UI component above the page that is 12 | # close if the user clicks away from it, for example the add link 13 | # (caption) dialog. 14 | @_transparent = transparent 15 | 16 | # If true then scrolling the page whilst the modal is open is not 17 | # disabled (the default behavior is to disable scrolling when a modal is 18 | # overlayed over the page content). 19 | @_allowScrolling = allowScrolling 20 | 21 | # Methods 22 | 23 | mount: () -> 24 | # Mount the widget to the DOM 25 | 26 | # Modal 27 | @_domElement = @constructor.createDiv([ 28 | 'ct-widget', 29 | 'ct-modal' 30 | ]) 31 | @parent().domElement().appendChild(@_domElement) 32 | 33 | # If set to transparent add the modifier 34 | if @_transparent 35 | @addCSSClass('ct-modal--transparent') 36 | 37 | # Unless scrolling is set as allowed disable page scrolling 38 | if not @_allowScrolling 39 | ContentEdit.addCSSClass(document.body, 'ct--no-scroll') 40 | 41 | # Add interaction handlers 42 | @_addDOMEventListeners() 43 | 44 | unmount: () -> 45 | # Unmount the widget from the DOM 46 | 47 | # Allow the page to be scrolled again 48 | if not @_allowScrolling 49 | ContentEdit.removeCSSClass(document.body, 'ct--no-scroll') 50 | 51 | super() 52 | 53 | # Private methods 54 | 55 | _addDOMEventListeners: () -> 56 | # Add DOM event listeners for the widget 57 | 58 | # Trigger a custom event for clicks on the modal 59 | @_domElement.addEventListener 'click', (ev) => 60 | @dispatchEvent(@createEvent('click')) -------------------------------------------------------------------------------- /src/spec/editor.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/editor.coffee -------------------------------------------------------------------------------- /src/spec/history.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/history.coffee -------------------------------------------------------------------------------- /src/spec/namespace.coffee: -------------------------------------------------------------------------------- 1 | # Utility functions 2 | 3 | describe 'ContentTools.getEmbedVideoURL()', () -> 4 | 5 | it 'should return a valid video embbed URL from a youtube URL', () -> 6 | 7 | # Embed URL 8 | embedURL = 'https://www.youtube.com/embed/t4gjl-uwUHc' 9 | expect(ContentTools.getEmbedVideoURL(embedURL)).toBe embedURL 10 | 11 | # Share URL 12 | shareURL = 'https://youtu.be/t4gjl-uwUHc' 13 | expect(ContentTools.getEmbedVideoURL(shareURL)).toBe embedURL 14 | 15 | # Page URL 16 | pageURL = 'https://www.youtube.com/watch?v=t4gjl-uwUHc' 17 | expect(ContentTools.getEmbedVideoURL(pageURL)).toBe embedURL 18 | 19 | # Cater for HTTP (convert to HTTPS) 20 | insecureURL = 'http://www.youtube.com/watch?v=t4gjl-uwUHc' 21 | expect(ContentTools.getEmbedVideoURL(insecureURL)).toBe embedURL 22 | 23 | it 'should return a valid video embbed URL from a vimeo URL', () -> 24 | 25 | # Embed URL 26 | embedURL = 'https://player.vimeo.com/video/1084537' 27 | expect(ContentTools.getEmbedVideoURL(embedURL)).toBe embedURL 28 | 29 | # Page/Share URL 30 | pageURL = 'https://vimeo.com/1084537' 31 | expect(ContentTools.getEmbedVideoURL(pageURL)).toBe embedURL 32 | 33 | # Cater for HTTP (convert to HTTPS) 34 | insecureURL = 'http://vimeo.com/1084537' 35 | expect(ContentTools.getEmbedVideoURL(insecureURL)).toBe embedURL -------------------------------------------------------------------------------- /src/spec/styles.coffee: -------------------------------------------------------------------------------- 1 | # StylePalette 2 | 3 | describe 'ContentTools.StylePalette.add()', () -> 4 | 5 | afterEach -> 6 | ContentTools.StylePalette._styles = [] 7 | 8 | it 'should return a `ContentTools.Style` instance', () -> 9 | style = new ContentTools.Style('test', 'test', ['p']) 10 | ContentTools.StylePalette.add(style) 11 | p = new ContentEdit.Text('p', {}, 'foo') 12 | expect(ContentTools.StylePalette.styles(p)).toEqual [style] 13 | 14 | 15 | describe 'ContentTools.StylePalette.styles()', () -> 16 | 17 | afterEach -> 18 | ContentTools.StylePalette._styles = [] 19 | 20 | it 'should return a list of `ContentTools.Style` instances by tag 21 | name', () -> 22 | 23 | # Add a set of styles for by different tags 24 | test1 = new ContentTools.Style('Test 1', 'test-1', ['p']) 25 | test2 = new ContentTools.Style('Test 2', 'test-2', ['h1', 'p']) 26 | test3 = new ContentTools.Style('Test 3', 'test-3', ['h1', 'h2']) 27 | ContentTools.StylePalette.add(test1) 28 | ContentTools.StylePalette.add(test2) 29 | ContentTools.StylePalette.add(test3) 30 | 31 | p = new ContentEdit.Text('p', {}, 'foo') 32 | h1 = new ContentEdit.Text('h1', {}, 'foo') 33 | h2 = new ContentEdit.Text('h2', {}, 'foo') 34 | 35 | expect(ContentTools.StylePalette.styles(p)).toEqual [test1, test2] 36 | expect(ContentTools.StylePalette.styles(h1)).toEqual [test2, test3] 37 | expect(ContentTools.StylePalette.styles(h2)).toEqual [test3] 38 | 39 | 40 | # Styles 41 | 42 | describe 'ContentTools.Style()', () -> 43 | 44 | it 'should create `ContentTools.Style` instance', () -> 45 | style = new ContentTools.Style('Test', 'test', ['p']) 46 | expect(style instanceof ContentTools.Style).toBe true 47 | 48 | 49 | describe 'ContentTools.Style.applicableTo()', () -> 50 | 51 | it 'should return a list of tag names the style is applicable to', () -> 52 | tagNames = ['p', 'img', 'table'] 53 | style = new ContentTools.Style('Test', 'test', tagNames) 54 | expect(style.applicableTo()).toBe tagNames 55 | 56 | 57 | describe 'ContentTools.Style.cssClass()', () -> 58 | 59 | it 'should return the CSS class name for the style', () -> 60 | cssClassName = 'test' 61 | style = new ContentTools.Style('Test', cssClassName, 'p') 62 | expect(style.cssClass()).toBe cssClassName 63 | 64 | 65 | describe 'ContentTools.Style.name()', () -> 66 | 67 | it 'should return the name of the style', () -> 68 | name = 'Test' 69 | style = new ContentTools.Style(name, 'test', 'p') 70 | expect(style.name()).toBe name -------------------------------------------------------------------------------- /src/spec/ui/dialogs/image.coffee: -------------------------------------------------------------------------------- 1 | # ImageDialog 2 | 3 | describe 'ContentTools.ImageDialog', () -> 4 | 5 | div = null 6 | editor = null 7 | 8 | beforeEach -> 9 | # Create an editable region 10 | div = document.createElement('div') 11 | div.setAttribute('class', 'editable') 12 | document.body.appendChild(div) 13 | 14 | # Initialize the editor 15 | editor = ContentTools.EditorApp.get() 16 | editor.init('.editable') 17 | 18 | afterEach -> 19 | # Shutdown the editor 20 | editor.destroy() 21 | 22 | # Remove the editable region 23 | document.body.removeChild(div) 24 | 25 | 26 | describe 'ContentTools.ImageDialog()', () -> 27 | 28 | it 'should return an instance of a ImageDialog', () -> 29 | 30 | dialog = new ContentTools.ImageDialog() 31 | expect(dialog instanceof ContentTools.ImageDialog).toBe true 32 | 33 | 34 | describe 'ContentTools.ImageDialog.cropRegion()', () -> 35 | 36 | it 'should return the crop region set by the user', () -> 37 | 38 | dialog = new ContentTools.ImageDialog() 39 | editor.attach(dialog) 40 | dialog.mount() 41 | 42 | # By default this should return the entire image [0, 0, 1, 1] 43 | expect(dialog.cropRegion()).toEqual([0, 0, 1, 1]) 44 | 45 | # Populate the dialog with an image 46 | dialog._domView.style.width = '400px' 47 | dialog._domView.style.height = '400px' 48 | dialog.populate('test.png', [400, 400]) 49 | 50 | # Add some crop marks for the dialog 51 | dialog.addCropMarks() 52 | dialog._cropMarks._domHandles[1].style.left = '200px' 53 | dialog._cropMarks._domHandles[1].style.top = '200px' 54 | 55 | # By default this should return the entire image [0, 0, 1, 1] 56 | expect(dialog.cropRegion()).toEqual([0, 0, 0.5, 0.5]) 57 | 58 | #addCropMarks 59 | #clear 60 | #mount 61 | #populate 62 | #progress 63 | #removeCropMarks 64 | #save 65 | #state 66 | #unmount -------------------------------------------------------------------------------- /src/spec/ui/dialogs/link.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/ui/dialogs/link.coffee -------------------------------------------------------------------------------- /src/spec/ui/dialogs/properties.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/ui/dialogs/properties.coffee -------------------------------------------------------------------------------- /src/spec/ui/dialogs/table.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/ui/dialogs/table.coffee -------------------------------------------------------------------------------- /src/spec/ui/dialogs/video.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GetmeUK/ContentTools/650c422ceb6287604b9a86f82504690b1668bf5f/src/spec/ui/dialogs/video.coffee -------------------------------------------------------------------------------- /src/spec/ui/events.coffee: -------------------------------------------------------------------------------- 1 | # UI 2 | 3 | # Events 4 | 5 | describe 'ContentTools.Event', () -> 6 | 7 | describe 'ContentTools.Event()', () -> 8 | 9 | it 'should return an instance of an Event', () -> 10 | 11 | ev = new ContentTools.Event('test') 12 | expect(ev instanceof ContentTools.Event).toBe true 13 | 14 | 15 | describe 'ContentTools.Event.defaultPrevented()', () -> 16 | 17 | it 'should return true if the event is cancelled', () -> 18 | 19 | ev = new ContentTools.Event('test') 20 | expect(ev.defaultPrevented()).toBe false 21 | ev.preventDefault() 22 | expect(ev.defaultPrevented()).toBe true 23 | 24 | 25 | describe 'ContentTools.Event.detail()', () -> 26 | 27 | it 'should return the detail of the event', () -> 28 | 29 | ev = new ContentTools.Event('test', {foo: 1}) 30 | expect(ev.detail()).toEqual {foo: 1} 31 | 32 | 33 | describe 'ContentTools.Event.name()', () -> 34 | 35 | it 'should return the name of the event', () -> 36 | 37 | ev = new ContentTools.Event('test') 38 | expect(ev.name()).toBe 'test' 39 | 40 | 41 | describe 'ContentTools.Event.propagationStopped()', () -> 42 | 43 | it 'should return true if the event has been halted', () -> 44 | 45 | ev = new ContentTools.Event('test') 46 | expect(ev.propagationStopped()).toBe false 47 | ev.stopImmediatePropagation() 48 | expect(ev.propagationStopped()).toBe true 49 | 50 | describe 'ContentTools.Event.propagationStopped()', () -> 51 | 52 | it 'should return a timestamp of when the event was created', () -> 53 | 54 | ev = new ContentTools.Event('test') 55 | expect(ev.timeStamp()).toBeCloseTo Date.now(), 100 56 | 57 | 58 | describe 'ContentTools.Event.preventDefault()', () -> 59 | 60 | it 'should cancel an event', () -> 61 | 62 | ev = new ContentTools.Event('test') 63 | ev.preventDefault() 64 | expect(ev.defaultPrevented()).toBe true 65 | 66 | 67 | describe 'ContentTools.Event.preventDefault()', () -> 68 | 69 | it 'should halt an event', () -> 70 | 71 | ev = new ContentTools.Event('test') 72 | ev.stopImmediatePropagation() 73 | expect(ev.propagationStopped()).toBe true -------------------------------------------------------------------------------- /src/spec/ui/flashes.coffee: -------------------------------------------------------------------------------- 1 | # FlashUI 2 | 3 | describe 'ContentTools.FlashUI', () -> 4 | 5 | div = null 6 | editor = null 7 | 8 | beforeEach -> 9 | # Create an editable region 10 | div = document.createElement('div') 11 | div.setAttribute('class', 'editable') 12 | document.body.appendChild(div) 13 | 14 | # Initialize the editor 15 | editor = ContentTools.EditorApp.get() 16 | editor.init('.editable') 17 | 18 | afterEach -> 19 | # Shutdown the editor 20 | editor.destroy() 21 | 22 | # Remove the editable region 23 | document.body.removeChild(div) 24 | 25 | 26 | describe 'ContentTools.FlashUI()', () -> 27 | 28 | it 'should return an instance of a FlashUI', () -> 29 | 30 | flash = new ContentTools.FlashUI('ok') 31 | expect(flash instanceof ContentTools.FlashUI).toBe true 32 | 33 | it 'should mount the component', () -> 34 | 35 | flash = new ContentTools.FlashUI('ok') 36 | expect(flash.isMounted()).toBe true 37 | 38 | it 'should unmount the component after X seconds', (done) -> 39 | 40 | flash = new ContentTools.FlashUI('ok') 41 | 42 | checkUnmounted = () -> 43 | expect(flash.isMounted()).toBe false 44 | done() 45 | 46 | setTimeout(checkUnmounted, 500) 47 | 48 | 49 | describe 'ContentTools.FlashUI.mount()', () -> 50 | 51 | it 'should mount the component and apply the specified modifier', () -> 52 | 53 | # `mount` is called with the specified modifier in the constructor 54 | flash = new ContentTools.FlashUI('ok') 55 | expect(flash.isMounted()).toBe true 56 | 57 | # Get a list of classes against the class and check the specified 58 | # modifier is one of them. 59 | classes = flash.domElement().getAttribute('class').split(' ') 60 | expect(classes.indexOf('ct-flash--ok') > -1).toBe true -------------------------------------------------------------------------------- /src/spec/ui/modal.coffee: -------------------------------------------------------------------------------- 1 | # ModalUI 2 | 3 | describe 'ContentTools.ModalUI', () -> 4 | 5 | div = null 6 | editor = null 7 | 8 | beforeEach -> 9 | # Create an editable region 10 | div = document.createElement('div') 11 | div.setAttribute('class', 'editable') 12 | document.body.appendChild(div) 13 | 14 | # Initialize the editor 15 | editor = ContentTools.EditorApp.get() 16 | editor.init('.editable') 17 | 18 | afterEach -> 19 | # Shutdown the editor 20 | editor.destroy() 21 | 22 | # Remove the editable region 23 | document.body.removeChild(div) 24 | 25 | 26 | describe 'ContentTools.ModalUI()', () -> 27 | 28 | it 'should return an instance of a ModalUI', () -> 29 | 30 | modal = new ContentTools.ModalUI(true, false) 31 | expect(modal instanceof ContentTools.ModalUI).toBe true 32 | 33 | describe 'ContentTools.ModalUI.mount()', () -> 34 | 35 | it 'should mount the component', () -> 36 | 37 | modal = new ContentTools.ModalUI(true, true) 38 | editor.attach(modal) 39 | modal.show() 40 | expect(modal.isMounted()).toBe true 41 | 42 | it 'should apply transparent flag', () -> 43 | 44 | # Check that the transparency and allowScrolling flags are set 45 | modal = new ContentTools.ModalUI(true, true) 46 | editor.attach(modal) 47 | modal.show() 48 | 49 | # Check transparency flag is set 50 | classes = modal.domElement().getAttribute('class').split(' ') 51 | expect(classes.indexOf('ct-modal--transparent') > -1).toBe true 52 | 53 | it 'should apply no-scrolling flag', () -> 54 | 55 | # Check that the transparency and allowScrolling flags are set 56 | modal = new ContentTools.ModalUI(true, false) 57 | editor.attach(modal) 58 | modal.show() 59 | 60 | # Check no scrolling flag is not set 61 | classes = (document.body.getAttribute('class') or '').split(' ') 62 | expect(classes.indexOf('ct--no-scroll') > -1).toBe true 63 | 64 | 65 | describe 'ContentTools.ModalUI.unmount()', () -> 66 | 67 | it 'should unmount the component', () -> 68 | 69 | modal = new ContentTools.ModalUI(true, true) 70 | editor.attach(modal) 71 | modal.show() 72 | modal.unmount() 73 | expect(modal.isMounted()).toBe false 74 | 75 | it 'should remove no-scrolling flag', () -> 76 | 77 | # Check that the transparency and allowScrolling flags are set 78 | modal = new ContentTools.ModalUI(true, false) 79 | editor.attach(modal) 80 | modal.show() 81 | modal.unmount() 82 | 83 | # Check no scrolling flag is not set 84 | classes = (document.body.getAttribute('class') or '').split(' ') 85 | expect(classes.indexOf('ct--no-scroll') > -1).toBe false 86 | 87 | 88 | # Events 89 | 90 | describe 'ContentTools.ModalUI > Events', () -> 91 | 92 | it 'should trigger a `click` event if clicked', () -> 93 | 94 | modal = new ContentTools.ModalUI(true, true) 95 | editor.attach(modal) 96 | modal.show() 97 | 98 | # Create function we can spy on to ensure the event is triggered 99 | foo = { 100 | handleFoo: () -> 101 | return 102 | } 103 | spyOn(foo, 'handleFoo') 104 | 105 | # Bind the spied on function to the event 106 | modal.addEventListener('click', foo.handleFoo) 107 | 108 | # Create a fake click event against the modal's DOM element 109 | clickEvent = document.createEvent('CustomEvent') 110 | clickEvent.initCustomEvent('click', false, false, null) 111 | modal.domElement().dispatchEvent(clickEvent) 112 | 113 | expect(foo.handleFoo).toHaveBeenCalled() 114 | -------------------------------------------------------------------------------- /src/styles/_settings.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * All widgets are assigned a z-index equal to or higher than this setting. The 3 | * base z-index can be adjusted to overcome z-index conflicts with existing page 4 | * elements. 5 | */ 6 | $base-z-index: 9999 !default; 7 | 8 | /** 9 | * For UI widgets that appear on the page (as opposed to appearing in front of a 10 | * modal screen) we define a base background colour. 11 | */ 12 | $in-page-background: #e9e9e9 !default; 13 | 14 | /** 15 | * The colour used when casting shadows for widgets that appear to float. 16 | */ 17 | $shadow-color: rgba(black, 0.35) !default; 18 | 19 | /** 20 | * Confirm, Cancel and Edit actions are common amoung the various ui components. 21 | * Each action has an associated/common colour. 22 | */ 23 | $cancel-action-color: #e74c3c !default; 24 | $confirm-action-color: #27ae60 !default; 25 | $edit-action-color: #2980b9 !default; 26 | $muted-action-color: #646464 !default; 27 | 28 | /** 29 | * The background colour used to highlight editiable regions to users when they 30 | * hold down the shift key. 31 | */ 32 | $highlight-color: rgba(#f39c12, 0.25) !default; 33 | 34 | 35 | /** 36 | * Tooltips feature for a number of components, their base appearance is 37 | * configured using a mixin. 38 | */ 39 | @mixin type-tooltip( 40 | $parent-width: 0px, 41 | $parent-height: 0px, 42 | $height: 20px, 43 | $offset-top: 5px, 44 | $width: 85px 45 | ) { 46 | 47 | &:after { 48 | background: black; 49 | border-radius: 2px; 50 | color: white; 51 | content: attr(data-ct-tooltip); 52 | display: block; 53 | @include hyphens(auto); 54 | left: calc(0 - ((#{$width} - #{$parent-width}) / 2)); 55 | line-height: $height; 56 | opacity: 0.0; 57 | padding: 0 8px; 58 | pointer-events: none; 59 | position: absolute; 60 | bottom: ($parent-height + $offset-top); 61 | @include type-text($font-size: 12px, $line-height: $height); 62 | visibility: hidden; 63 | width: $width; 64 | word-break: break-word; 65 | } 66 | 67 | &:hover { 68 | &:after { 69 | opacity: 0.8; 70 | visibility:visible; 71 | 72 | @include transition-property(opacity); 73 | @include transition-duration(0.0s); 74 | @include transition-timing-function(ease-in); 75 | @include transition-delay(2.0s); 76 | } 77 | } 78 | } 79 | 80 | /** 81 | * The following settings relate to typography. For portability we limit the the 82 | * use of fonts to: 83 | * 84 | * - `type-icon` used for displaying icons (courtesy of http://icomoon.io). 85 | * - `type-text` used for displaying text. 86 | * 87 | */ 88 | 89 | // Icon font-face 90 | @font-face { 91 | font-family: 'icon'; 92 | src: url($image-path-prefix + 'icons.woff'); 93 | font-weight: normal; 94 | font-style: normal; 95 | } 96 | 97 | // Text colours 98 | $icon-color: #464646 !default; 99 | $text-color: #646464 !default; 100 | 101 | // Type mixins 102 | @mixin type-text($font-size: 14px, $line-height: 18px) { 103 | font-family: arial, sans-serif; 104 | font-size: $font-size; 105 | line-height: $line-height; 106 | -webkit-font-smoothing: antialiased; 107 | -moz-osx-font-smoothing: grayscale; 108 | } 109 | 110 | @mixin type-icons($font-size: 16px) { 111 | font-family: 'icon'; 112 | font-size: $font-size; 113 | font-style: normal; 114 | font-weight: normal; 115 | font-variant: normal; 116 | speak: none; 117 | text-transform: none; 118 | -webkit-font-smoothing: antialiased; 119 | -moz-osx-font-smoothing: grayscale; 120 | } 121 | -------------------------------------------------------------------------------- /src/styles/content-tools.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* Vendor */ 4 | @import "../../external/styles/content-edit"; 5 | @import "../../external/styles/bourbon/bourbon"; 6 | 7 | /* Settings */ 8 | @import "settings"; 9 | 10 | /* UI */ 11 | @import "ui/ui"; 12 | 13 | /** 14 | * The highlight class below is used to highlight editable regions within the 15 | * page to users to help them see what they can edit. It's slightly unusual in 16 | * that it's specified as a modifier of `ct`. 17 | */ 18 | 19 | @include keyframes(highlight) { 20 | 0% { 21 | outline-color: rgba(white, 0); 22 | @include transform(background-color); 23 | } 24 | 25% { 25 | outline-color: $highlight-color; 26 | @include transform(background-color); 27 | } 28 | 50% { 29 | outline-color: $highlight-color; 30 | @include transform(background-color); 31 | } 32 | 100% { 33 | outline-color: rgba(white, 0); 34 | @include transform(background-color); 35 | } 36 | } 37 | 38 | @mixin animation--highlight() { 39 | @include animation(highlight 0.5s ease-in); 40 | @include animation-iteration-count(infinite); 41 | @include animation-fill-mode(forwards); 42 | } 43 | 44 | .ct-app { 45 | @include box-sizing(border-box); 46 | 47 | * { 48 | &, 49 | &:before, 50 | &:after { 51 | @include box-sizing(border-box); 52 | } 53 | } 54 | } 55 | 56 | .ct--highlight { 57 | outline: 4px solid $highlight-color; 58 | @include animation--highlight(); 59 | } 60 | 61 | /** 62 | * When applied to the `body` this class prevents the page from scrolling. This 63 | * can be a useful trait when overlaying content such as a dialog where 64 | * scrolling is either undesirable or relevant only to the overlayed content. 65 | */ 66 | .ct--no-scroll { 67 | overflow: hidden; 68 | } 69 | 70 | /** 71 | * Sometimes it necessary to take focus from an element such as when asking a 72 | * user to provide a URL for a link. To provide an indication of the element's 73 | * selection before focus was list this class can be applied to a `span` 74 | * surrounding the element's selection. 75 | * 76 | * Once focus is returned to the element the class should be removed. 77 | */ 78 | .ct--pseudo-select { 79 | background: rgba(black, 0.1); 80 | } 81 | -------------------------------------------------------------------------------- /src/styles/ui/_attributes.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Attributes are similar to sections in that they are used to divide up 3 | * configuration blocks within a dialog's view. However attributes 4 | * exclusively support text inputs (no switches) and both the name and value of 5 | * an attribute can be modified (unlike sections where the label is fixed). 6 | */ 7 | .ct-widget { 8 | 9 | .ct-attribute { 10 | border-bottom: 1px solid #eee; 11 | @include clearfix; 12 | height: 48px; 13 | vertical-align: top; 14 | 15 | /** 16 | * Each section has a name and value component, both of which can be 17 | * modified. 18 | */ 19 | &__name { 20 | background: #f6f6f6; 21 | border: none; 22 | color: $text-color; 23 | float: left; 24 | height: 47px; 25 | outline: none; 26 | padding: 0 16px; 27 | @include type-text($line-height: 48px); 28 | width: 25%; 29 | 30 | /** 31 | * If the the attributes name is invalid then the `invalid` modifier 32 | * is set against the input (programmatically). 33 | */ 34 | &--invalid { 35 | color: $cancel-action-color; 36 | } 37 | } 38 | 39 | &__value { 40 | -webkit-appearance: none; 41 | -moz-appearance: none; 42 | appearance: none; 43 | 44 | background: white; 45 | border: none; 46 | color: $text-color; 47 | float: right; 48 | height: 47px; 49 | outline: none; 50 | padding: 0 16px; 51 | @include type-text($line-height: 48px); 52 | width: 75%; 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /src/styles/ui/_crop-marks.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Cropmarks define the region within an image that will be cropped. They appear 3 | * in the image dialog when crop is active. 4 | */ 5 | 6 | .ct-widget { 7 | 8 | .ct-crop-marks { 9 | height: 320px; 10 | left: 73px; 11 | position: absolute; 12 | top: 0; 13 | width: 427px; 14 | 15 | /** 16 | * The clipper is used to prevent the rulers extending outside of the 17 | * image. 18 | */ 19 | &__clipper { 20 | height: 100%; 21 | overflow: hidden; 22 | position: relative; 23 | width: 100%; 24 | } 25 | 26 | /** 27 | * The cropping region is defined by 2 L shaped framing rulers at 28 | * opposite corners. 29 | */ 30 | &__ruler { 31 | 32 | &--top-left { 33 | position: absolute; 34 | 35 | &:after { 36 | border: 1px solid rgba(white, 0.5); 37 | border-bottom: none; 38 | border-right: none; 39 | box-shadow: 40 | -1px -1px 1px rgba(black, 0.25), 41 | inset 1px 1px 1px rgba(black, 0.25) 42 | ; 43 | content: ''; 44 | height: 999px; 45 | left: 0; 46 | position: absolute; 47 | top: 0; 48 | width: 999px; 49 | } 50 | } 51 | 52 | &--bottom-right { 53 | position: absolute; 54 | 55 | &:after { 56 | border: 1px solid rgba(white, 0.5); 57 | border-top: none; 58 | border-left: none; 59 | bottom: 0; 60 | box-shadow: 61 | 1px 1px 1px rgba(black, 0.25), 62 | inset -1px -1px 1px rgba(black, 0.25) 63 | ; 64 | content: ''; 65 | height: 999px; 66 | position: absolute; 67 | right: 0; 68 | width: 999px; 69 | } 70 | } 71 | } 72 | 73 | /** 74 | * The rulers defing the crop region can be moved by the user, handles 75 | * provide a draggable handle for each ruler. 76 | */ 77 | &__handle { 78 | background: #2980b9; 79 | border: 1px solid lighten(#2980b9, 10%); 80 | border-radius: 7px; 81 | cursor: pointer; 82 | height: 15px; 83 | margin-left: -7px; 84 | margin-top: -7px; 85 | position: absolute; 86 | width: 15px; 87 | 88 | &--bottom-right { 89 | margin-left: -8px; 90 | margin-top: -8px; 91 | } 92 | 93 | &:hover { 94 | background: lighten(#2980b9, 5%); 95 | } 96 | } 97 | } 98 | 99 | } -------------------------------------------------------------------------------- /src/styles/ui/_flashes.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Flashes are used to display a visual confirmation to the user that an action 3 | * has completed successfully (or failed). 4 | */ 5 | 6 | .ct-widget { 7 | 8 | /** 9 | * The flash animation displays an icon in the center of the user's screen 10 | * that flashes into view and then out. 11 | */ 12 | $flash-timer: 2s; 13 | 14 | @include keyframes(flash) { 15 | 0% { 16 | opacity: 0; 17 | font-size: 32px; 18 | @include transform(font-size); 19 | } 20 | 25% { 21 | font-size: 320px; 22 | opacity: 1; 23 | @include transform(all); 24 | } 25 | 50% { 26 | font-size: 320px; 27 | opacity: 1; 28 | @include transform(all); 29 | } 30 | 75% { 31 | font-size: 320px; 32 | opacity: 1; 33 | @include transform(all); 34 | } 35 | 100% { 36 | opacity: 0; 37 | @include transform(all); 38 | } 39 | } 40 | 41 | @mixin animation--flash() { 42 | @include animation(flash $flash-timer ease-in); 43 | @include animation-iteration-count(1); 44 | @include animation-fill-mode(forwards); 45 | } 46 | 47 | /** 48 | * The flash timer animation is used purely to indicated to the Javascript 49 | * that created the flash element that the animation has finished. 50 | */ 51 | @include keyframes(flash-timer) { 52 | 0% { 53 | opacity: 1; 54 | @include transform(opacity); 55 | } 56 | 99% { 57 | opacity: 1; 58 | @include transform(opacity); 59 | } 60 | 100% { 61 | opacity: 0; 62 | @include transform(opacity); 63 | } 64 | } 65 | 66 | @mixin animation--flash-timer() { 67 | @include animation(flash-timer $flash-timer ease-in); 68 | @include animation-iteration-count(1); 69 | @include animation-fill-mode(forwards); 70 | } 71 | 72 | /** 73 | * The icon that is flashed. 74 | */ 75 | &.ct-flash { 76 | color: rgba(white, 0.9); 77 | height: 0; 78 | left: 0; 79 | position: fixed; 80 | @include type-icons; 81 | top: 0; 82 | width: 0; 83 | z-index: $base-z-index + 1000; 84 | 85 | &:before { 86 | left: 50%; 87 | opacity: 0; 88 | position: fixed; 89 | text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 90 | top: 50%; 91 | transform: translate(-50%, -50%); 92 | } 93 | 94 | &--active { 95 | @include animation--flash-timer(); 96 | 97 | &:before { 98 | @include animation--flash(); 99 | 100 | // Fallback for IE9 101 | font-size: 320px; 102 | opacity: 1; 103 | } 104 | } 105 | 106 | /** 107 | * Modifiers that can be applied to the flash to change it's appearance. 108 | */ 109 | &--ok:before { 110 | content: '\ea10'; 111 | } 112 | 113 | &--no:before { 114 | content: '\ea0f'; 115 | } 116 | } 117 | 118 | } -------------------------------------------------------------------------------- /src/styles/ui/_grips.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grip's provide a visual hint to the user that they can use the mouse to drag 3 | * an item (for example the toolbar has a grip that can be used to drag it to a 4 | * new location. 5 | */ 6 | 7 | .ct-widget { 8 | 9 | .ct-grip { 10 | 11 | cursor: move; 12 | font-size: 0; 13 | text-align: center; 14 | @include user-select(none); 15 | 16 | /** 17 | * Grips consist of one or more bumps, elements that appear to be sunk 18 | * or raised and therefore provide grip. 19 | */ 20 | &__bump { 21 | $grip-size: 12px; 22 | background: rgba($icon-color, 0.15); 23 | border-radius: $grip-size; 24 | display: inline-block; 25 | height: $grip-size; 26 | margin-left: $grip-size; 27 | width: $grip-size; 28 | 29 | &:first-child { 30 | margin-left: 0; 31 | } 32 | } 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /src/styles/ui/_modal.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The modal widget provides a layer over the page limiting interaction to just 3 | * the components positioned above the layer. This is commonly used when 4 | * displaying a dialog, for example if we're editing a table's properties then 5 | * the modal ensures the user can't change the element selected on the page 6 | * while the dialog is open. 7 | */ 8 | 9 | .ct-widget { 10 | 11 | &.ct-modal { 12 | background: rgba(black, 0.7); 13 | height: 0; 14 | left: 0; 15 | position: fixed; 16 | top: 0; 17 | width: 0; 18 | z-index: $base-z-index + 10; 19 | 20 | // States 21 | 22 | &--transparent { 23 | background: transparent; 24 | } 25 | } 26 | 27 | } 28 | 29 | .ct-widget--active { 30 | 31 | &.ct-modal { 32 | height: 100%; 33 | width: 100%; 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /src/styles/ui/_progress.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The progress bar appears in dialogs (such as the image dialog) and provides 3 | * feedback to the user on a task (such as uploading an image). 4 | */ 5 | 6 | .ct-widget { 7 | 8 | .ct-progress-bar { 9 | border: 1px solid #eee; 10 | height: 32px; 11 | line-height: 32px; 12 | padding: 1px; 13 | width: 456px; 14 | 15 | /** 16 | * Note: The width of the progress bar should be set (as a percentage) 17 | * programatially, e.g `progressBarDOM.style.width = '50%'`. 18 | */ 19 | &__progress { 20 | background: #2980b9; 21 | height: 28px; 22 | } 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /src/styles/ui/_sections.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sections are used to divide up configuration blocks within a dialog's view. 3 | * They contain wither a switch or an input, for example the table dialog has 4 | * header (switch), body (input - e.g number of columns) and footer (switch) 5 | * sections. 6 | */ 7 | 8 | .ct-widget { 9 | 10 | .ct-section { 11 | border-bottom: 1px solid #eee; 12 | @include clearfix; 13 | color: lighten($text-color, 35%); 14 | cursor: pointer; 15 | font-style: italic; 16 | height: 48px; 17 | padding: 0 16px; 18 | @include type-text($font-size: 16px, $line-height: 48px); 19 | 20 | &:hover { 21 | background: #f6f6f6; 22 | } 23 | 24 | /** 25 | * If the section is a switch then the `applied` modifier is set when 26 | * the switch is on. 27 | */ 28 | &--applied { 29 | color: $text-color; 30 | font-style: normal; 31 | 32 | .ct-section__switch { 33 | background-color: #27ae60; 34 | border: 1px solid darken(#27ae60, 10%); 35 | 36 | &:before { 37 | left: 25px; 38 | @include transition-property(left); 39 | @include transition-duration(0.1s); 40 | @include transition-timing-function(ease-in); 41 | } 42 | } 43 | } 44 | 45 | /** 46 | * If the section contains an input field the `contains-input` modifier 47 | * is set. 48 | */ 49 | &--contains-input { 50 | .ct-section__label { 51 | width: 75%; 52 | } 53 | } 54 | 55 | /** 56 | * Each section has a label describing the purpose of the switch or 57 | * input within the section. 58 | */ 59 | &__label { 60 | float: left; 61 | overflow: hidden; 62 | text-overflow: ellipsis; 63 | width: 472px; 64 | white-space: nowrap; 65 | } 66 | 67 | &__switch { 68 | background-color: #ccc; 69 | border: 1px solid darken(#ccc, 10%); 70 | border-radius: 12px; 71 | box-shadow: inset 0px 0 2px rgba(black, 0.1); 72 | float: right; 73 | height: 24px; 74 | margin-top: 12px; 75 | position: relative; 76 | width: 48px; 77 | 78 | &:before { 79 | background: white; 80 | border-radius: 10px; 81 | content: ''; 82 | height: 20px; 83 | left: 1px; 84 | position: absolute; 85 | top: 1px; 86 | @include transition-property(left); 87 | @include transition-duration(0.1s); 88 | @include transition-timing-function(ease-in); 89 | width:20px; 90 | } 91 | } 92 | 93 | &__input { 94 | background: white; 95 | border: none; 96 | color: $text-color; 97 | float: right; 98 | height: 47px; 99 | outline: none; 100 | padding: 0 16px; 101 | text-align: right; 102 | @include type-text($line-height: 48px); 103 | width: 25%; 104 | 105 | /** 106 | * If the contents of the sections input is invalid then the 107 | * `invalid` modifier is set against the input (programmatically). 108 | */ 109 | &--invalid { 110 | color: $cancel-action-color; 111 | } 112 | } 113 | 114 | } 115 | 116 | } -------------------------------------------------------------------------------- /src/styles/ui/_ui.scss: -------------------------------------------------------------------------------- 1 | /* 2 | The widget CSS class should be applied any UI element that's insert into the DOM 3 | and not within a widget, the widget CSS class resets the style for of all 4 | supported child elements. 5 | */ 6 | 7 | .ct-widget, 8 | .ct-widget * { 9 | /* Reset */ 10 | div, span, 11 | iframe, 12 | a, b, i 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td { 15 | border: 0; 16 | font-size: 100%; 17 | font: inherit; 18 | margin: 0; 19 | padding: 0; 20 | vertical-align: baseline; 21 | } 22 | 23 | ol, ul { 24 | list-style: none; 25 | } 26 | 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | 32 | /* Defaults */ 33 | @include box-sizing(border-box); 34 | } 35 | 36 | .ct-widget { 37 | opacity: 0; 38 | @include type-text; 39 | z-index: $base-z-index; 40 | 41 | @include transition-property(opacity); 42 | @include transition-duration(0.25s); 43 | @include transition-timing-function(ease-in); 44 | } 45 | 46 | .ct-widget--active { 47 | opacity: 1; 48 | 49 | @include transition-property(opacity); 50 | @include transition-duration(0.25s); 51 | @include transition-timing-function(ease-in); 52 | } 53 | 54 | @import "attributes"; 55 | @import "crop-marks"; 56 | @import "dialogs"; 57 | @import "flashes"; 58 | @import "grips"; 59 | @import "ignition"; 60 | @import "inspector"; 61 | @import "modal"; 62 | @import "progress"; 63 | @import "sections"; 64 | @import "toolbox"; -------------------------------------------------------------------------------- /translations/ar.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "محاذاة وسط", 3 | "Align left": "محاذاة يسار", 4 | "Align right": "محاذاة يمين", 5 | "Apply": "خزن", 6 | "Attributes": "سمات", 7 | "Bold": "غامق", 8 | "Bullet list": "قائمة غير مرقمة", 9 | "Cancel": "إلغاء", 10 | "Clear": "مسج", 11 | "Code": "برمجة", 12 | "Crop marks": "علامات الفص", 13 | "Enter a link": "أدخل رابط", 14 | "Image": "صورة", 15 | "Heading": "عنوان", 16 | "Indent": "مسافة بدء", 17 | "Insert": "إدراج", 18 | "Insert image": "إدراج صورة", 19 | "Insert table": "إدراج جدول", 20 | "Insert video": "إدراج فيديو", 21 | "Italic": "مائل", 22 | "Line break": "سطر جديد", 23 | "Link": "رابط", 24 | "List": "قائمة", 25 | "List item": "مادة", 26 | "Name": "إسم", 27 | "No styles available for this tag": "لا يوجد نمظ لهذا التاغ", 28 | "Numbers list": "قائمة مرقمة", 29 | "Paste YouTube or Vimeo URL": "ألصق رابط من يوتيوب أو فيميو Youtube - Vimeo", 30 | "Paragraph": "فقرة", 31 | "Preformatted": "تنسيق مسبق", 32 | "Properties": "خصائص", 33 | "Redo": "مجدداً", 34 | "Remove": "حذف", 35 | "Rotate": "تدوير", 36 | "Styles": "أنماظ", 37 | "Subheading": "عنوان ثانوي", 38 | "Table": "جدول", 39 | "Table body (columns)": "جسم الجدول - أعمدة", 40 | "Table foot": "تذييل الجدول", 41 | "Table head": "رأس الجدوب", 42 | "Table row": "صف الجدول", 43 | "Text": "نص", 44 | "Undo": "تراجع", 45 | "Unindent": "إزالة مسافة البدء", 46 | "Update table": "تحديث الجدول", 47 | "Upload": "رفع", 48 | "Value": "قيمة", 49 | "Video": "فيديو", 50 | "Your changes have not been saved, do you really want to lose them?": "لم يتم حزن تغييراتك, هل ترغب حقاً بضياعها؟" 51 | } 52 | -------------------------------------------------------------------------------- /translations/ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centrar", 3 | "Align left": "Alinear a l'esquerra", 4 | "Align right": "Alinear a la dreta", 5 | "Apply": "Aplica", 6 | "Attributes": "Atributs", 7 | "Bold": "Negreta", 8 | "Bullet list": "Llista simple", 9 | "Cancel": "Cancel·la", 10 | "Clear": "Neteja", 11 | "Code": "Codi", 12 | "Crop marks": "Marques de tall", 13 | "Enter a link": "Inserta un enllaç", 14 | "Image": "Imatge", 15 | "Heading": "Capçalera", 16 | "Indent": "Sagnat", 17 | "Insert": "Inserta", 18 | "Insert image": "Inserta una imatge", 19 | "Insert table": "Inserta una taula", 20 | "Insert video": "Inserta un vídeo", 21 | "Italic": "Cursiva", 22 | "Line break": "Salt de línia", 23 | "Link": "Enllaç / Hipervincle", 24 | "List": "Llista", 25 | "List item": "Element de llista", 26 | "Name": "Nom", 27 | "No styles available for this tag": "No hi han estils disponibles per aquesta etiqueta", 28 | "Numbers list": "Llista numèrica", 29 | "Paste YouTube or Vimeo URL": "Enganxa la URL de Youtube o Vimeo aquí", 30 | "Paragraph": "Pàrraf", 31 | "Preformatted": "Text preformatejat", 32 | "Properties": "Propietats", 33 | "Redo": "Refer", 34 | "Remove": "Esborrar", 35 | "Rotate": "Rotar", 36 | "Styles": "Estils", 37 | "Subheading": "Subtítols", 38 | "Table": "Taula", 39 | "Table body (columns)": "Cos de la taula (columnes)", 40 | "Table foot": "Peu de taula", 41 | "Table head": "Capçalera de taula", 42 | "Table row": "Línia de taula", 43 | "Text": "Text", 44 | "Undo": "Desfer", 45 | "Unindent": "Redueix sagnat", 46 | "Update table": "Actualitza la taula", 47 | "Upload": "Pujar", 48 | "Value": "Valor", 49 | "Video": "Vídeo", 50 | "Your changes have not been saved, do you really want to lose them?": "Els canvis no s'han desat. Estàs totalment segur de no voler guardar?" 51 | } -------------------------------------------------------------------------------- /translations/cs.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Zarovnat na střed", 3 | "Align left": "Zarovnat vlevo", 4 | "Align right": "Zarovnat vpravo", 5 | "Apply": "Použít", 6 | "Attributes": "Atributy", 7 | "Bold": "Tučně", 8 | "Bullet list": "Odrážkový seznam", 9 | "Cancel": "Zrušit", 10 | "Clear": "Vymazat", 11 | "Code": "Kód", 12 | "Crop marks": "Ořezové značky", 13 | "Enter a link": "Vložte odkaz", 14 | "Image": "Obrázek", 15 | "Heading": "Nadpis", 16 | "Indent": "Zvětšit odsazení", 17 | "Insert": "Vložit", 18 | "Insert image": "Vložit obrázek", 19 | "Insert table": "Vložit tabulku", 20 | "Insert video": "Vložit video", 21 | "Italic": "Kurzívou", 22 | "Line break": "Zalomit řádek", 23 | "Link": "Odkaz", 24 | "List": "Seznam", 25 | "List item": "Položka seznamu", 26 | "Name": "Jméno", 27 | "No styles available for this tag": "Nenalezeny žádné styly pro tento tag", 28 | "Numbers list": "Číslovaný seznam", 29 | "Paste YouTube or Vimeo URL": "Vložte odkaz z Youtube nebo Vimeo", 30 | "Paragraph": "Odstavec", 31 | "Preformatted": "Předformátovaný", 32 | "Properties": "Vlastnosti", 33 | "Redo": "Znovu", 34 | "Remove": "Odebrat", 35 | "Rotate": "Otočit", 36 | "Styles": "Styly", 37 | "Subheading": "Podnadpis", 38 | "Table": "Tabulka", 39 | "Table body (columns)": "Tělo tabulky (sloupce)", 40 | "Table foot": "Zápatí tabulky", 41 | "Table head": "Záhlaví tabulky", 42 | "Table row": "Řádek tabulky", 43 | "Text": "Text", 44 | "Undo": "Zpět", 45 | "Unindent": "Zmenšit odsazení", 46 | "Update table": "Aktualizovat tabulku", 47 | "Upload": "Nahrát", 48 | "Value": "Hodnota", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Provedené změny nebyly uloženy, opravdu je chcete zrušit?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/da.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centrer", 3 | "Align left": "Venstrestil", 4 | "Align right": "Højrestil", 5 | "Apply": "Anvend", 6 | "Attributes": "Attributter", 7 | "Bold": "Fed", 8 | "Bullet list": "Punktliste", 9 | "Cancel": "Annuller", 10 | "Clear": "Ryd", 11 | "Code": "Kode", 12 | "Crop marks": "Beskæringsmærker", 13 | "Enter a link": "Angiv et link", 14 | "Image": "Billede", 15 | "Heading": "Overskrift", 16 | "Indent": "Indenter", 17 | "Insert": "Indsæt", 18 | "Insert image": "Indsæt billede", 19 | "Insert table": "Indsæt tabel", 20 | "Insert video": "Indsæt video", 21 | "Italic": "Kursiv", 22 | "Line break": "Linjeskift", 23 | "Link": "Link", 24 | "List": "Liste", 25 | "List item": "Liste element", 26 | "Name": "Navn", 27 | "No styles available for this tag": "Ingen styles er tilgængelige for dette tag", 28 | "Numbers list": "Nummereret liste", 29 | "Paste YouTube or Vimeo URL": "Indsæt YouTube eller Vimeo URL", 30 | "Paragraph": "Afsnit", 31 | "Preformatted": "Formateret", 32 | "Properties": "Egenskaber", 33 | "Redo": "Gendan", 34 | "Remove": "Fjern", 35 | "Rotate": "Roter", 36 | "Styles": "Styles", 37 | "Subheading": "Underoverskrift", 38 | "Table": "Tabel", 39 | "Table body (columns)": "Tabel indhold (kolonner)", 40 | "Table foot": "Tabelfod", 41 | "Table head": "Tabelhoved", 42 | "Table row": "Tabelrække", 43 | "Text": "Tekst", 44 | "Undo": "Fortryd", 45 | "Unindent": "Afindryk", 46 | "Update table": "Opdater tabel", 47 | "Upload": "Upload", 48 | "Value": "Værdi", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Dine ændringer er ikke blevet gemt, ønsker du virkelig at miste disse?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Zentrieren", 3 | "Align left": "Linksbündig ausrichten", 4 | "Align right": "Rechtsbündig ausrichten", 5 | "Apply": "Anwenden", 6 | "Attributes": "Attribute", 7 | "Bold": "Fett", 8 | "Bullet list": "Aufzählungszeichen", 9 | "Cancel": "Abbrechen", 10 | "Clear": "Leeren", 11 | "Code": "Code", 12 | "Crop marks": "Schnittmarken", 13 | "Enter a link": "Verknüpfung einfügen", 14 | "Image": "Bild", 15 | "Heading": "Überschrift", 16 | "Indent": "Einzug vergrößern", 17 | "Insert": "Einfügen", 18 | "Insert image": "Bild einfügen", 19 | "Insert table": "Tabelle einfügen", 20 | "Insert video": "Video einfügen", 21 | "Italic": "Kursiv", 22 | "Line break": "Zeilenumbruch", 23 | "Link": "Verknüpfung", 24 | "List": "Liste", 25 | "List item": "Listenelement", 26 | "Name": "Name", 27 | "No styles available for this tag": "Keine Stile für diesen Tag verfügbar", 28 | "Numbers list": "nummerierte Liste", 29 | "Paste YouTube or Vimeo URL": "YouTube oder Vimeo URL einfügen", 30 | "Paragraph": "Absatz", 31 | "Preformatted": "Vorformatiert", 32 | "Properties": "Eigenschaften", 33 | "Redo": "Wiederholen", 34 | "Remove": "Löschen", 35 | "Rotate": "Drehen", 36 | "Styles": "Stile", 37 | "Subheading": "Untertitel", 38 | "Table": "Tabelle", 39 | "Table body (columns)": "Tabellenkörper (Spalten)", 40 | "Table foot": "Tabellenfuß", 41 | "Table head": "Tabellenkopf", 42 | "Table row": "Tabellenzeile", 43 | "Text": "Text", 44 | "Undo": "Rückgängig", 45 | "Unindent": "Einzug verkleinern", 46 | "Update table": "Tabelle aktualisieren", 47 | "Upload": "Hochladen", 48 | "Value": "Wert", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Ihre Änderungen wurden nicht gespeichert, wollen Sie sie wirklich verlieren?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centrar", 3 | "Align left": "Alinear a la Izquierda", 4 | "Align right": "Alinear a la Derecha", 5 | "Apply": "Aplicar", 6 | "Attributes": "Attributos", 7 | "Bold": "Negrita", 8 | "Bullet list": "Lista simple", 9 | "Cancel": "Cancelar", 10 | "Clear": "Limpiar", 11 | "Code": "Codigo", 12 | "Crop marks": "Marcas de corte", 13 | "Enter a link": "Inserte un enlace", 14 | "Image": "Imagen", 15 | "Heading": "Cabecera", 16 | "Indent": "Sangría", 17 | "Insert": "Insertar", 18 | "Insert image": "Insertar una imágen", 19 | "Insert table": "Insertar una tabla", 20 | "Insert video": "Insertar un video", 21 | "Italic": "Itálica", 22 | "Line break": "Salto de linea", 23 | "Link": "Enlace", 24 | "List": "Lista", 25 | "List item": "Elemento de Lista", 26 | "Name": "Nombre", 27 | "No styles available for this tag": "No hay estilos disponibles para esta etiqueta", 28 | "Numbers list": "Lista numérica", 29 | "Paste YouTube or Vimeo URL": "Pegar URL de Youtube o Vimeo", 30 | "Paragraph": "Párrafo", 31 | "Preformatted": "Preformateado", 32 | "Properties": "Propiedades", 33 | "Redo": "Rehacer", 34 | "Remove": "Eliminar", 35 | "Rotate": "Rotar", 36 | "Styles": "Estilos", 37 | "Subheading": "Subtítulo", 38 | "Table": "Tabla", 39 | "Table body (columns)": "cuerpo de la tabla (columnas)", 40 | "Table foot": "Pie de tabla", 41 | "Table head": "Cabecera de Tabla", 42 | "Table row": "Linea de Tabla", 43 | "Text": "Texto", 44 | "Undo": "Deshacer", 45 | "Unindent": "Quitar Sangría", 46 | "Update table": "Actualizar tabla", 47 | "Upload": "Subir", 48 | "Value": "Valor", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Los cambios no han sido grabados, esta seguro que quiere perder los cambios?" 51 | } -------------------------------------------------------------------------------- /translations/fa.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "وسط چین", 3 | "Align left": "چپ چین", 4 | "Align right": "راست چین", 5 | "Apply": "اعمال", 6 | "Attributes": "ویژگی", 7 | "Bold": "ضخیم", 8 | "Bullet list": "لیست بالت ها", 9 | "Cancel": "لغو", 10 | "Clear": "پاکسازی", 11 | "Code": "کد", 12 | "Crop marks": "بریدن علامت", 13 | "Enter a link": "درج لینک", 14 | "Image": "تصویر", 15 | "Heading": "سربرگ", 16 | "Indent": "فروفرتگی", 17 | "Insert": "درح", 18 | "Insert image": "درج تصویر", 19 | "Insert table": "درج جدول", 20 | "Insert video": "درج فیلم", 21 | "Italic": "خمیده", 22 | "Line break": "شکست خط", 23 | "Link": "لینک", 24 | "List": "لیست", 25 | "List item": "لیست آیتم", 26 | "Name": "نام", 27 | "No styles available for this tag": "هیچ استایلی برای این تگ وجود ندارد", 28 | "Numbers list": "لیست اعداد", 29 | "Paste YouTube or Vimeo URL": "افزودن فیلم از یوتیوب یا وایمو", 30 | "Paragraph": "پاراگراف", 31 | "Preformatted": "پیش فرمت", 32 | "Properties": "ویژگی ها", 33 | "Redo": "جلورفت", 34 | "Remove": "حذف", 35 | "Rotate": "چرخش", 36 | "Styles": "ظاهر", 37 | "Subheading": "زیر سربرگ", 38 | "Table": "جدول", 39 | "Table body (columns)": "بدنه جدول (ستون ها)", 40 | "Table foot": "پابرگ جدول", 41 | "Table head": "سربرگ جدول", 42 | "Table row": "سطر جدول", 43 | "Text": "متن", 44 | "Undo": "برگشت به عقب", 45 | "Unindent": "unident", 46 | "Update table": "بروزرسانی جدول", 47 | "Upload": "بارگذاری", 48 | "Value": "مقدار", 49 | "Video": "ویديو", 50 | "Your changes have not been saved, do you really want to lose them?": "تغییرات شما ذخیره نشده است ، آیا میخواهید آنها را نادیده بگیرید ؟" 51 | } 52 | -------------------------------------------------------------------------------- /translations/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Aligner au centre", 3 | "Align left": "Aligner à gauche", 4 | "Align right": "Aligner à droite", 5 | "Apply": "Appliquer", 6 | "Attributes": "Attributs", 7 | "Bold": "Gras", 8 | "Bullet list": "Liste à puces", 9 | "Cancel": "Annuler", 10 | "Clear": "Effacer", 11 | "Code": "Code", 12 | "Crop marks": "Repères de coupe", 13 | "Enter a link": "Ajouter un lien", 14 | "Image": "Image", 15 | "Heading": "En tête", 16 | "Indent": "Indenter", 17 | "Insert": "Insérer", 18 | "Insert image": "Insérer une image", 19 | "Insert table": "Insérer une table", 20 | "Insert video": "Insérer une vidéo", 21 | "Italic": "Italique", 22 | "Line break": "Saut de ligne", 23 | "Link": "Lien", 24 | "List": "Liste", 25 | "List item": "Élément de liste", 26 | "Name": "Nom", 27 | "No styles available for this tag": "Pas de style disponible pour ce marqueur", 28 | "Numbers list": "Liste numérique", 29 | "Paste YouTube or Vimeo URL": "Saisissez un lien YouTube ou Vimeo", 30 | "Paragraph": "Paragraphe", 31 | "Preformatted": "Préformaté", 32 | "Properties": "Propriétés", 33 | "Redo": "Refaire", 34 | "Remove": "Effacer", 35 | "Rotate": "Tourner", 36 | "Styles": "Styles", 37 | "Subheading": "Sous-titre", 38 | "Table": "Table", 39 | "Table body (columns)": "Corps de table (colonnes)", 40 | "Table foot": "Pied de table", 41 | "Table head": "Tête de table", 42 | "Table row": "Ligne de table", 43 | "Text": "Texte", 44 | "Undo": "Annuler", 45 | "Unindent": "Désindenter", 46 | "Update table": "Mettre à jour la table", 47 | "Upload": "Télécharger", 48 | "Value": "Valeur", 49 | "Video": "Vidéo", 50 | "Your changes have not been saved, do you really want to lose them?": "Vos changements n'ont pas été enregistrés, êtes-vous sûr de vouloir les perdre?" 51 | } -------------------------------------------------------------------------------- /translations/he.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "ישר למרכז", 3 | "Align left": "ישר לשמאל", 4 | "Align right": "ישר לימין", 5 | "Apply": "בצע", 6 | "Attributes": "תכונות", 7 | "Bold": "מודגש", 8 | "Bullet list": "רשימת תבליטים", 9 | "Cancel": "בטל", 10 | "Clear": "נקה", 11 | "Code": "קוד", 12 | "Crop marks": "סימני חיתוך", 13 | "Enter a link": "הכנס קישור", 14 | "Image": "תמונה", 15 | "Heading": "כותרת", 16 | "Indent": "כניסה", 17 | "Insert": "הכנס", 18 | "Insert image": "הכנס תמונה", 19 | "Insert table": "הכנס טבלה", 20 | "Insert video": "הכנס וידאו", 21 | "Italic": "נטוי", 22 | "Line break": "שובר שורה", 23 | "Link": "קישור", 24 | "List": "רשימה", 25 | "List item": "רשומה", 26 | "Name": "שם", 27 | "No styles available for this tag": "אין סגנונות עבור תגים זאת", 28 | "Numbers list": "רשימה ממוספרת", 29 | "Paste YouTube or Vimeo URL": "הדבק קישור יוטיוב או וימאו", 30 | "Paragraph": "פיסקה", 31 | "Preformatted": "כולל סיגנון", 32 | "Properties": "תכונות", 33 | "Redo": "בצע שוב", 34 | "Remove": "הסר", 35 | "Rotate": "סובב", 36 | "Styles": "סגנונות", 37 | "Subheading": "תת-כותרת", 38 | "Table": "טבלה", 39 | "Table body (columns)": "גוף הטבלה (עמודות)", 40 | "Table foot": "תחתית הטבלה", 41 | "Table head": "ראש הטבלה", 42 | "Table row": "שורת טבלה", 43 | "Text": "טקסט", 44 | "Undo": "בטל", 45 | "Unindent": "הורד כניסה", 46 | "Update table": "עדכן טבלה", 47 | "Upload": "העלאה", 48 | "Value": "ערך", 49 | "Video": "וידאו", 50 | "Your changes have not been saved, do you really want to lose them?": "השינויים לא נשמרו, אתה בטוח שאתה רוצה לאבד אותם?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/hu.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Középre igazítás", 3 | "Align left": "Balra igazítás", 4 | "Align right": "Jobbra igazítás", 5 | "Apply": "Alkalmazás", 6 | "Attributes": "Attribútumok", 7 | "Bold": "Félkövér", 8 | "Bullet list": "Felsorolás", 9 | "Cancel": "Mégsem", 10 | "Clear": "Kirüítés", 11 | "Code": "Kód", 12 | "Crop marks": "Vágójelek", 13 | "Enter a link": "Hivatkozás beszúrása", 14 | "Image": "Kép", 15 | "Heading": "Cím", 16 | "Indent": "Behúzás növelése", 17 | "Insert": "Beszúrás", 18 | "Insert image": "Kép beszúrása", 19 | "Insert table": "Táblázat beszúrása", 20 | "Insert video": "Videó beszúrása", 21 | "Italic": "Dőlt", 22 | "Line break": "Sortörés", 23 | "Link": "Hivatkozás", 24 | "List": "Lista", 25 | "List item": "Listaelem", 26 | "Name": "Név", 27 | "No styles available for this tag": "Ehhez az elemhez nincsenek elérhető stílusok", 28 | "Numbers list": "Számozott lista", 29 | "Paste YouTube or Vimeo URL": "YouTube vagy Vimeo URL", 30 | "Paragraph": "Bekezdés", 31 | "Preformatted": "Előformázott", 32 | "Properties": "Tulajdonságok", 33 | "Redo": "Újra", 34 | "Remove": "Törlés", 35 | "Rotate": "Elforgatás", 36 | "Styles": "Stílusok", 37 | "Subheading": "Alcím", 38 | "Table": "Táblázat", 39 | "Table body (columns)": "Táblázattörzs (oszlopok száma)", 40 | "Table foot": "Táblázat-lábléc", 41 | "Table head": "Táblázat-fejléc", 42 | "Table row": "Táblázat sor", 43 | "Text": "Szöveg", 44 | "Undo": "Visszavonás", 45 | "Unindent": "Behúzás csökkentése", 46 | "Update table": "Táblázat frissítése", 47 | "Upload": "Feltöltés", 48 | "Value": "Érték", 49 | "Video": "Videó", 50 | "Your changes have not been saved, do you really want to lose them?": "A változtatások nincsenek elmentve. Biztosan elveted őket?" 51 | } -------------------------------------------------------------------------------- /translations/it.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Allineato al centro", 3 | "Align left": "Allineato a sinistra", 4 | "Align right": "Allineato a destra", 5 | "Apply": "Applica", 6 | "Attributes": "Attributi", 7 | "Bold": "Grassetto", 8 | "Bullet list": "Lista puntata", 9 | "Cancel": "Annulla", 10 | "Clear": "Pulisci", 11 | "Code": "Codice", 12 | "Crop marks": "Ritaglia", 13 | "Enter a link": "Inserisci un link", 14 | "Image": "Immagine", 15 | "Heading": "Titolo", 16 | "Indent": "Indentazione", 17 | "Insert": "Inserisci", 18 | "Insert image": "Inserisci una immagine", 19 | "Insert table": "Inserisci una tabella", 20 | "Insert video": "Inserisci un video", 21 | "Italic": "Italico", 22 | "Line break": "Interruzione di linea", 23 | "Link": "Link", 24 | "List": "Lista", 25 | "List item": "Elemento della lista", 26 | "Name": "Nome", 27 | "No styles available for this tag": "Non ci sono stili per questo tag", 28 | "Numbers list": "Lista numerata", 29 | "Paste YouTube or Vimeo URL": "Incolla la url di YouTube o di Vimeo", 30 | "Paragraph": "Paragrafo", 31 | "Preformatted": "Preformattato", 32 | "Properties": "Proprietà", 33 | "Redo": "Rifare", 34 | "Remove": "Rimuovi", 35 | "Rotate": "Ruota", 36 | "Styles": "Stili", 37 | "Subheading": "Sottotitolo", 38 | "Table": "Tabella", 39 | "Table body (columns)": "Corpo della tabella (colonne)", 40 | "Table foot": "Piede della tabella", 41 | "Table head": "Intestazione della tabella", 42 | "Table row": "Riga della tabella", 43 | "Text": "Testo", 44 | "Undo": "Annullare", 45 | "Unindent": "Togli indentazione", 46 | "Update table": "Aggiorna tabella", 47 | "Upload": "Carica", 48 | "Value": "Valore", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "I tuoi cambiamenti non sono stati salvati, vuoi perderli realmente?" 51 | } -------------------------------------------------------------------------------- /translations/ko.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "가운데 정렬", 3 | "Align left": "왼쪽으로 정렬", 4 | "Align right": "오른쪽으로 정렬", 5 | "Apply": "적용하기", 6 | "Attributes": "항목들", 7 | "Bold": "굵게", 8 | "Bullet list": "열거 목록", 9 | "Cancel": "취소", 10 | "Clear": "청소", 11 | "Code": "코드", 12 | "Crop marks": "Crop marks", 13 | "Enter a link": "링크 입력", 14 | "Image": "사진", 15 | "Heading": "제목", 16 | "Indent": "들여쓰기", 17 | "Insert": "삽입", 18 | "Insert image": "이미지 삽입하기", 19 | "Insert table": "표 삽입하기", 20 | "Insert video": "동영상 삽입하기", 21 | "Italic": "기울어짐", 22 | "Line break": "줄바꿈", 23 | "Link": "링크", 24 | "List": "목록", 25 | "List item": "목록 항목", 26 | "Name": "이름", 27 | "No styles available for this tag": "이 태그에 적용할 수 있는 스타일이 존재하지 않습니다", 28 | "Numbers list": "숫자 목록", 29 | "Paste YouTube or Vimeo URL": "YouTube 혹은 Vimeo의 URL을 입력해주세요", 30 | "Paragraph": "문단", 31 | "Preformatted": "사전 정의된 텍스트", 32 | "Properties": "속성", 33 | "Redo": "앞으로 되돌리기", 34 | "Remove": "제거", 35 | "Rotate": "회전", 36 | "Styles": "스타일", 37 | "Subheading": "부제", 38 | "Table": "표", 39 | "Table body (columns)": "표 본문 (열)", 40 | "Table foot": "표 하단", 41 | "Table head": "표 상단", 42 | "Table row": "표 행", 43 | "Text": "글자", 44 | "Undo": "이전으로 되돌리기", 45 | "Unindent": "들여쓰기 수정", 46 | "Update table": "표 수정하기", 47 | "Upload": "업로드", 48 | "Value": "값", 49 | "Video": "동영상", 50 | "Your changes have not been saved, do you really want to lose them?": "작성한 항목이 저장되지 않았습니다, 페이지를 빠져나갈 경우 작성한 항목들이 모두 사라집니다." 51 | } 52 | -------------------------------------------------------------------------------- /translations/lp.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Alignway entercay", 3 | "Align left": "Alignway eftlay", 4 | "Align right": "Alignway ightray", 5 | "Apply": "Applyway", 6 | "Attributes": "Attributesway", 7 | "Bold": "Oldbay", 8 | "Bullet list": "Ulletbay istlay", 9 | "Cancel": "Ancelcay", 10 | "Clear": "Earclay", 11 | "Code": "Odecay", 12 | "Crop marks": "Opmarkscray", 13 | "Enter a link": "Enterway away inklay", 14 | "Image": "Imageway", 15 | "Heading": "Eadinghay", 16 | "Indent": "Indentway", 17 | "Insert": "Insertway", 18 | "Insert image": "Insertway imageway", 19 | "Insert table": "Insertway abletay", 20 | "Insert video": "Insertway ideovay", 21 | "Italic": "Italicway", 22 | "Line break": "Inelay eakbray", 23 | "Link": "Inklay", 24 | "List": "Istlay", 25 | "List item": "Istlay itemway", 26 | "Name": "Amenay", 27 | "No styles available for this tag": "Onay ylesstay availableway orfay isthay agtay", 28 | "Numbers list": "Umbersnay istlay", 29 | "Paste YouTube or Vimeo URL": "Astepay YouTube orway Vimeo URL", 30 | "Paragraph": "Aragraphpay", 31 | "Preformatted": "Eformattedpray", 32 | "Properties": "Opertiespray", 33 | "Redo": "Edoray", 34 | "Remove": "Emoveray", 35 | "Rotate": "Otateray", 36 | "Styles": "Ylesstay", 37 | "Subheading": "Ubheadingsay", 38 | "Table": "Abletay", 39 | "Table body (columns)": "Abletay odybay (olumnscay)", 40 | "Table foot": "Abletay ootfay", 41 | "Table head": "Abletay eadhay", 42 | "Table row": "Abletay owray", 43 | "Text": "Exttay", 44 | "Undo": "Undoway", 45 | "Unindent": "Unindentway", 46 | "Update table": "Updateway abletay", 47 | "Upload": "Uploadway", 48 | "Value": "Aluevay", 49 | "Video": "Ideovay", 50 | "Your changes have not been saved, do you really want to lose them?": "Ouryay angeschay avehay otnay eenbay avedsay, oday ouyay eallyray antway otay oselay emthay?" 51 | } -------------------------------------------------------------------------------- /translations/nb.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Midtstill", 3 | "Align left": "Venstrejuster", 4 | "Align right": "Høyrejuster", 5 | "Apply": "Bruk", 6 | "Attributes": "Attributter", 7 | "Bold": "Fet", 8 | "Bullet list": "Punktliste", 9 | "Cancel": "Avbryt", 10 | "Clear": "Fjern", 11 | "Code": "Kode", 12 | "Crop marks": "Beskjæringsmerker", 13 | "Enter a link": "Angi en lenke", 14 | "Image": "Bilde", 15 | "Heading": "Overskrift", 16 | "Indent": "Indentér", 17 | "Insert": "Sett inn", 18 | "Insert image": "Sett inn bilde", 19 | "Insert table": "Sett inn tabell", 20 | "Insert video": "Sett inn video", 21 | "Italic": "Kursiv", 22 | "Line break": "Linjeskift", 23 | "Link": "Lenke", 24 | "List": "Liste", 25 | "List item": "Listeelement", 26 | "Name": "Navn", 27 | "No styles available for this tag": "Ingen stiler er tilgjengelige for denne tagen", 28 | "Numbers list": "Nummerert liste", 29 | "Paste YouTube or Vimeo URL": "Lim inn YouTube eller Vimeo URL", 30 | "Paragraph": "Avsnitt", 31 | "Preformatted": "Formatert", 32 | "Properties": "Egenskaper", 33 | "Redo": "Gjenta", 34 | "Remove": "Fjern", 35 | "Rotate": "Rotér", 36 | "Styles": "Stiler", 37 | "Subheading": "Underoverskrift", 38 | "Table": "Tabell", 39 | "Table body (columns)": "Tabellinnhold (kolonner)", 40 | "Table foot": "Tabellfooter", 41 | "Table head": "Tabellheader", 42 | "Table row": "Tabellrekke", 43 | "Text": "Tekst", 44 | "Undo": "Angre", 45 | "Unindent": "Reduser innrykk", 46 | "Update table": "Oppdater tabell", 47 | "Upload": "Last opp", 48 | "Value": "Verdi", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Dine endringer er ikke lagret, ønsker du virkelig å miste dem?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/nl.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centreren", 3 | "Align left": "Links uitlijnen", 4 | "Align right": "Rechts uitlijnen", 5 | "Apply": "Bevestingen", 6 | "Attributes": "Attributen", 7 | "Bold": "Dikgedrukt", 8 | "Bullet list": "Ongeordende lijst", 9 | "Cancel": "Annuleren", 10 | "Clear": "Wissen", 11 | "Code": "Code", 12 | "Crop marks": "Snijtekens", 13 | "Enter a link": "Voer een link in", 14 | "Image": "Afbeelding", 15 | "Heading": "Titel", 16 | "Indent": "Inspringen", 17 | "Insert": "Invoegen", 18 | "Insert image": "Afbeelding invoegen", 19 | "Insert table": "Tabel invoegen", 20 | "Insert video": "Video invoegen", 21 | "Italic": "Cursief", 22 | "Line break": "Regeleinde", 23 | "Link": "Link", 24 | "List": "Lijst", 25 | "List item": "Lijst element", 26 | "Name": "Naam", 27 | "No styles available for this tag": "Er zijn geen stijlen beschikbaar voor deze tag", 28 | "Numbers list": "Genummerde lijst", 29 | "Paste YouTube or Vimeo URL": "YouTube of Vimeo URL invoegen", 30 | "Paragraph": "Paragraaf", 31 | "Preformatted": "Vooraf geformateerd", 32 | "Properties": "Eigenschappen", 33 | "Redo": "Herdoen", 34 | "Remove": "Verwijderen", 35 | "Rotate": "Draaien", 36 | "Styles": "Stijlen", 37 | "Subheading": "Ondertitel", 38 | "Table": "Tabel", 39 | "Table body (columns)": "Tabelcellen (kolommen)", 40 | "Table foot": "Tabelvoet", 41 | "Table head": "Tabelkop", 42 | "Table row": "Tabelrij", 43 | "Text": "Tekst", 44 | "Undo": "Ongedaan maken", 45 | "Unindent": "Inspring verkleinen", 46 | "Update table": "Tabel updaten", 47 | "Upload": "Uploaden", 48 | "Value": "Waarde", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Uw wijzigen zijn niet opgeslagen, wilt u doorgaan zonder deze op te slaan?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/nn.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Midtstill", 3 | "Align left": "Venstrejuster", 4 | "Align right": "Høgrejuster", 5 | "Apply": "Bruk", 6 | "Attributes": "Attributt", 7 | "Bold": "Feit", 8 | "Bullet list": "Punktliste", 9 | "Cancel": "Avbryt", 10 | "Clear": "Fjern", 11 | "Code": "Kode", 12 | "Crop marks": "Beskjæringsmerke", 13 | "Enter a link": "Angi ei lenke", 14 | "Image": "Bilete", 15 | "Heading": "Overskrift", 16 | "Indent": "Indentér", 17 | "Insert": "Sett inn", 18 | "Insert image": "Sett inn bilete", 19 | "Insert table": "Sett inn tabell", 20 | "Insert video": "Sett inn video", 21 | "Italic": "Kursiv", 22 | "Line break": "Linjeskift", 23 | "Link": "Lenke", 24 | "List": "Liste", 25 | "List item": "Listeelement", 26 | "Name": "Namn", 27 | "No styles available for this tag": "Ingen stilar er tilgjengeleg for denne tagen", 28 | "Numbers list": "Nummerert liste", 29 | "Paste YouTube or Vimeo URL": "Lim inn YouTube eller Vimeo URL", 30 | "Paragraph": "Avsnitt", 31 | "Preformatted": "Formatert", 32 | "Properties": "Eigenskapar", 33 | "Redo": "Gjenta", 34 | "Remove": "Fjern", 35 | "Rotate": "Rotér", 36 | "Styles": "Stilar", 37 | "Subheading": "Underoverskrift", 38 | "Table": "Tabell", 39 | "Table body (columns)": "Tabellinnhold (kolonnar)", 40 | "Table foot": "Tabellfooter", 41 | "Table head": "Tabellheader", 42 | "Table row": "Tabellrekke", 43 | "Text": "Tekst", 44 | "Undo": "Angre", 45 | "Unindent": "Reduser innrykk", 46 | "Update table": "Oppdater tabell", 47 | "Upload": "Last opp", 48 | "Value": "Verdi", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Dine endringar er ikkje lagra, ønsker du verkeleg å miste dei?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/pl.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Wyrównanie do środka", 3 | "Align left": "Wyrównanie do lewej", 4 | "Align right": "Wyrównanie do prawej", 5 | "Apply": "Zastosuj", 6 | "Attributes": "Atrybuty", 7 | "Bold": "Pogrubienie", 8 | "Bullet list": "Lista wypunktowana", 9 | "Cancel": "Anuluj", 10 | "Clear": "Wyczyść", 11 | "Code": "Kod", 12 | "Crop marks": "Linie cięcia", 13 | "Enter a link": "Podaj link", 14 | "Image": "Obraz", 15 | "Heading": "Tytuł", 16 | "Indent": "Wcięcie", 17 | "Insert": "Dodaj", 18 | "Insert image": "Dodaj obraz", 19 | "Insert table": "Dodaj tabelę", 20 | "Insert video": "Dodaj video", 21 | "Italic": "Pochylenie", 22 | "Line break": "Złamanie linii", 23 | "Link": "Link", 24 | "List": "Lista", 25 | "List item": "Element listy", 26 | "Name": "Nazwa", 27 | "No styles available for this tag": "Dla tego elementu nie dodano stylów", 28 | "Numbers list": "Lista numerowana", 29 | "Paste YouTube or Vimeo URL": "Wklej URL z YouTube lub Vimeo", 30 | "Paragraph": "Akapit", 31 | "Preformatted": "Tekst preformatowany", 32 | "Properties": "Właściwości", 33 | "Redo": "Ponów", 34 | "Remove": "Usuń", 35 | "Rotate": "Obróć", 36 | "Styles": "Style", 37 | "Subheading": "Podtytuł", 38 | "Table": "Tabela", 39 | "Table body (columns)": "Zawartość tabeli (kolumny)", 40 | "Table foot": "Stopka tabeli", 41 | "Table head": "Nagłówek tabeli", 42 | "Table row": "Wiersz tabeli", 43 | "Text": "Tekst", 44 | "Undo": "Cofnij", 45 | "Unindent": "Bez wcięcia", 46 | "Update table": "Aktualizuj tabelę", 47 | "Upload": "Wczytaj", 48 | "Value": "Wartość", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Twoje zmiany nie zostały zapisane - czy na pewno chcesz z nich zrezygnować?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/pt-br.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centralizar", 3 | "Align left": "Alinhar à esquerda", 4 | "Align right": "Alinhar à direita", 5 | "Apply": "Aplicar", 6 | "Attributes": "Atributo", 7 | "Bold": "Negrito", 8 | "Bullet list": "Lista com marcadores", 9 | "Cancel": "Cancelar", 10 | "Clear": "Limpar", 11 | "Code": "Código", 12 | "Crop marks": "Margem para recorte", 13 | "Enter a link": "Coloque um link", 14 | "Image": "Imagem", 15 | "Heading": "Título", 16 | "Indent": "Aumentar recuo", 17 | "Insert": "Inserir", 18 | "Insert image": "Inserir imagem", 19 | "Insert table": "Inserir tabela", 20 | "Insert video": "Inserir vídeo", 21 | "Italic": "Itálico", 22 | "Line break": "Quebra de linha", 23 | "Link": "Link", 24 | "List": "Lista", 25 | "List item": "Item da lista", 26 | "Name": "Nome", 27 | "No styles available for this tag": "Não há estilo disponível para esta tag", 28 | "Numbers list": "Lista com números", 29 | "Paste YouTube or Vimeo URL": "Cole a URL do YouTube ou Vimeo", 30 | "Paragraph": "Parágrafo", 31 | "Preformatted": "Pré-formatado", 32 | "Properties": "Propriedades", 33 | "Redo": "Refazer", 34 | "Remove": "Remover", 35 | "Rotate": "Rotacionar", 36 | "Styles": "Estilos", 37 | "Subheading": "Subtítulo", 38 | "Table": "Tabela", 39 | "Table body (columns)": "Corpo da tabela (colunas)", 40 | "Table foot": "Rodapé da tabela", 41 | "Table head": "Cabeçalho da tabela", 42 | "Table row": "Linha da tabela", 43 | "Text": "Texto", 44 | "Undo": "Desfazer", 45 | "Unindent": "Diminuir recuo", 46 | "Update table": "Atualizar tabela", 47 | "Upload": "Enviar", 48 | "Value": "Valor", 49 | "Video": "Vídeo", 50 | "Your changes have not been saved, do you really want to lose them?": "Suas alterações não foram salvas, você realmente quer perdê-las?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/ru.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "По центру", 3 | "Align left": "Слева", 4 | "Align right": "Справа", 5 | "Apply": "Применить", 6 | "Attributes": "Атрибуты", 7 | "Bold": "Полужирный", 8 | "Bullet list": "Маркированный список", 9 | "Cancel": "Отменить", 10 | "Clear": "Очистить", 11 | "Code": "Код", 12 | "Crop marks": "Обрезать", 13 | "Enter a link": "Введите ссылку", 14 | "Image": "Изображение", 15 | "Heading": "Заголовок", 16 | "Indent": "Добавить отступ", 17 | "Insert": "Вставить", 18 | "Insert image": "Вставить изображение", 19 | "Insert table": "Вставить таблицу", 20 | "Insert video": "Вставить видео", 21 | "Italic": "Курсив", 22 | "Line break": "Разрыв строки", 23 | "Link": "Ссылка", 24 | "List": "Список", 25 | "List item": "Элемент списка", 26 | "Name": "Имя", 27 | "No styles available for this tag": "Для этого тега стили недоступны", 28 | "Numbers list": "Нумерованный список", 29 | "Paste YouTube or Vimeo URL": "Вставьте ссылку на ролик с YouTube или Vimeo", 30 | "Paragraph": "Абзац", 31 | "Preformatted": "Форматированный текст", 32 | "Properties": "Свойства", 33 | "Redo": "Повторить", 34 | "Remove": "Удалить", 35 | "Rotate": "Повернуть", 36 | "Styles": "Стили", 37 | "Subheading": "Подзаголовок", 38 | "Table": "Таблица", 39 | "Table body (columns)": "Количество столбцов", 40 | "Table foot": "Подвал таблицы", 41 | "Table head": "Шапка таблицы", 42 | "Table row": "Строка таблицы", 43 | "Text": "Текст", 44 | "Undo": "Отменить", 45 | "Unindent": "Убрать отступ", 46 | "Update table": "Обновить таблицу", 47 | "Upload": "Загрузить", 48 | "Value": "Значение", 49 | "Video": "Видео", 50 | "Your changes have not been saved, do you really want to lose them?": "Ваши изменения не были сохранены, вы уверены, что не хотите их сохранить?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/sv.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Centrera", 3 | "Align left": "Justera vänster", 4 | "Align right": "Justera höger", 5 | "Apply": "Applicera", 6 | "Attributes": "Attribut", 7 | "Bold": "Fet", 8 | "Bullet list": "Punktlista", 9 | "Cancel": "Avbryt", 10 | "Clear": "Rensa", 11 | "Code": "Kod", 12 | "Crop marks": "Skärmärken", 13 | "Enter a link": "Ange en länk", 14 | "Image": "Bild", 15 | "Heading": "Titel", 16 | "Indent": "Dra in", 17 | "Insert": "Lägg till", 18 | "Insert image": "Lägg till bild", 19 | "Insert table": "Lägg till tabell", 20 | "Insert video": "Lägg till video", 21 | "Italic": "Kursiv", 22 | "Line break": "Radbrytning", 23 | "Link": "Länk", 24 | "List": "Lista", 25 | "List item": "Listobjekt", 26 | "Name": "Namn", 27 | "No styles available for this tag": "Det finns ingen stil tillgänglig för denna tag", 28 | "Numbers list": "Numrerad lista", 29 | "Paste YouTube or Vimeo URL": "Klistra in en YouTube eller Vimeo adress", 30 | "Paragraph": "Paragraf", 31 | "Preformatted": "Förformaterad", 32 | "Properties": "Egenskaper", 33 | "Redo": "Gör om", 34 | "Remove": "Ta bort", 35 | "Rotate": "Rotera", 36 | "Styles": "Stilar", 37 | "Subheading": "Undertitel", 38 | "Table": "Tabell", 39 | "Table body (columns)": "Tabell innehåll (kolumner)", 40 | "Table foot": "Tabell fot", 41 | "Table head": "Tabell huvud", 42 | "Table row": "Tabell rad", 43 | "Text": "Text", 44 | "Undo": "Ångra", 45 | "Unindent": "Dra ut", 46 | "Update table": "Uppdatera tabell", 47 | "Upload": "Ladda upp", 48 | "Value": "Värde", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Dina ändringar har inte sparats, är du säker att du vill fortsätta?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/tr.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Ortala", 3 | "Align left": "Sola yasla", 4 | "Align right": "Sağa yasla", 5 | "Apply": "Uygula", 6 | "Attributes": "Özellikler", 7 | "Bold": "Kalın", 8 | "Bullet list": "İşaretli liste", 9 | "Cancel": "İptal", 10 | "Clear": "Temizle", 11 | "Code": "Kod", 12 | "Crop marks": "İşaretleri temizle", 13 | "Enter a link": "Link girin", 14 | "Image": "Resim", 15 | "Heading": "Başlık", 16 | "Indent": "Satırbaşı", 17 | "Insert": "Yerleştir", 18 | "Insert image": "Resim ekle", 19 | "Insert table": "Tablo ekle", 20 | "Insert video": "Video ekle", 21 | "Italic": "Eğik", 22 | "Line break": "Satır sonu", 23 | "Link": "Link", 24 | "List": "Liste", 25 | "List item": "Liste öğesi", 26 | "Name": "İsim", 27 | "No styles available for this tag": "Bu etiket için stil bulunmuyor", 28 | "Numbers list": "Numaralı liste", 29 | "Paste YouTube or Vimeo URL": "YouTube veya Vimeo URL adresi yapıştırın", 30 | "Paragraph": "Paragraf", 31 | "Preformatted": "Önformatlı", 32 | "Properties": "Özellikler", 33 | "Redo": "Yinele", 34 | "Remove": "Kaldır", 35 | "Rotate": "Çevir", 36 | "Styles": "Stiller", 37 | "Subheading": "Alt başlık", 38 | "Table": "Tablo", 39 | "Table body (columns)": "Tablo gövdesi (sütunlar)", 40 | "Table foot": "Tablo altı", 41 | "Table head": "Tablo üstü", 42 | "Table row": "Tablo satırı", 43 | "Text": "Metin", 44 | "Undo": "Geri al", 45 | "Unindent": "Girintisiz", 46 | "Update table": "Tabloyu güncelle", 47 | "Upload": "Yükle", 48 | "Value": "Değer", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Yaptığınız değişiklikler kayıt edilmedi, vazgeçmek istediğinize emin misiniz ?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/uk.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "По центру", 3 | "Align left": "по лівому краю", 4 | "Align right": "По правому краю", 5 | "Apply": "Застосувати", 6 | "Attributes": "Атрибути", 7 | "Bold": "Жирний", 8 | "Bullet list": "Маркований список", 9 | "Cancel": "Скасувати", 10 | "Clear": "Очистити", 11 | "Code": "Код", 12 | "Crop marks": "Обрізати", 13 | "Enter a link": "Вставити посилання", 14 | "Image": "Зображення", 15 | "Heading": "Заголовок", 16 | "Indent": "Додати відступ", 17 | "Insert": "Вставити", 18 | "Insert image": "Вставити зображення", 19 | "Insert table": "Вставити таблицю", 20 | "Insert video": "Вставити відео", 21 | "Italic": "Курсив", 22 | "Line break": "Розрив рядка", 23 | "Link": "Посилання", 24 | "List": "Список", 25 | "List item": "Елемент списку", 26 | "Name": "Ім'я", 27 | "No styles available for this tag": "Для цього тегу не доступні жодні стилі", 28 | "Numbers list": "Нумерований список", 29 | "Paste YouTube or Vimeo URL": "Вставити посилання на YouTube або Vimeo", 30 | "Paragraph": "Абзац", 31 | "Preformatted": "Форматований текст", 32 | "Properties": "Властивості", 33 | "Redo": "Повторити", 34 | "Remove": "Видалити", 35 | "Rotate": "Повернути", 36 | "Styles": "Стилі", 37 | "Subheading": "Підзаголовок", 38 | "Table": "Таблиця", 39 | "Table body (columns)": "Кількість столбців", 40 | "Table foot": "Підвал таблиці", 41 | "Table head": "Шапка таблиці", 42 | "Table row": "Стрічка таблиці", 43 | "Text": "Текст", 44 | "Undo": "Відмінити", 45 | "Unindent": "Забрати відступ", 46 | "Update table": "Оновити таблицю", 47 | "Upload": "Завантажити", 48 | "Value": "Значення", 49 | "Video": "Відео", 50 | "Your changes have not been saved, do you really want to lose them?": "Ваші зміни не були збережені, Ви насправді хочете їх втратити?" 51 | } 52 | -------------------------------------------------------------------------------- /translations/uz.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Markazga", 3 | "Align left": "Chap tomonga", 4 | "Align right": "O‘ng tomonga", 5 | "Apply": "Qo‘llash", 6 | "Attributes": "Atributlar", 7 | "Bold": "Qalin", 8 | "Bullet list": "Belgilangan ro‘yxat", 9 | "Cancel": "Bekor qilish", 10 | "Clear": "Tozalash", 11 | "Code": "Kod", 12 | "Crop marks": "Kesish", 13 | "Enter a link": "Havolani kiriting", 14 | "Image": "Rasm", 15 | "Heading": "Sarlavha", 16 | "Indent": "Bo‘shliq qo‘shish", 17 | "Insert": "Qo‘yish", 18 | "Insert image": "Rasm qo‘yish", 19 | "Insert table": "Jadval qo‘yish", 20 | "Insert video": "Video qo‘yish", 21 | "Italic": "Kursiv", 22 | "Line break": "Qatorni bo‘lish", 23 | "Link": "Havola", 24 | "List": "Ro‘yxat", 25 | "List item": "Ro‘yxat elementi", 26 | "Name": "Ism", 27 | "No styles available for this tag": "Ushbu teg uchun stillar mavjud emas", 28 | "Numbers list": "Raqamli ro‘yxat", 29 | "Paste YouTube or Vimeo URL": "YouTube yoki Vimeo'dan havolani kiriting", 30 | "Paragraph": "Xat boshi", 31 | "Preformatted": "Formatlangan matn", 32 | "Properties": "Xususiyat", 33 | "Redo": "Qaytarish", 34 | "Remove": "O‘chirish", 35 | "Rotate": "Aylantirish", 36 | "Styles": "Stillar", 37 | "Subheading": "Kichik sarlavha", 38 | "Table": "Jadval", 39 | "Table body (columns)": "Ustunlar soni", 40 | "Table foot": "Jadvalning pasti", 41 | "Table head": "Jadvalning boshi", 42 | "Table row": "Jadvalning qatori", 43 | "Text": "Matn", 44 | "Undo": "Orqaga qaytarish", 45 | "Unindent": "Oraliqni o‘chirish’", 46 | "Update table": "Jadvalni yangilash", 47 | "Upload": "Yuklash", 48 | "Value": "Qiymat", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "O‘zgarishlaringiz saqlanmay qoladi. Saqlanmasligiga rozimisiz?" 51 | } -------------------------------------------------------------------------------- /translations/vi.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "Căn giữa", 3 | "Align left": "Căn trái", 4 | "Align right": "Căn phải", 5 | "Apply": "Áp dụng", 6 | "Attributes": "Thuộc tính", 7 | "Bold": "In đậm", 8 | "Bullet list": "Danh sách không theo thứ tự", 9 | "Cancel": "Hủy bỏ", 10 | "Clear": "Dọn sạch", 11 | "Code": "Mã", 12 | "Crop marks": "Cắt xén đánh dấu", 13 | "Enter a link": "Nhập một liên kết", 14 | "Image": "Ảnh", 15 | "Heading": "Tiêu đề", 16 | "Indent": "Thụt lề", 17 | "Insert": "Chèn", 18 | "Insert image": "Chèn ảnh", 19 | "Insert table": "Chèn bảng", 20 | "Insert video": "Chèn video", 21 | "Italic": "In nghiêng", 22 | "Line break": "Ngắt dòng", 23 | "Link": "Liên kết", 24 | "List": "Danh sách", 25 | "List item": "Danh mục", 26 | "Name": "Tên", 27 | "No styles available for this tag": "Không có kiểu dáng nào cho thẻ này", 28 | "Numbers list": "Danh sách theo số thứ tự", 29 | "Paste YouTube or Vimeo URL": "Dán URL Youtube hoặc Vimeo", 30 | "Paragraph": "Đoạn văn bản", 31 | "Preformatted": "Định dạng trước", 32 | "Properties": "Thuộc tính", 33 | "Redo": "Làm lại", 34 | "Remove": "Loại bỏ", 35 | "Rotate": "Xoay", 36 | "Styles": "Kiểu dáng", 37 | "Subheading": "Tiêu đề phụ", 38 | "Table": "Bảng", 39 | "Table body (columns)": "Thân bảng (các cột)", 40 | "Table foot": "Chân bảng", 41 | "Table head": "Tiêu đề bảng", 42 | "Table row": "Hàng của bảng", 43 | "Text": "Văn bản", 44 | "Undo": "Hoàn tác", 45 | "Unindent": "Hủy thụt lề", 46 | "Update table": "Cập nhật bảng", 47 | "Upload": "Tải lên", 48 | "Value": "Giá trị", 49 | "Video": "Video", 50 | "Your changes have not been saved, do you really want to lose them?": "Những thay đổi của bạn chưa được lưu lại, bạn có thực sự muốn mất chúng?" 51 | } -------------------------------------------------------------------------------- /translations/zh-cn.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "居中", 3 | "Align left": "居左", 4 | "Align right": "居右", 5 | "Apply": "确认", 6 | "Attributes": "属性", 7 | "Bold": "加粗", 8 | "Bullet list": "符号列表", 9 | "Cancel": "取消", 10 | "Clear": "清除", 11 | "Code": "代码", 12 | "Crop marks": "裁剪", 13 | "Enter a link": "输入链接", 14 | "Image": "图片", 15 | "Heading": "标题", 16 | "Indent": "缩排", 17 | "Insert": "插入", 18 | "Insert image": "插入图片", 19 | "Insert table": "插入表格", 20 | "Insert video": "插入视频", 21 | "Italic": "斜体", 22 | "Line break": "分割线", 23 | "Link": "链接", 24 | "List": "列表", 25 | "List item": "列表项", 26 | "Name": "名称", 27 | "No styles available for this tag": "此标签没有样式", 28 | "Numbers list": "数字列表", 29 | "Paste YouTube or Vimeo URL": "粘帖YouTube或Vimeo的URL链接", 30 | "Paragraph": "段落", 31 | "Preformatted": "预格式化", 32 | "Properties": "标签", 33 | "Redo": "重做", 34 | "Remove": "删除", 35 | "Rotate": "旋转", 36 | "Styles": "样式", 37 | "Subheading": "子标题", 38 | "Table": "表格", 39 | "Table body (columns)": "表格体（列）", 40 | "Table foot": "表格底", 41 | "Table head": "表格头", 42 | "Table row": "表格行", 43 | "Text": "文本", 44 | "Undo": "撤销", 45 | "Unindent": "取消缩排", 46 | "Update table": "更新表格", 47 | "Upload": "上传", 48 | "Value": "值", 49 | "Video": "视频", 50 | "Your changes have not been saved, do you really want to lose them?": "您的更改还未保存，确定不需要保存吗？" 51 | } -------------------------------------------------------------------------------- /translations/zh-tw.json: -------------------------------------------------------------------------------- 1 | { 2 | "Align center": "置中", 3 | "Align left": "左對齊", 4 | "Align right": "右對齊", 5 | "Apply": "確認", 6 | "Attributes": "屬性", 7 | "Bold": "粗體", 8 | "Bullet list": "符號列表", 9 | "Cancel": "取消", 10 | "Clear": "清除", 11 | "Code": "代碼", 12 | "Crop marks": "裁切", 13 | "Enter a link": "輸入超連結", 14 | "Image": "圖片", 15 | "Heading": "標題", 16 | "Indent": "縮排", 17 | "Insert": "插入", 18 | "Insert image": "插入圖片", 19 | "Insert table": "插入表格", 20 | "Insert video": "插入影片", 21 | "Italic": "斜體", 22 | "Line break": "分割線", 23 | "Link": "超連結", 24 | "List": "列表", 25 | "List item": "列表項目", 26 | "Name": "名稱", 27 | "No styles available for this tag": "此標籤沒有樣式", 28 | "Numbers list": "數字列表", 29 | "Paste YouTube or Vimeo URL": "貼上YouTube或Vimeo的URL連結", 30 | "Paragraph": "段落", 31 | "Preformatted": "預格式化", 32 | "Properties": "性質", 33 | "Redo": "重做", 34 | "Remove": "移除", 35 | "Rotate": "旋轉", 36 | "Styles": "樣式", 37 | "Subheading": "子標題", 38 | "Table": "表格", 39 | "Table body (columns)": "表格內體（列）", 40 | "Table foot": "表格底", 41 | "Table head": "表格頭", 42 | "Table row": "表格行", 43 | "Text": "文本", 44 | "Undo": "撤銷", 45 | "Unindent": "取消縮排", 46 | "Update table": "更新表格", 47 | "Upload": "上傳", 48 | "Value": "值", 49 | "Video": "影片", 50 | "Your changes have not been saved, do you really want to lose them?": "您的更改尚未保存，你真的要放棄更改嗎?" 51 | } --------------------------------------------------------------------------------