├── .gitignore ├── README.md ├── assets ├── bootstrap │ ├── css │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── img │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ └── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js ├── css │ └── ui-lightness │ │ ├── images │ │ ├── ui-bg_diagonals-thick_18_b81900_40x40.png │ │ ├── ui-bg_diagonals-thick_20_666666_40x40.png │ │ ├── ui-bg_flat_10_000000_40x100.png │ │ ├── ui-bg_glass_100_f6f6f6_1x400.png │ │ ├── ui-bg_glass_100_fdf5ce_1x400.png │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ ├── ui-bg_gloss-wave_35_f6a828_500x100.png │ │ ├── ui-bg_highlight-soft_100_eeeeee_1x100.png │ │ ├── ui-bg_highlight-soft_75_ffe45c_1x100.png │ │ ├── ui-icons_222222_256x240.png │ │ ├── ui-icons_228ef1_256x240.png │ │ ├── ui-icons_ef8c08_256x240.png │ │ ├── ui-icons_ffd27a_256x240.png │ │ └── ui-icons_ffffff_256x240.png │ │ └── jquery-ui-1.8.22.custom.css ├── font_awesome │ ├── bootstrap_wo_icons │ │ ├── css │ │ │ ├── bootstrap.css │ │ │ └── bootstrap.min.css │ │ ├── img │ │ │ ├── glyphicons-halflings-white.png │ │ │ └── glyphicons-halflings.png │ │ └── js │ │ │ ├── bootstrap.js │ │ │ └── bootstrap.min.js │ ├── css │ │ ├── font-awesome-ie7.css │ │ └── font-awesome.css │ └── font │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ └── fontawesome-webfont.woff ├── google-code-prettify │ ├── lang-apollo.js │ ├── lang-clj.js │ ├── lang-css.js │ ├── lang-go.js │ ├── lang-hs.js │ ├── lang-lisp.js │ ├── lang-lua.js │ ├── lang-ml.js │ ├── lang-n.js │ ├── lang-proto.js │ ├── lang-scala.js │ ├── lang-sql.js │ ├── lang-tex.js │ ├── lang-vb.js │ ├── lang-vhdl.js │ ├── lang-wiki.js │ ├── lang-xq.js │ ├── lang-yaml.js │ ├── prettify.css │ └── prettify.js ├── js │ ├── angular-1.0.1.js │ ├── angular-1.0.3.js │ ├── angular-1.1.5.js │ ├── angular-bootstrap-1.0.1.js │ ├── angular-mocks.js │ ├── jasmine.js │ ├── jquery-1.7.2.js │ ├── jquery-ui-1.8.22.datepicker.min.js │ └── lodash.min.js └── loading-widget.html ├── examples ├── architecture-angular2 │ └── README.md ├── architecture │ ├── Gruntfile.js │ ├── README.md │ ├── app │ │ ├── css │ │ │ └── app.css │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ └── fontawesome-webfont.woff │ │ ├── images │ │ │ └── loading.gif │ │ ├── index.html │ │ ├── index.html.tmpl │ │ ├── index_mock.html │ │ ├── js │ │ │ ├── app.js │ │ │ ├── dal │ │ │ │ ├── api.js │ │ │ │ ├── entitites │ │ │ │ │ └── user.js │ │ │ │ ├── fake │ │ │ │ │ └── user.js │ │ │ │ └── rest │ │ │ │ │ └── user.js │ │ │ ├── lib │ │ │ │ └── ui │ │ │ │ │ ├── dialog.js │ │ │ │ │ ├── pagination.js │ │ │ │ │ ├── templates │ │ │ │ │ ├── message-box.html │ │ │ │ │ ├── message-box.html.js │ │ │ │ │ ├── pagination.html │ │ │ │ │ └── pagination.html.js │ │ │ │ │ └── transition.js │ │ │ └── pages │ │ │ │ ├── admin │ │ │ │ ├── groups │ │ │ │ │ └── list.js │ │ │ │ ├── index.js │ │ │ │ └── users │ │ │ │ │ └── list.js │ │ │ │ └── pages.js │ │ ├── less │ │ │ ├── admin │ │ │ │ ├── index.less │ │ │ │ └── users │ │ │ │ │ └── list.less │ │ │ ├── app.less │ │ │ ├── bootstrap │ │ │ │ ├── accordion.less │ │ │ │ ├── alerts.less │ │ │ │ ├── bootstrap.less │ │ │ │ ├── breadcrumbs.less │ │ │ │ ├── button-groups.less │ │ │ │ ├── buttons.less │ │ │ │ ├── carousel.less │ │ │ │ ├── close.less │ │ │ │ ├── code.less │ │ │ │ ├── component-animations.less │ │ │ │ ├── dropdowns.less │ │ │ │ ├── forms.less │ │ │ │ ├── grid.less │ │ │ │ ├── hero-unit.less │ │ │ │ ├── labels-badges.less │ │ │ │ ├── layouts.less │ │ │ │ ├── media.less │ │ │ │ ├── mixins.less │ │ │ │ ├── modals.less │ │ │ │ ├── navbar.less │ │ │ │ ├── navs.less │ │ │ │ ├── pager.less │ │ │ │ ├── pagination.less │ │ │ │ ├── popovers.less │ │ │ │ ├── progress-bars.less │ │ │ │ ├── reset.less │ │ │ │ ├── responsive-1200px-min.less │ │ │ │ ├── responsive-767px-max.less │ │ │ │ ├── responsive-768px-979px.less │ │ │ │ ├── responsive-navbar.less │ │ │ │ ├── responsive-utilities.less │ │ │ │ ├── responsive.less │ │ │ │ ├── scaffolding.less │ │ │ │ ├── sprites.less │ │ │ │ ├── tables.less │ │ │ │ ├── thumbnails.less │ │ │ │ ├── tooltip.less │ │ │ │ ├── type.less │ │ │ │ ├── utilities.less │ │ │ │ ├── variables.less │ │ │ │ └── wells.less │ │ │ └── font-awesome │ │ │ │ ├── bootstrap.less │ │ │ │ ├── core.less │ │ │ │ ├── extras.less │ │ │ │ ├── font-awesome-ie7.less │ │ │ │ ├── font-awesome.less │ │ │ │ ├── icons.less │ │ │ │ ├── mixins.less │ │ │ │ ├── path.less │ │ │ │ └── variables.less │ │ ├── lib │ │ │ ├── angular-route-segment.js │ │ │ └── lodash.min.js │ │ └── views │ │ │ └── admin │ │ │ ├── groups │ │ │ └── list.html │ │ │ ├── index.html │ │ │ └── users │ │ │ └── list.html │ ├── config │ │ └── karma.conf.js │ ├── docs │ │ └── arch.png │ ├── junit.xml │ ├── package.json │ └── test │ │ ├── lib │ │ ├── angular │ │ │ ├── angular-cookies.js │ │ │ ├── angular-loader.js │ │ │ ├── angular-mobile.js │ │ │ ├── angular-mocks.js │ │ │ ├── angular-resource.js │ │ │ ├── angular-sanitize.js │ │ │ ├── angular.js │ │ │ └── version.txt │ │ └── helpers.js │ │ └── unit │ │ ├── dal │ │ ├── entity │ │ │ └── user.spec.js │ │ └── fake │ │ │ └── user.spec.js │ │ └── pages │ │ └── admin │ │ └── users │ │ └── list.spec.js ├── common-resolve │ └── index.html ├── promises │ ├── Gruntfile.js │ ├── karma.conf.js │ ├── package.json │ └── promises.spec.js └── validation │ └── index.html ├── index.html ├── ng-if ├── index.html └── ng-if.js ├── tb-tooltip ├── index.html └── tb-tooltip.js ├── ui-alerts ├── index.html └── ui-alerts.js ├── ui-checkbox ├── css │ └── ui-checkbox.css ├── index.html └── ui-checkbox.js ├── ui-checkboxgroup ├── css │ └── ui-checkboxgroup.css ├── index.html └── ui-checkboxgroup.js ├── ui-conditional-attributes ├── index.html └── ui-conditional-attributes.js ├── ui-datetime ├── css │ └── ui-datetime.css ├── index.html └── ui-datetime.js ├── ui-equal-to ├── index.html └── ui-equal-to.js ├── ui-grid ├── index.html └── ui-grid.js ├── ui-isolated-form ├── index.html └── ui-isolated-form.js ├── ui-length-limit ├── index.html └── ui-length-limit.js ├── ui-multicombo ├── css │ ├── ui-multicombo-sprite.png │ └── ui-multicombo.css ├── index.html └── ui-multicombo.js ├── ui-pagination ├── index.html └── ui-pagination.js ├── ui-rate ├── css │ └── ui-rate.css ├── index.html └── ui-rate.js ├── ui-responsive-width ├── index.html └── ui-responsive-width.js └── ui-source ├── index.html └── ui-source.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .idea/* 3 | *node_modules* 4 | *test-results.xml 5 | mongoose* 6 | examples/architecture-angular2/typings/* 7 | !examples/architecture-angular2/typings/tsd.d.ts 8 | examples/architecture-angular2/app/index*.html 9 | examples/architecture-angular2/app/js/* 10 | examples/architecture-angular2/app/css/* 11 | examples/architecture-angular2/app/fonts/bootstrap/* 12 | examples/architecture-angular2/app/sass/bootstrap/* 13 | examples/architecture-angular2/app/ts/config.ts 14 | examples/architecture-angular2/tsd.json 15 | examples/architecture-angular2/dist/* 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular_experiments 2 | =================== 3 | 4 | My experiments with Angular JS and 2.0 5 | 6 | [Full list with demos](http://andreev-artem.github.com/angular_experiments/index.html) 7 | 8 | All code from this repo can be used under MIT License. -------------------------------------------------------------------------------- /assets/bootstrap/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/bootstrap/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /assets/bootstrap/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/bootstrap/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-icons_228ef1_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-icons_228ef1_256x240.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-icons_ef8c08_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-icons_ef8c08_256x240.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-icons_ffd27a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-icons_ffd27a_256x240.png -------------------------------------------------------------------------------- /assets/css/ui-lightness/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/css/ui-lightness/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /assets/font_awesome/bootstrap_wo_icons/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/font_awesome/bootstrap_wo_icons/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /assets/font_awesome/bootstrap_wo_icons/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/font_awesome/bootstrap_wo_icons/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /assets/font_awesome/font/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/font_awesome/font/fontawesome-webfont.eot -------------------------------------------------------------------------------- /assets/font_awesome/font/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/font_awesome/font/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /assets/font_awesome/font/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/font_awesome/font/fontawesome-webfont.woff -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-apollo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-apollo.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-clj.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (C) 2011 Google Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | var a=null; 17 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^[([{]+/,a,"([{"],["clo",/^[)\]}]+/,a,")]}"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/,a], 18 | ["typ",/^:[\dA-Za-z-]+/]]),["clj"]); 19 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", 2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-go.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-go.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-hs.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t-\r ]+/,null,"\t\n \r "],["str",/^"(?:[^\n\f\r"\\]|\\[\S\s])*(?:"|$)/,null,'"'],["str",/^'(?:[^\n\f\r'\\]|\\[^&])'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:--+[^\n\f\r]*|{-(?:[^-]|-+[^}-])*-})/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^\d'A-Za-z]|$)/, 2 | null],["pln",/^(?:[A-Z][\w']*\.)*[A-Za-z][\w']*/],["pun",/^[^\d\t-\r "'A-Za-z]+/]]),["hs"]); 3 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-lisp.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(+/,a,"("],["clo",/^\)+/,a,")"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,a], 3 | ["lit",/^[+-]?(?:[#0]x[\da-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[de][+-]?\d+)?)/i],["lit",/^'(?:-*(?:\w|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?)?/],["pln",/^-*(?:[_a-z]|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?/i],["pun",/^[^\w\t\n\r "'-);\\\xa0]+/]]),["cl","el","lisp","scm"]); 4 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-lua.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-lua.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-ml.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-ml.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-n.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["str",/^(?:'(?:[^\n\r'\\]|\\.)*'|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,a,'"'],["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,a,"#"],["pln",/^\s+/,a," \r\n\t\xa0"]],[["str",/^@"(?:[^"]|"")*(?:"|$)/,a],["str",/^<#[^#>]*(?:#>|$)/,a],["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,a],["com",/^\/\/[^\n\r]*/,a],["com",/^\/\*[\S\s]*?(?:\*\/|$)/, 3 | a],["kwd",/^(?:abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield)\b/, 4 | a],["typ",/^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/,a],["lit",/^@[$_a-z][\w$@]*/i,a],["typ",/^@[A-Z]+[a-z][\w$@]*/,a],["pln",/^'?[$_a-z][\w$@]*/i,a],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,a,"0123456789"],["pun",/^.[^\s\w"-$'./@`]*/,a]]),["n","nemerle"]); 5 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-proto.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.sourceDecorator({keywords:"bytes,default,double,enum,extend,extensions,false,group,import,max,message,option,optional,package,repeated,required,returns,rpc,service,syntax,to,true",types:/^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/,cStyleComments:!0}),["proto"]); 2 | -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-scala.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-scala.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-sql.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-sql.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-tex.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-tex.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-vb.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-vb.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-vhdl.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-vhdl.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-wiki.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/assets/google-code-prettify/lang-wiki.js -------------------------------------------------------------------------------- /assets/google-code-prettify/lang-yaml.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:>?|]+/,a,":|>?"],["dec",/^%(?:YAML|TAG)[^\n\r#]+/,a,"%"],["typ",/^&\S+/,a,"&"],["typ",/^!\S*/,a,"!"],["str",/^"(?:[^"\\]|\\.)*(?:"|$)/,a,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,a,"'"],["com",/^#[^\n\r]*/,a,"#"],["pln",/^\s+/,a," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\n\r]|$)/],["pun",/^-/],["kwd",/^\w+:[\n\r ]/],["pln",/^\w+/]]),["yaml","yml"]); 3 | -------------------------------------------------------------------------------- /assets/google-code-prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .com { color: #93a1a1; } 2 | .lit { color: #195f91; } 3 | .pun, .opn, .clo { color: #93a1a1; } 4 | .fun { color: #dc322f; } 5 | .str, .atv { color: #D14; } 6 | .kwd, .prettyprint .tag { color: #1e347b; } 7 | .typ, .atn, .dec, .var { color: teal; } 8 | .pln { color: #48484c; } 9 | 10 | .prettyprint { 11 | padding: 8px; 12 | background-color: #f7f7f9; 13 | border: 1px solid #e1e1e8; 14 | } 15 | .prettyprint.linenums { 16 | -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 17 | -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 18 | box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 19 | } 20 | 21 | /* Specify class=linenums on a pre to get line numbering */ 22 | ol.linenums { 23 | margin: 0 0 0 33px; /* IE indents via margin-left */ 24 | } 25 | ol.linenums li { 26 | padding-left: 12px; 27 | color: #bebec5; 28 | line-height: 20px; 29 | text-shadow: 0 1px 0 #fff; 30 | } -------------------------------------------------------------------------------- /assets/js/angular-bootstrap-1.0.1.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license AngularJS v1.0.1 3 | * (c) 2010-2012 Google, Inc. http://angularjs.org 4 | * License: MIT 5 | */ 6 | (function(window, angular, undefined) { 7 | 'use strict'; 8 | 9 | var directive = {}; 10 | 11 | directive.dropdownToggle = 12 | ['$document', '$location', '$window', 13 | function ($document, $location, $window) { 14 | var openElement = null, close; 15 | return { 16 | restrict: 'C', 17 | link: function(scope, element, attrs) { 18 | scope.$watch(function(){return $location.path();}, function() { 19 | close && close(); 20 | }); 21 | 22 | element.parent().bind('click', function(event) { 23 | close && close(); 24 | }); 25 | 26 | element.bind('click', function(event) { 27 | event.preventDefault(); 28 | event.stopPropagation(); 29 | 30 | var iWasOpen = false; 31 | 32 | if (openElement) { 33 | iWasOpen = openElement === element; 34 | close(); 35 | } 36 | 37 | if (!iWasOpen){ 38 | element.parent().addClass('open'); 39 | openElement = element; 40 | 41 | close = function (event) { 42 | event && event.preventDefault(); 43 | event && event.stopPropagation(); 44 | $document.unbind('click', close); 45 | element.parent().removeClass('open'); 46 | close = null; 47 | openElement = null; 48 | } 49 | 50 | $document.bind('click', close); 51 | } 52 | }); 53 | } 54 | }; 55 | }]; 56 | 57 | 58 | directive.tabbable = function() { 59 | return { 60 | restrict: 'C', 61 | compile: function(element) { 62 | var navTabs = angular.element(''), 63 | tabContent = angular.element('
'); 64 | 65 | tabContent.append(element.contents()); 66 | element.append(navTabs).append(tabContent); 67 | }, 68 | controller: ['$scope', '$element', function($scope, $element) { 69 | var navTabs = $element.contents().eq(0), 70 | ngModel = $element.controller('ngModel') || {}, 71 | tabs = [], 72 | selectedTab; 73 | 74 | ngModel.$render = function() { 75 | var $viewValue = this.$viewValue; 76 | 77 | if (selectedTab ? (selectedTab.value != $viewValue) : $viewValue) { 78 | if(selectedTab) { 79 | selectedTab.paneElement.removeClass('active'); 80 | selectedTab.tabElement.removeClass('active'); 81 | selectedTab = null; 82 | } 83 | if($viewValue) { 84 | for(var i = 0, ii = tabs.length; i < ii; i++) { 85 | if ($viewValue == tabs[i].value) { 86 | selectedTab = tabs[i]; 87 | break; 88 | } 89 | } 90 | if (selectedTab) { 91 | selectedTab.paneElement.addClass('active'); 92 | selectedTab.tabElement.addClass('active'); 93 | } 94 | } 95 | 96 | } 97 | }; 98 | 99 | this.addPane = function(element, attr) { 100 | var li = angular.element('
    • '), 101 | a = li.find('a'), 102 | tab = { 103 | paneElement: element, 104 | paneAttrs: attr, 105 | tabElement: li 106 | }; 107 | 108 | tabs.push(tab); 109 | 110 | attr.$observe('value', update)(); 111 | attr.$observe('title', function(){ update(); a.text(tab.title); })(); 112 | 113 | function update() { 114 | tab.title = attr.title; 115 | tab.value = attr.value || attr.title; 116 | if (!ngModel.$setViewValue && (!ngModel.$viewValue || tab == selectedTab)) { 117 | // we are not part of angular 118 | ngModel.$viewValue = tab.value; 119 | } 120 | ngModel.$render(); 121 | } 122 | 123 | navTabs.append(li); 124 | li.bind('click', function(event) { 125 | event.preventDefault(); 126 | event.stopPropagation(); 127 | if (ngModel.$setViewValue) { 128 | $scope.$apply(function() { 129 | ngModel.$setViewValue(tab.value); 130 | ngModel.$render(); 131 | }); 132 | } else { 133 | // we are not part of angular 134 | ngModel.$viewValue = tab.value; 135 | ngModel.$render(); 136 | } 137 | }); 138 | 139 | return function() { 140 | tab.tabElement.remove(); 141 | for(var i = 0, ii = tabs.length; i < ii; i++ ) { 142 | if (tab == tabs[i]) { 143 | tabs.splice(i, 1); 144 | } 145 | } 146 | }; 147 | } 148 | }] 149 | }; 150 | }; 151 | 152 | 153 | directive.tabPane = function() { 154 | return { 155 | require: '^tabbable', 156 | restrict: 'C', 157 | link: function(scope, element, attrs, tabsCtrl) { 158 | element.bind('$remove', tabsCtrl.addPane(element, attrs)); 159 | } 160 | }; 161 | }; 162 | 163 | 164 | angular.module('bootstrap', []).directive(directive); 165 | 166 | })(window, window.angular); 167 | -------------------------------------------------------------------------------- /assets/loading-widget.html: -------------------------------------------------------------------------------- 1 | 184 |
    185 |
    186 |
    187 |
    188 |
    189 |
    190 |
    191 |
    192 |
    193 |
    194 |
    195 |
    196 |
    197 |
    198 |
    199 |
    200 |
    201 |
    -------------------------------------------------------------------------------- /examples/architecture-angular2/README.md: -------------------------------------------------------------------------------- 1 | Moved to https://github.com/andreev-artem/angular2-architecture-example -------------------------------------------------------------------------------- /examples/architecture/README.md: -------------------------------------------------------------------------------- 1 | # OUTDATED 2 | 3 | # Example of AngularJS app architecture 4 | 5 | It contains very limited amount of very simple code to illustrate the general approach to the building of multi-layered application. [Demo](http://andreev-artem.github.io/angular_experiments/examples/architecture/app/index_mock.html#/admin/users) - nothing interesting regarding to UI but it works. 6 | 7 | Similar (but more complex) architecture was used in two real-life big applications. 8 | 9 | It is not a silver bullet. Some names and directory hierarchy are debatable (we used slightly other names and structure). 10 | You should consider such architecture as a starting point for your own architecture of your app. 11 | 12 | **Credits**: we wouldn't have such architecture without our Head Javascript Developer [Artem Chivchalov](https://github.com/artch). 13 | 14 | ## Structure 15 | 16 | * **app** 17 | * **css** - contains auto generated css-file for yor less styles 18 | * **fonts** - contains fonts for icons, etc 19 | * **images** 20 | * **js** 21 | * **dal** - Data Access Layer 22 | * **entities** - business objects of your app. Here you can add caching logic, translation from server-side models to client-side and back, validation logic, etc. 23 | * **fake** - replacement for REST API layer with fake data. For e2e tests, prof-of-concept implementations, etc. 24 | * **rest** - REST API layer which will be used by your business objects. Common rule: "one endpoint - one method". Here you can add parameters and responses preprocessing, common errors handling, etc. Also it can be seen as a documentation of API. 25 | * ***api.js*** - abstraction of the HTTP/AJAX calls. Here you can add raw-level errors handling, some common settings (withCredentials, apiUrl, etc), some common parameters (ex: rformat), additional methods that are not in $http (ex: postFile using XMLHttpRequest2) etc. 26 | * **lib** - common non-business logic of your app 27 | * **directives** - non-UI directives (without templates). 28 | * **filters** 29 | * **ui** - widgets/components with UI part. 30 | * **templates** - templates for widgets/components which will be processed using html2js Grunt task. 31 | * **pages** - business logic of your pages (controllers, specific services, directives, etc). Take a look deeper for organization of multi-layered pages using tree-like nested views and controllers hierarchies. 32 | * ***app.js*** - setup of base app with real API calls and mocked app with fake data. 33 | * **less** 34 | * **lib** - external libs and frameworks. 35 | * **views** - html templates for routes or segments. 36 | * **config** - Karma config, app-specific configs (ex: dev and prod urls), etc. 37 | * **test** - unit and e2e tests + libs and Jasmine helpers. 38 | * ***Gruntfile.js*** - watch, html2js, karma and any other tasks which you want to use to automate your workflows. 39 | 40 | ## Simple diagram for the implemented example 41 | 42 | ![App diagram](https://raw.github.com/andreev-artem/angular_experiments/master/examples/architecture/docs/arch.png) -------------------------------------------------------------------------------- /examples/architecture/app/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /examples/architecture/app/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /examples/architecture/app/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /examples/architecture/app/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /examples/architecture/app/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/images/loading.gif -------------------------------------------------------------------------------- /examples/architecture/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularJS app architecture example 6 | 7 | 8 | 9 |
    10 | 11 | 21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /examples/architecture/app/index.html.tmpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularJS app architecture example 6 | 7 | 8 | 9 |
    10 | 11 | 21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 | 28 | 29 | 30 | 31 | <%=scripts%> 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/architecture/app/index_mock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularJS app architecture example 6 | 7 | 8 | 9 |
    10 | 11 | 21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /examples/architecture/app/js/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * 5 | * Real application 6 | * 7 | * Requirements list contains 'app.pages' (high level business logic of our pages) and 8 | * modules which is used by index.html 9 | * 10 | */ 11 | angular.module('app', ['app.pages']) 12 | 13 | .config(function($routeSegmentProvider, $dialogProvider, ApiProvider){ 14 | $routeSegmentProvider.options.autoLoadTemplates = true; 15 | $routeSegmentProvider.options.strictMode = true; 16 | 17 | $dialogProvider.options({modalFade: true}); 18 | 19 | ApiProvider.options.apiUrl = 'http://path/to/my/api'; 20 | }) 21 | 22 | .run(function($rootScope, $routeSegment){ 23 | $rootScope.routeSegment = $routeSegment; 24 | }); 25 | 26 | 27 | /** 28 | * 29 | * Mocked mode of application 30 | * 31 | */ 32 | angular.module('app-mocked', ['ngMockE2E', 33 | 'view-segment', 34 | 'app', 35 | 'app.dal.fake.user']) 36 | 37 | .config(function($provide) { 38 | $provide.factory('UserApi', function(UserFakeApi){ return UserFakeApi }); 39 | }) 40 | 41 | .run(function($httpBackend) { 42 | $httpBackend.whenGET(/views\/.*/).passThrough(); 43 | }); 44 | -------------------------------------------------------------------------------- /examples/architecture/app/js/dal/api.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.dal.api', []) 4 | 5 | .provider('Api', function(){ 6 | 7 | var options = this.options = { 8 | apiUrl: '' 9 | }; 10 | 11 | this.$get = function($http, $q, $rootScope) { 12 | 13 | var Api = {}; 14 | 15 | /** 16 | * Some common error handler 17 | * 18 | * @param response 19 | * @returns {Promise} 20 | */ 21 | var errorHandler = function(response) { 22 | return $q.reject(response); 23 | }; 24 | 25 | /** 26 | * Generic GET method call 27 | * @param name 28 | * @param {Object} [params] 29 | * @returns {Promise} 30 | */ 31 | Api.get = function(name, params) { 32 | return $http({ 33 | method: 'GET', 34 | url: options.apiUrl + name, 35 | params: params, 36 | withCredentials: true 37 | }).then(null, errorHandler); 38 | }; 39 | 40 | /** 41 | * Generic POST method call 42 | * @param name 43 | * @param params 44 | * @returns {Promise} 45 | */ 46 | Api.post = function(name, params) { 47 | return $http.post(options.apiUrl + name, params, {withCredentials: true}).then(null, errorHandler); 48 | }; 49 | 50 | /** 51 | * Generic DELETE method call 52 | * @param name 53 | * @param params 54 | * @returns {Promise} 55 | */ 56 | Api.delete = function(name, params) { 57 | return $http.delete(options.apiUrl + name, {withCredentials: true, params: params}).then(null,errorHandler); 58 | }; 59 | 60 | /** 61 | * Generic PUT method call 62 | * @param name 63 | * @param params 64 | * @returns HttpPromise 65 | */ 66 | Api.put = function(name, params) { 67 | return $http.put(options.apiUrl+name, params, {withCredentials: true}).then(null,errorHandler); 68 | }; 69 | 70 | /** 71 | * Generic method for sending a file 72 | * 73 | * @param name 74 | * @param file 75 | * @returns {Promise} 76 | */ 77 | Api.postFile = function(name, file) { 78 | var deferred = $q.defer(); 79 | 80 | var form = new FormData(); 81 | form.append('file', file); 82 | 83 | var xhr = new XMLHttpRequest(); 84 | xhr.open('POST', options.apiUrl + name, true); 85 | xhr.onload = function(e) { 86 | if (e.target.status == 200) { 87 | deferred.resolve(); 88 | } else { 89 | deferred.reject(); 90 | } 91 | if (!$rootScope.$$phase) $rootScope.$apply(); 92 | }; 93 | xhr.send(form); 94 | 95 | return deferred.promise; 96 | }; 97 | 98 | return Api; 99 | }; 100 | }); -------------------------------------------------------------------------------- /examples/architecture/app/js/dal/entitites/user.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.dal.entities.user', ['app.dal.rest.user']) 4 | 5 | /** 6 | * 7 | * Too simple example of entity. 8 | * Different caching strategies (using memory, localstorage, etc) can be added. 9 | * More params/responses handling can be used. 10 | * 11 | */ 12 | .factory('User', function(UserApi){ 13 | 14 | var User = function(data) { 15 | angular.extend(this, data); 16 | 17 | // any processing logic: parse dates, etc 18 | }; 19 | 20 | /** 21 | * Returns humanized user's full name 22 | * 23 | * @returns {string} 24 | */ 25 | User.prototype.getFullName = function(){ 26 | var names = []; 27 | if (this.firstName && this.firstName.length > 0) { 28 | names.push(this.firstName); 29 | } 30 | if (this.middleName && this.middleName.length > 0) { 31 | names.push(this.middleName); 32 | } 33 | if (this.lastName && this.lastName.length > 0) { 34 | names.push(this.lastName); 35 | } 36 | return names.join(' '); 37 | }; 38 | 39 | /** 40 | * 41 | * @param {Number} id 42 | * @returns {Promise} 43 | */ 44 | User.get = function(id){ 45 | return UserApi.get(id).then(function(userData){ 46 | return new User(userData); 47 | }) 48 | }; 49 | 50 | /** 51 | * 52 | * @param {Object} [pagination] 53 | * @param {(Number|undefined)} pagination.page 54 | * @param {(Number|undefined)} pagination.perPage 55 | * @returns {Promise} 56 | */ 57 | User.getAll = function(pagination) { 58 | var params = { 59 | page: pagination.page || 1, 60 | limit: pagination.perPage 61 | }; 62 | 63 | return UserApi.query(params).then(function (response) { 64 | var users = _.collect(response.data, function(u){ return new User(u); }); 65 | return { 66 | list: users, 67 | total: response.total 68 | }; 69 | }); 70 | }; 71 | 72 | /** 73 | * 74 | * @returns {Promise} 75 | */ 76 | User.prototype.create = function() { 77 | var self = this; 78 | 79 | return UserApi.create(this).then(function(data){ 80 | angular.extend(self, data); 81 | return self; 82 | }); 83 | }; 84 | 85 | /** 86 | * 87 | * @returns {Promise} 88 | */ 89 | User.prototype.save = function() { 90 | var self = this; 91 | 92 | return UserApi.update(this).then(function(data){ 93 | angular.extend(self, data); 94 | return self; 95 | }); 96 | }; 97 | 98 | /** 99 | * 100 | * @returns {Promise} 101 | */ 102 | User.prototype.remove = function() { 103 | var self = this; 104 | 105 | return UserApi.remove(this.id); 106 | }; 107 | 108 | 109 | return User; 110 | }); -------------------------------------------------------------------------------- /examples/architecture/app/js/dal/rest/user.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.dal.rest.user', ['app.dal.api']) 4 | 5 | /** 6 | * 7 | * Too simple example with CRUD methods only. 8 | * More complex app can contain additional specific methods. 9 | * Also every method can have additional params handlers, etc. 10 | * Good place for API's documenting 11 | * 12 | * One common rule: "one endpoint - one method" 13 | * 14 | */ 15 | .factory('UserApi', function($q, Api){ 16 | var UserApi = {}; 17 | 18 | /** 19 | * 20 | * @param {Number} id 21 | * @returns {Promise} 22 | */ 23 | UserApi.get = function(id){ 24 | return Api.get('/users/' + id).then( 25 | function(response){ 26 | return response.data.result; 27 | }, 28 | function(response) { 29 | return $q.reject(response.data.error_code); 30 | } 31 | ); 32 | }; 33 | 34 | /** 35 | * 36 | * @param {Object} [params] 37 | * @param {Number} [params.page] 38 | * @param {Number} [params.limit] 39 | * @returns {Promise} 40 | */ 41 | UserApi.query = function(params){ 42 | return Api.get('/users/', params || {}).then( 43 | function(response){ 44 | return response.data.result; 45 | }, 46 | function(response) { 47 | return $q.reject(response.data.error_code); 48 | } 49 | ); 50 | }; 51 | 52 | /** 53 | * 54 | * @param {object} data 55 | * @returns {Promise} 56 | */ 57 | UserApi.create = function(data){ 58 | return Api.post('/users/', data).then( 59 | function(response){ 60 | return response.data.result; 61 | }, 62 | function(response) { 63 | return $q.reject(response.data.error_code); 64 | } 65 | ); 66 | }; 67 | 68 | /** 69 | * 70 | * @param {object} data 71 | * @returns {Promise} 72 | */ 73 | UserApi.update = function(data){ 74 | return Api.put('/users/' + data.id, data).then( 75 | function(response){ 76 | return response.data.result; 77 | }, 78 | function(response) { 79 | return $q.reject(response.data.error_code); 80 | } 81 | ); 82 | }; 83 | 84 | /** 85 | * 86 | * @param {Number} id 87 | * @returns {Promise} 88 | */ 89 | UserApi.remove = function(id){ 90 | return Api['delete']('/users/' + id).then( 91 | function(response){ 92 | return response.data.result; 93 | }, 94 | function(response) { 95 | return $q.reject(response.data.error_code); 96 | } 97 | ); 98 | }; 99 | 100 | return UserApi; 101 | }); -------------------------------------------------------------------------------- /examples/architecture/app/js/lib/ui/templates/message-box.html: -------------------------------------------------------------------------------- 1 |
    2 |

    {{ title }}

    3 |
    4 |
    5 |

    {{ message }}

    6 |
    7 |
    8 | 11 |
    -------------------------------------------------------------------------------- /examples/architecture/app/js/lib/ui/templates/message-box.html.js: -------------------------------------------------------------------------------- 1 | angular.module("js/lib/ui/templates/message-box.html", []).run(function($templateCache) { 2 | $templateCache.put("js/lib/ui/templates/message-box.html", 3 | "
    " + 4 | "

    {{ title }}

    " + 5 | "
    " + 6 | "
    " + 7 | "

    {{ message }}

    " + 8 | "
    " + 9 | "
    " + 10 | " " + 13 | "
    "); 14 | }); 15 | -------------------------------------------------------------------------------- /examples/architecture/app/js/lib/ui/templates/pagination.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /examples/architecture/app/js/lib/ui/templates/pagination.html.js: -------------------------------------------------------------------------------- 1 | angular.module("js/lib/ui/templates/pagination.html", []).run(function($templateCache) { 2 | $templateCache.put("js/lib/ui/templates/pagination.html", 3 | "
    " + 6 | "
    " + 7 | ""); 8 | }); 9 | -------------------------------------------------------------------------------- /examples/architecture/app/js/lib/ui/transition.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/angular-ui/bootstrap/blob/master/src/transition/transition.js 3 | */ 4 | 5 | angular.module('app.lib.ui.transition', []) 6 | 7 | /** 8 | * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete. 9 | * @param {DOMElement} element The DOMElement that will be animated. 10 | * @param {string|object|function} trigger The thing that will cause the transition to start: 11 | * - As a string, it represents the css class to be added to the element. 12 | * - As an object, it represents a hash of style attributes to be applied to the element. 13 | * - As a function, it represents a function to be called that will cause the transition to occur. 14 | * @return {Promise} A promise that is resolved when the transition finishes. 15 | */ 16 | .factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) { 17 | 18 | var $transition = function(element, trigger, options) { 19 | options = options || {}; 20 | var deferred = $q.defer(); 21 | var endEventName = $transition[options.animation ? "animationEndEventName" : "transitionEndEventName"]; 22 | 23 | var transitionEndHandler = function(event) { 24 | $rootScope.$apply(function() { 25 | element.unbind(endEventName, transitionEndHandler); 26 | deferred.resolve(element); 27 | }); 28 | }; 29 | 30 | if (endEventName) { 31 | element.bind(endEventName, transitionEndHandler); 32 | } 33 | 34 | // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur 35 | $timeout(function() { 36 | if ( angular.isString(trigger) ) { 37 | element.addClass(trigger); 38 | } else if ( angular.isFunction(trigger) ) { 39 | trigger(element); 40 | } else if ( angular.isObject(trigger) ) { 41 | element.css(trigger); 42 | } 43 | //If browser does not support transitions, instantly resolve 44 | if ( !endEventName ) { 45 | deferred.resolve(element); 46 | } 47 | }); 48 | 49 | // Add our custom cancel function to the promise that is returned 50 | // We can call this if we are about to run a new transition, which we know will prevent this transition from ending, 51 | // i.e. it will therefore never raise a transitionEnd event for that transition 52 | deferred.promise.cancel = function() { 53 | if ( endEventName ) { 54 | element.unbind(endEventName, transitionEndHandler); 55 | } 56 | deferred.reject('Transition cancelled'); 57 | }; 58 | 59 | return deferred.promise; 60 | }; 61 | 62 | // Work out the name of the transitionEnd event 63 | var transElement = document.createElement('trans'); 64 | var transitionEndEventNames = { 65 | 'WebkitTransition': 'webkitTransitionEnd', 66 | 'MozTransition': 'transitionend', 67 | 'OTransition': 'oTransitionEnd', 68 | 'msTransition': 'MSTransitionEnd', 69 | 'transition': 'transitionend' 70 | }; 71 | var animationEndEventNames = { 72 | 'WebkitTransition': 'webkitAnimationEnd', 73 | 'MozTransition': 'animationend', 74 | 'OTransition': 'oAnimationEnd', 75 | 'msTransition': 'MSAnimationEnd', 76 | 'transition': 'animationend' 77 | }; 78 | function findEndEventName(endEventNames) { 79 | for (var name in endEventNames){ 80 | if (transElement.style[name] !== undefined) { 81 | return endEventNames[name]; 82 | } 83 | } 84 | } 85 | $transition.transitionEndEventName = findEndEventName(transitionEndEventNames); 86 | $transition.animationEndEventName = findEndEventName(animationEndEventNames); 87 | return $transition; 88 | }]); -------------------------------------------------------------------------------- /examples/architecture/app/js/pages/admin/groups/list.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.pages.admin.groups.list', ['view-segment']) 4 | 5 | .config(function($routeSegmentProvider){ 6 | $routeSegmentProvider 7 | 8 | .when('/admin/groups', 'admin.groups-list') 9 | 10 | .within('admin') 11 | 12 | .segment('groups-list', { 13 | templateUrl: 'views/admin/groups/list.html', 14 | controller: 'admin:Index.GroupsList' 15 | }); 16 | }) 17 | 18 | .controller('admin:Index.GroupsList', function($scope){ 19 | 20 | }); -------------------------------------------------------------------------------- /examples/architecture/app/js/pages/admin/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.pages.admin.index', ['view-segment']) 4 | 5 | .config(function($routeSegmentProvider){ 6 | $routeSegmentProvider 7 | 8 | .when('/admin', 'admin') 9 | 10 | .segment('admin', { 11 | templateUrl: 'views/admin/index.html', 12 | controller: 'admin:Index' 13 | }); 14 | }) 15 | 16 | .controller('admin:Index', function($scope){ 17 | 18 | }); -------------------------------------------------------------------------------- /examples/architecture/app/js/pages/admin/users/list.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('app.pages.admin.users.list', ['view-segment', 4 | 'app.lib.ui.dialog', 5 | 'app.lib.ui.pagination', 6 | 'app.dal.entities.user']) 7 | 8 | .config(function($routeSegmentProvider){ 9 | $routeSegmentProvider 10 | 11 | .when('/admin/users', 'admin.users-list') 12 | 13 | .within('admin') 14 | 15 | .segment('users-list', { 16 | templateUrl: 'views/admin/users/list.html', 17 | controller: 'admin:Index.UsersList as UsersList', 18 | resolve: { 19 | data: function(UsersList_Loader) { 20 | return UsersList_Loader.load(); 21 | } 22 | } 23 | }); 24 | }) 25 | 26 | .constant('C_UsersList', { 27 | PER_PAGE: 15 28 | }) 29 | 30 | .factory('UsersList_Loader', function($q, $location, C_UsersList, User) { 31 | var data = {}; 32 | var Loader = {}; 33 | 34 | Loader.load = function(page) { 35 | return $q.all({ 36 | users: User.getAll({ 37 | page: page || $location.search().page || 1, 38 | perPage: C_UsersList.PER_PAGE 39 | }) 40 | }).then(function(values){ 41 | angular.extend(data, values); 42 | return data; 43 | }); 44 | }; 45 | 46 | return Loader; 47 | }) 48 | 49 | /** 50 | * The users list 51 | */ 52 | .controller('admin:Index.UsersList', function($scope, data) { 53 | /** 54 | * @class UsersList 55 | */ 56 | var ctrl = this; 57 | 58 | $scope.data = data; 59 | 60 | ctrl.getSelectedUsers = function(){ 61 | return _.filter(data.users.list, 'selected'); 62 | }; 63 | 64 | ctrl.noSelectedUsers = function(){ 65 | return !_.any(data.users.list, {selected: true}); 66 | }; 67 | 68 | ctrl.selectedExtSyncUsers = function(){ 69 | return _.any(data.users.list, {selected: true, extSync: true}); 70 | }; 71 | 72 | $scope.onSelectAll = function(){ 73 | _.each(data.users.list, function(user){ user.selected = $scope.allSelected; }); 74 | }; 75 | }) 76 | 77 | .controller('admin:Index.UsersList.Pagination', function($scope, $location, C_UsersList, UsersList_Loader) { 78 | /** 79 | * @type {UsersList} 80 | */ 81 | var UsersList = $scope.UsersList; 82 | 83 | $scope.curPage = $location.search().page || 1; 84 | $scope.totalUsers = 0; 85 | $scope.perPage = C_UsersList.PER_PAGE; 86 | 87 | $scope.$watch('data.users.total', function(usersTotalCount) { 88 | $scope.totalUsers = usersTotalCount; 89 | }); 90 | 91 | $scope.$watch( 92 | function () { 93 | return $location.search().page || 1; 94 | }, 95 | function (page, prevPage) { 96 | if (page == prevPage) return; 97 | 98 | $scope.onSelectPage(page); 99 | $scope.curPage = page; 100 | } 101 | ); 102 | 103 | $scope.onSelectPage = function(page){ 104 | $scope.pageLoading = true; 105 | UsersList_Loader.load(page).always(function(){ 106 | $scope.pageLoading = false; 107 | }); 108 | $location.search('page', page); 109 | }; 110 | }) 111 | 112 | .controller('admin:Index.UsersList.BtnRemove', function($scope, $q, $dialog, UsersList_Loader){ 113 | /** 114 | * @type {UsersList} 115 | */ 116 | var UsersList = $scope.UsersList; 117 | 118 | $scope.isDisabled = function(){ 119 | return UsersList.noSelectedUsers() || UsersList.selectedExtSyncUsers(); 120 | }; 121 | 122 | var ctrl = this; 123 | ctrl.removeUsers = function(users){ 124 | return $q.all(_.invoke(users, 'remove')).always(function(){ 125 | return UsersList_Loader.load(); 126 | }); 127 | }; 128 | 129 | $scope.onClick = function(){ 130 | var toRemove = UsersList.getSelectedUsers(); 131 | 132 | $dialog.messageBox( 133 | 'Remove Users', 134 | "Do you really want to remove " + toRemove.length + " users?", 135 | [ 136 | { 137 | label: 'No', 138 | result: false 139 | }, 140 | { 141 | label: 'Yes', 142 | cssClass: 'btn-primary', 143 | result: function(){ 144 | return ctrl.removeUsers(toRemove); 145 | } 146 | } 147 | ] 148 | ) 149 | .open(); 150 | }; 151 | }); 152 | -------------------------------------------------------------------------------- /examples/architecture/app/js/pages/pages.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * 5 | * Full list of our modules with business logic of application's pages 6 | * 7 | */ 8 | angular.module('app.pages', ['app.pages.admin.index', 9 | 'app.pages.admin.users.list', 10 | 'app.pages.admin.groups.list']); -------------------------------------------------------------------------------- /examples/architecture/app/less/admin/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/app/less/admin/index.less -------------------------------------------------------------------------------- /examples/architecture/app/less/admin/users/list.less: -------------------------------------------------------------------------------- 1 | #users-list { 2 | a { 3 | cursor: pointer; 4 | } 5 | 6 | .data { 7 | min-height: 600px; 8 | } 9 | 10 | .controls { 11 | .pagination { 12 | margin: 0; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /examples/architecture/app/less/app.less: -------------------------------------------------------------------------------- 1 | @import "bootstrap/bootstrap.less"; 2 | 3 | @import "admin/index.less"; 4 | @import "admin/users/list.less"; -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/accordion.less: -------------------------------------------------------------------------------- 1 | // 2 | // Accordion 3 | // -------------------------------------------------- 4 | 5 | 6 | // Parent container 7 | .accordion { 8 | margin-bottom: @baseLineHeight; 9 | } 10 | 11 | // Group == heading + body 12 | .accordion-group { 13 | margin-bottom: 2px; 14 | border: 1px solid #e5e5e5; 15 | .border-radius(@baseBorderRadius); 16 | } 17 | .accordion-heading { 18 | border-bottom: 0; 19 | } 20 | .accordion-heading .accordion-toggle { 21 | display: block; 22 | padding: 8px 15px; 23 | } 24 | 25 | // General toggle styles 26 | .accordion-toggle { 27 | cursor: pointer; 28 | } 29 | 30 | // Inner needs the styles because you can't animate properly with any styles on the element 31 | .accordion-inner { 32 | padding: 9px 15px; 33 | border-top: 1px solid #e5e5e5; 34 | } 35 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/alerts.less: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: 8px 35px 8px 14px; 11 | margin-bottom: @baseLineHeight; 12 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 13 | background-color: @warningBackground; 14 | border: 1px solid @warningBorder; 15 | .border-radius(@baseBorderRadius); 16 | } 17 | .alert, 18 | .alert h4 { 19 | // Specified for the h4 to prevent conflicts of changing @headingsColor 20 | color: @warningText; 21 | } 22 | .alert h4 { 23 | margin: 0; 24 | } 25 | 26 | // Adjust close link position 27 | .alert .close { 28 | position: relative; 29 | top: -2px; 30 | right: -21px; 31 | line-height: @baseLineHeight; 32 | } 33 | 34 | 35 | // Alternate styles 36 | // ------------------------- 37 | 38 | .alert-success { 39 | background-color: @successBackground; 40 | border-color: @successBorder; 41 | color: @successText; 42 | } 43 | .alert-success h4 { 44 | color: @successText; 45 | } 46 | .alert-danger, 47 | .alert-error { 48 | background-color: @errorBackground; 49 | border-color: @errorBorder; 50 | color: @errorText; 51 | } 52 | .alert-danger h4, 53 | .alert-error h4 { 54 | color: @errorText; 55 | } 56 | .alert-info { 57 | background-color: @infoBackground; 58 | border-color: @infoBorder; 59 | color: @infoText; 60 | } 61 | .alert-info h4 { 62 | color: @infoText; 63 | } 64 | 65 | 66 | // Block alerts 67 | // ------------------------- 68 | 69 | .alert-block { 70 | padding-top: 14px; 71 | padding-bottom: 14px; 72 | } 73 | .alert-block > p, 74 | .alert-block > ul { 75 | margin-bottom: 0; 76 | } 77 | .alert-block p + p { 78 | margin-top: 5px; 79 | } 80 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/bootstrap.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v2.3.2 3 | * 4 | * Copyright 2013 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world by @mdo and @fat. 9 | */ 10 | 11 | // Core variables and mixins 12 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc 13 | @import "mixins.less"; 14 | 15 | // CSS Reset 16 | @import "reset.less"; 17 | 18 | // Grid system and page structure 19 | @import "scaffolding.less"; 20 | @import "grid.less"; 21 | @import "layouts.less"; 22 | 23 | // Base CSS 24 | @import "type.less"; 25 | @import "code.less"; 26 | @import "forms.less"; 27 | @import "tables.less"; 28 | 29 | 30 | // Components: common 31 | //@import "sprites.less"; 32 | @import "../font-awesome/font-awesome.less"; 33 | @import "dropdowns.less"; 34 | @import "wells.less"; 35 | @import "component-animations.less"; 36 | @import "close.less"; 37 | 38 | // Components: Buttons & Alerts 39 | @import "buttons.less"; 40 | @import "button-groups.less"; 41 | @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less 42 | 43 | // Components: Nav 44 | @import "navs.less"; 45 | @import "navbar.less"; 46 | @import "breadcrumbs.less"; 47 | @import "pagination.less"; 48 | @import "pager.less"; 49 | 50 | // Components: Popovers 51 | @import "modals.less"; 52 | @import "tooltip.less"; 53 | @import "popovers.less"; 54 | 55 | // Components: Misc 56 | @import "thumbnails.less"; 57 | @import "media.less"; 58 | @import "labels-badges.less"; 59 | @import "progress-bars.less"; 60 | //@import "accordion.less"; 61 | //@import "carousel.less"; 62 | //@import "hero-unit.less"; 63 | 64 | // Utility classes 65 | @import "utilities.less"; // Has to be last to override when necessary 66 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: 8px 15px; 8 | margin: 0 0 @baseLineHeight; 9 | list-style: none; 10 | background-color: #f5f5f5; 11 | .border-radius(@baseBorderRadius); 12 | > li { 13 | display: inline-block; 14 | .ie7-inline-block(); 15 | text-shadow: 0 1px 0 @white; 16 | > .divider { 17 | padding: 0 5px; 18 | color: #ccc; 19 | } 20 | } 21 | > .active { 22 | color: @grayLight; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/buttons.less: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // -------------------------------------------------- 8 | 9 | // Core 10 | .btn { 11 | display: inline-block; 12 | .ie7-inline-block(); 13 | padding: 4px 12px; 14 | margin-bottom: 0; // For input.btn 15 | font-size: @baseFontSize; 16 | line-height: @baseLineHeight; 17 | text-align: center; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); 21 | border: 1px solid @btnBorder; 22 | *border: 0; // Remove the border to prevent IE7's black border on input:focus 23 | border-bottom-color: darken(@btnBorder, 10%); 24 | .border-radius(@baseBorderRadius); 25 | .ie7-restore-left-whitespace(); // Give IE7 some love 26 | .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); 27 | 28 | // Hover/focus state 29 | &:hover, 30 | &:focus { 31 | color: @grayDark; 32 | text-decoration: none; 33 | background-position: 0 -15px; 34 | 35 | // transition is only when going to hover/focus, otherwise the background 36 | // behind the gradient (there for IE<=9 fallback) gets mismatched 37 | .transition(background-position .1s linear); 38 | } 39 | 40 | // Focus state for keyboard and accessibility 41 | &:focus { 42 | .tab-focus(); 43 | } 44 | 45 | // Active state 46 | &.active, 47 | &:active { 48 | background-image: none; 49 | outline: 0; 50 | .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); 51 | } 52 | 53 | // Disabled state 54 | &.disabled, 55 | &[disabled] { 56 | cursor: default; 57 | background-image: none; 58 | .opacity(65); 59 | .box-shadow(none); 60 | } 61 | 62 | } 63 | 64 | 65 | 66 | // Button Sizes 67 | // -------------------------------------------------- 68 | 69 | // Large 70 | .btn-large { 71 | padding: @paddingLarge; 72 | font-size: @fontSizeLarge; 73 | .border-radius(@borderRadiusLarge); 74 | } 75 | .btn-large [class^="icon-"], 76 | .btn-large [class*=" icon-"] { 77 | margin-top: 4px; 78 | } 79 | 80 | // Small 81 | .btn-small { 82 | padding: @paddingSmall; 83 | font-size: @fontSizeSmall; 84 | .border-radius(@borderRadiusSmall); 85 | } 86 | .btn-small [class^="icon-"], 87 | .btn-small [class*=" icon-"] { 88 | margin-top: 0; 89 | } 90 | .btn-mini [class^="icon-"], 91 | .btn-mini [class*=" icon-"] { 92 | margin-top: -1px; 93 | } 94 | 95 | // Mini 96 | .btn-mini { 97 | padding: @paddingMini; 98 | font-size: @fontSizeMini; 99 | .border-radius(@borderRadiusSmall); 100 | } 101 | 102 | 103 | // Block button 104 | // ------------------------- 105 | 106 | .btn-block { 107 | display: block; 108 | width: 100%; 109 | padding-left: 0; 110 | padding-right: 0; 111 | .box-sizing(border-box); 112 | } 113 | 114 | // Vertically space out multiple block buttons 115 | .btn-block + .btn-block { 116 | margin-top: 5px; 117 | } 118 | 119 | // Specificity overrides 120 | input[type="submit"], 121 | input[type="reset"], 122 | input[type="button"] { 123 | &.btn-block { 124 | width: 100%; 125 | } 126 | } 127 | 128 | 129 | 130 | // Alternate buttons 131 | // -------------------------------------------------- 132 | 133 | // Provide *some* extra contrast for those who can get it 134 | .btn-primary.active, 135 | .btn-warning.active, 136 | .btn-danger.active, 137 | .btn-success.active, 138 | .btn-info.active, 139 | .btn-inverse.active { 140 | color: rgba(255,255,255,.75); 141 | } 142 | 143 | // Set the backgrounds 144 | // ------------------------- 145 | .btn-primary { 146 | .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); 147 | } 148 | // Warning appears are orange 149 | .btn-warning { 150 | .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); 151 | } 152 | // Danger and error appear as red 153 | .btn-danger { 154 | .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); 155 | } 156 | // Success appears as green 157 | .btn-success { 158 | .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); 159 | } 160 | // Info appears as a neutral blue 161 | .btn-info { 162 | .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); 163 | } 164 | // Inverse appears as dark gray 165 | .btn-inverse { 166 | .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); 167 | } 168 | 169 | 170 | // Cross-browser Jank 171 | // -------------------------------------------------- 172 | 173 | button.btn, 174 | input[type="submit"].btn { 175 | 176 | // Firefox 3.6 only I believe 177 | &::-moz-focus-inner { 178 | padding: 0; 179 | border: 0; 180 | } 181 | 182 | // IE7 has some default padding on button controls 183 | *padding-top: 3px; 184 | *padding-bottom: 3px; 185 | 186 | &.btn-large { 187 | *padding-top: 7px; 188 | *padding-bottom: 7px; 189 | } 190 | &.btn-small { 191 | *padding-top: 3px; 192 | *padding-bottom: 3px; 193 | } 194 | &.btn-mini { 195 | *padding-top: 1px; 196 | *padding-bottom: 1px; 197 | } 198 | } 199 | 200 | 201 | // Link buttons 202 | // -------------------------------------------------- 203 | 204 | // Make a button look and behave like a link 205 | .btn-link, 206 | .btn-link:active, 207 | .btn-link[disabled] { 208 | background-color: transparent; 209 | background-image: none; 210 | .box-shadow(none); 211 | } 212 | .btn-link { 213 | border-color: transparent; 214 | cursor: pointer; 215 | color: @linkColor; 216 | .border-radius(0); 217 | } 218 | .btn-link:hover, 219 | .btn-link:focus { 220 | color: @linkColorHover; 221 | text-decoration: underline; 222 | background-color: transparent; 223 | } 224 | .btn-link[disabled]:hover, 225 | .btn-link[disabled]:focus { 226 | color: @grayDark; 227 | text-decoration: none; 228 | } 229 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/carousel.less: -------------------------------------------------------------------------------- 1 | // 2 | // Carousel 3 | // -------------------------------------------------- 4 | 5 | 6 | .carousel { 7 | position: relative; 8 | margin-bottom: @baseLineHeight; 9 | line-height: 1; 10 | } 11 | 12 | .carousel-inner { 13 | overflow: hidden; 14 | width: 100%; 15 | position: relative; 16 | } 17 | 18 | .carousel-inner { 19 | 20 | > .item { 21 | display: none; 22 | position: relative; 23 | .transition(.6s ease-in-out left); 24 | 25 | // Account for jankitude on images 26 | > img, 27 | > a > img { 28 | display: block; 29 | line-height: 1; 30 | } 31 | } 32 | 33 | > .active, 34 | > .next, 35 | > .prev { display: block; } 36 | 37 | > .active { 38 | left: 0; 39 | } 40 | 41 | > .next, 42 | > .prev { 43 | position: absolute; 44 | top: 0; 45 | width: 100%; 46 | } 47 | 48 | > .next { 49 | left: 100%; 50 | } 51 | > .prev { 52 | left: -100%; 53 | } 54 | > .next.left, 55 | > .prev.right { 56 | left: 0; 57 | } 58 | 59 | > .active.left { 60 | left: -100%; 61 | } 62 | > .active.right { 63 | left: 100%; 64 | } 65 | 66 | } 67 | 68 | // Left/right controls for nav 69 | // --------------------------- 70 | 71 | .carousel-control { 72 | position: absolute; 73 | top: 40%; 74 | left: 15px; 75 | width: 40px; 76 | height: 40px; 77 | margin-top: -20px; 78 | font-size: 60px; 79 | font-weight: 100; 80 | line-height: 30px; 81 | color: @white; 82 | text-align: center; 83 | background: @grayDarker; 84 | border: 3px solid @white; 85 | .border-radius(23px); 86 | .opacity(50); 87 | 88 | // we can't have this transition here 89 | // because webkit cancels the carousel 90 | // animation if you trip this while 91 | // in the middle of another animation 92 | // ;_; 93 | // .transition(opacity .2s linear); 94 | 95 | // Reposition the right one 96 | &.right { 97 | left: auto; 98 | right: 15px; 99 | } 100 | 101 | // Hover/focus state 102 | &:hover, 103 | &:focus { 104 | color: @white; 105 | text-decoration: none; 106 | .opacity(90); 107 | } 108 | } 109 | 110 | // Carousel indicator pips 111 | // ----------------------------- 112 | .carousel-indicators { 113 | position: absolute; 114 | top: 15px; 115 | right: 15px; 116 | z-index: 5; 117 | margin: 0; 118 | list-style: none; 119 | 120 | li { 121 | display: block; 122 | float: left; 123 | width: 10px; 124 | height: 10px; 125 | margin-left: 5px; 126 | text-indent: -999px; 127 | background-color: #ccc; 128 | background-color: rgba(255,255,255,.25); 129 | border-radius: 5px; 130 | } 131 | .active { 132 | background-color: #fff; 133 | } 134 | } 135 | 136 | // Caption for text below images 137 | // ----------------------------- 138 | 139 | .carousel-caption { 140 | position: absolute; 141 | left: 0; 142 | right: 0; 143 | bottom: 0; 144 | padding: 15px; 145 | background: @grayDark; 146 | background: rgba(0,0,0,.75); 147 | } 148 | .carousel-caption h4, 149 | .carousel-caption p { 150 | color: @white; 151 | line-height: @baseLineHeight; 152 | } 153 | .carousel-caption h4 { 154 | margin: 0 0 5px; 155 | } 156 | .carousel-caption p { 157 | margin-bottom: 0; 158 | } 159 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/close.less: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: 20px; 9 | font-weight: bold; 10 | line-height: @baseLineHeight; 11 | color: @black; 12 | text-shadow: 0 1px 0 rgba(255,255,255,1); 13 | .opacity(20); 14 | &:hover, 15 | &:focus { 16 | color: @black; 17 | text-decoration: none; 18 | cursor: pointer; 19 | .opacity(40); 20 | } 21 | } 22 | 23 | // Additional properties for button version 24 | // iOS requires the button element instead of an anchor tag. 25 | // If you want the anchor version, it requires `href="#"`. 26 | button.close { 27 | padding: 0; 28 | cursor: pointer; 29 | background: transparent; 30 | border: 0; 31 | -webkit-appearance: none; 32 | } -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/code.less: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and blocK) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | pre { 9 | padding: 0 3px 2px; 10 | #font > #family > .monospace; 11 | font-size: @baseFontSize - 2; 12 | color: @grayDark; 13 | .border-radius(3px); 14 | } 15 | 16 | // Inline code 17 | code { 18 | padding: 2px 4px; 19 | color: #d14; 20 | background-color: #f7f7f9; 21 | border: 1px solid #e1e1e8; 22 | white-space: nowrap; 23 | } 24 | 25 | // Blocks of code 26 | pre { 27 | display: block; 28 | padding: (@baseLineHeight - 1) / 2; 29 | margin: 0 0 @baseLineHeight / 2; 30 | font-size: @baseFontSize - 1; // 14px to 13px 31 | line-height: @baseLineHeight; 32 | word-break: break-all; 33 | word-wrap: break-word; 34 | white-space: pre; 35 | white-space: pre-wrap; 36 | background-color: #f5f5f5; 37 | border: 1px solid #ccc; // fallback for IE7-8 38 | border: 1px solid rgba(0,0,0,.15); 39 | .border-radius(@baseBorderRadius); 40 | 41 | // Make prettyprint styles more spaced out for readability 42 | &.prettyprint { 43 | margin-bottom: @baseLineHeight; 44 | } 45 | 46 | // Account for some code outputs that place code tags in pre tags 47 | code { 48 | padding: 0; 49 | color: inherit; 50 | white-space: pre; 51 | white-space: pre-wrap; 52 | background-color: transparent; 53 | border: 0; 54 | } 55 | } 56 | 57 | // Enable scrollable blocks of code 58 | .pre-scrollable { 59 | max-height: 340px; 60 | overflow-y: scroll; 61 | } -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/component-animations.less: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | 6 | .fade { 7 | opacity: 0; 8 | .transition(opacity .15s linear); 9 | &.in { 10 | opacity: 1; 11 | } 12 | } 13 | 14 | .collapse { 15 | position: relative; 16 | height: 0; 17 | overflow: hidden; 18 | .transition(height .35s ease); 19 | &.in { 20 | height: auto; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/grid.less: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Fixed (940px) 7 | #grid > .core(@gridColumnWidth, @gridGutterWidth); 8 | 9 | // Fluid (940px) 10 | #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); 11 | 12 | // Reset utility classes due to specificity 13 | [class*="span"].hide, 14 | .row-fluid [class*="span"].hide { 15 | display: none; 16 | } 17 | 18 | [class*="span"].pull-right, 19 | .row-fluid [class*="span"].pull-right { 20 | float: right; 21 | } 22 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/hero-unit.less: -------------------------------------------------------------------------------- 1 | // 2 | // Hero unit 3 | // -------------------------------------------------- 4 | 5 | 6 | .hero-unit { 7 | padding: 60px; 8 | margin-bottom: 30px; 9 | font-size: 18px; 10 | font-weight: 200; 11 | line-height: @baseLineHeight * 1.5; 12 | color: @heroUnitLeadColor; 13 | background-color: @heroUnitBackground; 14 | .border-radius(6px); 15 | h1 { 16 | margin-bottom: 0; 17 | font-size: 60px; 18 | line-height: 1; 19 | color: @heroUnitHeadingColor; 20 | letter-spacing: -1px; 21 | } 22 | li { 23 | line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/labels-badges.less: -------------------------------------------------------------------------------- 1 | // 2 | // Labels and badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base classes 7 | .label, 8 | .badge { 9 | display: inline-block; 10 | padding: 2px 4px; 11 | font-size: @baseFontSize * .846; 12 | font-weight: bold; 13 | line-height: 14px; // ensure proper line-height if floated 14 | color: @white; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 18 | background-color: @grayLight; 19 | } 20 | // Set unique padding and border-radii 21 | .label { 22 | .border-radius(3px); 23 | } 24 | .badge { 25 | padding-left: 9px; 26 | padding-right: 9px; 27 | .border-radius(9px); 28 | } 29 | 30 | // Empty labels/badges collapse 31 | .label, 32 | .badge { 33 | &:empty { 34 | display: none; 35 | } 36 | } 37 | 38 | // Hover/focus state, but only for links 39 | a { 40 | &.label:hover, 41 | &.label:focus, 42 | &.badge:hover, 43 | &.badge:focus { 44 | color: @white; 45 | text-decoration: none; 46 | cursor: pointer; 47 | } 48 | } 49 | 50 | // Colors 51 | // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) 52 | .label, 53 | .badge { 54 | // Important (red) 55 | &-important { background-color: @errorText; } 56 | &-important[href] { background-color: darken(@errorText, 10%); } 57 | // Warnings (orange) 58 | &-warning { background-color: @orange; } 59 | &-warning[href] { background-color: darken(@orange, 10%); } 60 | // Success (green) 61 | &-success { background-color: @successText; } 62 | &-success[href] { background-color: darken(@successText, 10%); } 63 | // Info (turquoise) 64 | &-info { background-color: @infoText; } 65 | &-info[href] { background-color: darken(@infoText, 10%); } 66 | // Inverse (black) 67 | &-inverse { background-color: @grayDark; } 68 | &-inverse[href] { background-color: darken(@grayDark, 10%); } 69 | } 70 | 71 | // Quick fix for labels/badges in buttons 72 | .btn { 73 | .label, 74 | .badge { 75 | position: relative; 76 | top: -1px; 77 | } 78 | } 79 | .btn-mini { 80 | .label, 81 | .badge { 82 | top: 0; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/layouts.less: -------------------------------------------------------------------------------- 1 | // 2 | // Layouts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container (centered, fixed-width layouts) 7 | .container { 8 | .container-fixed(); 9 | } 10 | 11 | // Fluid layouts (left aligned, with sidebar, min- & max-width content) 12 | .container-fluid { 13 | padding-right: @gridGutterWidth; 14 | padding-left: @gridGutterWidth; 15 | .clearfix(); 16 | } -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/media.less: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | *overflow: visible; 14 | zoom: 1; 15 | } 16 | 17 | // Proper spacing between instances of .media 18 | .media, 19 | .media .media { 20 | margin-top: 15px; 21 | } 22 | .media:first-child { 23 | margin-top: 0; 24 | } 25 | 26 | // For images and videos, set to block 27 | .media-object { 28 | display: block; 29 | } 30 | 31 | // Reset margins on headings for tighter default spacing 32 | .media-heading { 33 | margin: 0 0 5px; 34 | } 35 | 36 | 37 | // Media image alignment 38 | // ------------------------- 39 | 40 | .media > .pull-left { 41 | margin-right: 10px; 42 | } 43 | .media > .pull-right { 44 | margin-left: 10px; 45 | } 46 | 47 | 48 | // Media list variation 49 | // ------------------------- 50 | 51 | // Undo default ul/ol styles 52 | .media-list { 53 | margin-left: 0; 54 | list-style: none; 55 | } 56 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/modals.less: -------------------------------------------------------------------------------- 1 | // 2 | // Modals 3 | // -------------------------------------------------- 4 | 5 | // Background 6 | .modal-backdrop { 7 | position: fixed; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: @zindexModalBackdrop; 13 | background-color: @black; 14 | // Fade for backdrop 15 | &.fade { opacity: 0; } 16 | } 17 | 18 | .modal-backdrop, 19 | .modal-backdrop.fade.in { 20 | .opacity(80); 21 | } 22 | 23 | // Base modal 24 | .modal { 25 | position: fixed; 26 | top: 10%; 27 | left: 50%; 28 | z-index: @zindexModal; 29 | width: 560px; 30 | margin-left: -280px; 31 | background-color: @white; 32 | border: 1px solid #999; 33 | border: 1px solid rgba(0,0,0,.3); 34 | *border: 1px solid #999; /* IE6-7 */ 35 | .border-radius(6px); 36 | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); 37 | .background-clip(padding-box); 38 | // Remove focus outline from opened modal 39 | outline: none; 40 | 41 | &.fade { 42 | .transition(e('opacity .3s linear, top .3s ease-out')); 43 | top: -25%; 44 | } 45 | &.fade.in { top: 10%; } 46 | } 47 | .modal-header { 48 | padding: 9px 15px; 49 | border-bottom: 1px solid #eee; 50 | // Close icon 51 | .close { margin-top: 2px; } 52 | // Heading 53 | h3 { 54 | margin: 0; 55 | line-height: 30px; 56 | } 57 | } 58 | 59 | // Body (where all modal content resides) 60 | .modal-body { 61 | position: relative; 62 | overflow-y: auto; 63 | max-height: 400px; 64 | padding: 15px; 65 | } 66 | // Remove bottom margin if need be 67 | .modal-form { 68 | margin-bottom: 0; 69 | } 70 | 71 | // Footer (for actions) 72 | .modal-footer { 73 | padding: 14px 15px 15px; 74 | margin-bottom: 0; 75 | text-align: right; // right align buttons 76 | background-color: #f5f5f5; 77 | border-top: 1px solid #ddd; 78 | .border-radius(0 0 6px 6px); 79 | .box-shadow(inset 0 1px 0 @white); 80 | .clearfix(); // clear it in case folks use .pull-* classes on buttons 81 | 82 | // Properly space out buttons 83 | .btn + .btn { 84 | margin-left: 5px; 85 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 86 | } 87 | // but override that for button groups 88 | .btn-group .btn + .btn { 89 | margin-left: -1px; 90 | } 91 | // and override it for block buttons as well 92 | .btn-block + .btn-block { 93 | margin-left: 0; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/pager.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | margin: @baseLineHeight 0; 8 | list-style: none; 9 | text-align: center; 10 | .clearfix(); 11 | } 12 | .pager li { 13 | display: inline; 14 | } 15 | .pager li > a, 16 | .pager li > span { 17 | display: inline-block; 18 | padding: 5px 14px; 19 | background-color: #fff; 20 | border: 1px solid #ddd; 21 | .border-radius(15px); 22 | } 23 | .pager li > a:hover, 24 | .pager li > a:focus { 25 | text-decoration: none; 26 | background-color: #f5f5f5; 27 | } 28 | .pager .next > a, 29 | .pager .next > span { 30 | float: right; 31 | } 32 | .pager .previous > a, 33 | .pager .previous > span { 34 | float: left; 35 | } 36 | .pager .disabled > a, 37 | .pager .disabled > a:hover, 38 | .pager .disabled > a:focus, 39 | .pager .disabled > span { 40 | color: @grayLight; 41 | background-color: #fff; 42 | cursor: default; 43 | } -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/pagination.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | 5 | // Space out pagination from surrounding content 6 | .pagination { 7 | margin: @baseLineHeight 0; 8 | } 9 | 10 | .pagination ul { 11 | // Allow for text-based alignment 12 | display: inline-block; 13 | .ie7-inline-block(); 14 | // Reset default ul styles 15 | margin-left: 0; 16 | margin-bottom: 0; 17 | // Visuals 18 | .border-radius(@baseBorderRadius); 19 | .box-shadow(0 1px 2px rgba(0,0,0,.05)); 20 | } 21 | .pagination ul > li { 22 | display: inline; // Remove list-style and block-level defaults 23 | } 24 | .pagination ul > li > a, 25 | .pagination ul > li > span { 26 | float: left; // Collapse white-space 27 | padding: 4px 12px; 28 | line-height: @baseLineHeight; 29 | text-decoration: none; 30 | background-color: @paginationBackground; 31 | border: 1px solid @paginationBorder; 32 | border-left-width: 0; 33 | } 34 | .pagination ul > li > a:hover, 35 | .pagination ul > li > a:focus, 36 | .pagination ul > .active > a, 37 | .pagination ul > .active > span { 38 | background-color: @paginationActiveBackground; 39 | } 40 | .pagination ul > .active > a, 41 | .pagination ul > .active > span { 42 | color: @grayLight; 43 | cursor: default; 44 | } 45 | .pagination ul > .disabled > span, 46 | .pagination ul > .disabled > a, 47 | .pagination ul > .disabled > a:hover, 48 | .pagination ul > .disabled > a:focus { 49 | color: @grayLight; 50 | background-color: transparent; 51 | cursor: default; 52 | } 53 | .pagination ul > li:first-child > a, 54 | .pagination ul > li:first-child > span { 55 | border-left-width: 1px; 56 | .border-left-radius(@baseBorderRadius); 57 | } 58 | .pagination ul > li:last-child > a, 59 | .pagination ul > li:last-child > span { 60 | .border-right-radius(@baseBorderRadius); 61 | } 62 | 63 | 64 | // Alignment 65 | // -------------------------------------------------- 66 | 67 | .pagination-centered { 68 | text-align: center; 69 | } 70 | .pagination-right { 71 | text-align: right; 72 | } 73 | 74 | 75 | // Sizing 76 | // -------------------------------------------------- 77 | 78 | // Large 79 | .pagination-large { 80 | ul > li > a, 81 | ul > li > span { 82 | padding: @paddingLarge; 83 | font-size: @fontSizeLarge; 84 | } 85 | ul > li:first-child > a, 86 | ul > li:first-child > span { 87 | .border-left-radius(@borderRadiusLarge); 88 | } 89 | ul > li:last-child > a, 90 | ul > li:last-child > span { 91 | .border-right-radius(@borderRadiusLarge); 92 | } 93 | } 94 | 95 | // Small and mini 96 | .pagination-mini, 97 | .pagination-small { 98 | ul > li:first-child > a, 99 | ul > li:first-child > span { 100 | .border-left-radius(@borderRadiusSmall); 101 | } 102 | ul > li:last-child > a, 103 | ul > li:last-child > span { 104 | .border-right-radius(@borderRadiusSmall); 105 | } 106 | } 107 | 108 | // Small 109 | .pagination-small { 110 | ul > li > a, 111 | ul > li > span { 112 | padding: @paddingSmall; 113 | font-size: @fontSizeSmall; 114 | } 115 | } 116 | // Mini 117 | .pagination-mini { 118 | ul > li > a, 119 | ul > li > span { 120 | padding: @paddingMini; 121 | font-size: @fontSizeMini; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/popovers.less: -------------------------------------------------------------------------------- 1 | // 2 | // Popovers 3 | // -------------------------------------------------- 4 | 5 | 6 | .popover { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | z-index: @zindexPopover; 11 | display: none; 12 | max-width: 276px; 13 | padding: 1px; 14 | text-align: left; // Reset given new insertion method 15 | background-color: @popoverBackground; 16 | -webkit-background-clip: padding-box; 17 | -moz-background-clip: padding; 18 | background-clip: padding-box; 19 | border: 1px solid #ccc; 20 | border: 1px solid rgba(0,0,0,.2); 21 | .border-radius(6px); 22 | .box-shadow(0 5px 10px rgba(0,0,0,.2)); 23 | 24 | // Overrides for proper insertion 25 | white-space: normal; 26 | 27 | // Offset the popover to account for the popover arrow 28 | &.top { margin-top: -10px; } 29 | &.right { margin-left: 10px; } 30 | &.bottom { margin-top: 10px; } 31 | &.left { margin-left: -10px; } 32 | } 33 | 34 | .popover-title { 35 | margin: 0; // reset heading margin 36 | padding: 8px 14px; 37 | font-size: 14px; 38 | font-weight: normal; 39 | line-height: 18px; 40 | background-color: @popoverTitleBackground; 41 | border-bottom: 1px solid darken(@popoverTitleBackground, 5%); 42 | .border-radius(5px 5px 0 0); 43 | 44 | &:empty { 45 | display: none; 46 | } 47 | } 48 | 49 | .popover-content { 50 | padding: 9px 14px; 51 | } 52 | 53 | // Arrows 54 | // 55 | // .arrow is outer, .arrow:after is inner 56 | 57 | .popover .arrow, 58 | .popover .arrow:after { 59 | position: absolute; 60 | display: block; 61 | width: 0; 62 | height: 0; 63 | border-color: transparent; 64 | border-style: solid; 65 | } 66 | .popover .arrow { 67 | border-width: @popoverArrowOuterWidth; 68 | } 69 | .popover .arrow:after { 70 | border-width: @popoverArrowWidth; 71 | content: ""; 72 | } 73 | 74 | .popover { 75 | &.top .arrow { 76 | left: 50%; 77 | margin-left: -@popoverArrowOuterWidth; 78 | border-bottom-width: 0; 79 | border-top-color: #999; // IE8 fallback 80 | border-top-color: @popoverArrowOuterColor; 81 | bottom: -@popoverArrowOuterWidth; 82 | &:after { 83 | bottom: 1px; 84 | margin-left: -@popoverArrowWidth; 85 | border-bottom-width: 0; 86 | border-top-color: @popoverArrowColor; 87 | } 88 | } 89 | &.right .arrow { 90 | top: 50%; 91 | left: -@popoverArrowOuterWidth; 92 | margin-top: -@popoverArrowOuterWidth; 93 | border-left-width: 0; 94 | border-right-color: #999; // IE8 fallback 95 | border-right-color: @popoverArrowOuterColor; 96 | &:after { 97 | left: 1px; 98 | bottom: -@popoverArrowWidth; 99 | border-left-width: 0; 100 | border-right-color: @popoverArrowColor; 101 | } 102 | } 103 | &.bottom .arrow { 104 | left: 50%; 105 | margin-left: -@popoverArrowOuterWidth; 106 | border-top-width: 0; 107 | border-bottom-color: #999; // IE8 fallback 108 | border-bottom-color: @popoverArrowOuterColor; 109 | top: -@popoverArrowOuterWidth; 110 | &:after { 111 | top: 1px; 112 | margin-left: -@popoverArrowWidth; 113 | border-top-width: 0; 114 | border-bottom-color: @popoverArrowColor; 115 | } 116 | } 117 | 118 | &.left .arrow { 119 | top: 50%; 120 | right: -@popoverArrowOuterWidth; 121 | margin-top: -@popoverArrowOuterWidth; 122 | border-right-width: 0; 123 | border-left-color: #999; // IE8 fallback 124 | border-left-color: @popoverArrowOuterColor; 125 | &:after { 126 | right: 1px; 127 | border-right-width: 0; 128 | border-left-color: @popoverArrowColor; 129 | bottom: -@popoverArrowWidth; 130 | } 131 | } 132 | 133 | } 134 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/progress-bars.less: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // ANIMATIONS 7 | // ---------- 8 | 9 | // Webkit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Firefox 16 | @-moz-keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | // IE9 22 | @-ms-keyframes progress-bar-stripes { 23 | from { background-position: 40px 0; } 24 | to { background-position: 0 0; } 25 | } 26 | 27 | // Opera 28 | @-o-keyframes progress-bar-stripes { 29 | from { background-position: 0 0; } 30 | to { background-position: 40px 0; } 31 | } 32 | 33 | // Spec 34 | @keyframes progress-bar-stripes { 35 | from { background-position: 40px 0; } 36 | to { background-position: 0 0; } 37 | } 38 | 39 | 40 | 41 | // THE BARS 42 | // -------- 43 | 44 | // Outer container 45 | .progress { 46 | overflow: hidden; 47 | height: @baseLineHeight; 48 | margin-bottom: @baseLineHeight; 49 | #gradient > .vertical(#f5f5f5, #f9f9f9); 50 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 51 | .border-radius(@baseBorderRadius); 52 | } 53 | 54 | // Bar of progress 55 | .progress .bar { 56 | width: 0%; 57 | height: 100%; 58 | color: @white; 59 | float: left; 60 | font-size: 12px; 61 | text-align: center; 62 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 63 | #gradient > .vertical(#149bdf, #0480be); 64 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 65 | .box-sizing(border-box); 66 | .transition(width .6s ease); 67 | } 68 | .progress .bar + .bar { 69 | .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); 70 | } 71 | 72 | // Striped bars 73 | .progress-striped .bar { 74 | #gradient > .striped(#149bdf); 75 | .background-size(40px 40px); 76 | } 77 | 78 | // Call animation for the active one 79 | .progress.active .bar { 80 | -webkit-animation: progress-bar-stripes 2s linear infinite; 81 | -moz-animation: progress-bar-stripes 2s linear infinite; 82 | -ms-animation: progress-bar-stripes 2s linear infinite; 83 | -o-animation: progress-bar-stripes 2s linear infinite; 84 | animation: progress-bar-stripes 2s linear infinite; 85 | } 86 | 87 | 88 | 89 | // COLORS 90 | // ------ 91 | 92 | // Danger (red) 93 | .progress-danger .bar, .progress .bar-danger { 94 | #gradient > .vertical(#ee5f5b, #c43c35); 95 | } 96 | .progress-danger.progress-striped .bar, .progress-striped .bar-danger { 97 | #gradient > .striped(#ee5f5b); 98 | } 99 | 100 | // Success (green) 101 | .progress-success .bar, .progress .bar-success { 102 | #gradient > .vertical(#62c462, #57a957); 103 | } 104 | .progress-success.progress-striped .bar, .progress-striped .bar-success { 105 | #gradient > .striped(#62c462); 106 | } 107 | 108 | // Info (teal) 109 | .progress-info .bar, .progress .bar-info { 110 | #gradient > .vertical(#5bc0de, #339bb9); 111 | } 112 | .progress-info.progress-striped .bar, .progress-striped .bar-info { 113 | #gradient > .striped(#5bc0de); 114 | } 115 | 116 | // Warning (orange) 117 | .progress-warning .bar, .progress .bar-warning { 118 | #gradient > .vertical(lighten(@orange, 15%), @orange); 119 | } 120 | .progress-warning.progress-striped .bar, .progress-striped .bar-warning { 121 | #gradient > .striped(lighten(@orange, 15%)); 122 | } 123 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/reset.less: -------------------------------------------------------------------------------- 1 | // 2 | // Reset CSS 3 | // Adapted from http://github.com/necolas/normalize.css 4 | // -------------------------------------------------- 5 | 6 | 7 | // Display in IE6-9 and FF3 8 | // ------------------------- 9 | 10 | article, 11 | aside, 12 | details, 13 | figcaption, 14 | figure, 15 | footer, 16 | header, 17 | hgroup, 18 | nav, 19 | section { 20 | display: block; 21 | } 22 | 23 | // Display block in IE6-9 and FF3 24 | // ------------------------- 25 | 26 | audio, 27 | canvas, 28 | video { 29 | display: inline-block; 30 | *display: inline; 31 | *zoom: 1; 32 | } 33 | 34 | // Prevents modern browsers from displaying 'audio' without controls 35 | // ------------------------- 36 | 37 | audio:not([controls]) { 38 | display: none; 39 | } 40 | 41 | // Base settings 42 | // ------------------------- 43 | 44 | html { 45 | font-size: 100%; 46 | -webkit-text-size-adjust: 100%; 47 | -ms-text-size-adjust: 100%; 48 | } 49 | // Focus states 50 | a:focus { 51 | .tab-focus(); 52 | } 53 | // Hover & Active 54 | a:hover, 55 | a:active { 56 | outline: 0; 57 | } 58 | 59 | // Prevents sub and sup affecting line-height in all browsers 60 | // ------------------------- 61 | 62 | sub, 63 | sup { 64 | position: relative; 65 | font-size: 75%; 66 | line-height: 0; 67 | vertical-align: baseline; 68 | } 69 | sup { 70 | top: -0.5em; 71 | } 72 | sub { 73 | bottom: -0.25em; 74 | } 75 | 76 | // Img border in a's and image quality 77 | // ------------------------- 78 | 79 | img { 80 | /* Responsive images (ensure images don't scale beyond their parents) */ 81 | max-width: 100%; /* Part 1: Set a maxium relative to the parent */ 82 | width: auto\9; /* IE7-8 need help adjusting responsive images */ 83 | height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ 84 | 85 | vertical-align: middle; 86 | border: 0; 87 | -ms-interpolation-mode: bicubic; 88 | } 89 | 90 | // Prevent max-width from affecting Google Maps 91 | #map_canvas img, 92 | .google-maps img { 93 | max-width: none; 94 | } 95 | 96 | // Forms 97 | // ------------------------- 98 | 99 | // Font size in all browsers, margin changes, misc consistency 100 | button, 101 | input, 102 | select, 103 | textarea { 104 | margin: 0; 105 | font-size: 100%; 106 | vertical-align: middle; 107 | } 108 | button, 109 | input { 110 | *overflow: visible; // Inner spacing ie IE6/7 111 | line-height: normal; // FF3/4 have !important on line-height in UA stylesheet 112 | } 113 | button::-moz-focus-inner, 114 | input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 115 | padding: 0; 116 | border: 0; 117 | } 118 | button, 119 | html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 120 | input[type="reset"], 121 | input[type="submit"] { 122 | -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. 123 | cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 124 | } 125 | label, 126 | select, 127 | button, 128 | input[type="button"], 129 | input[type="reset"], 130 | input[type="submit"], 131 | input[type="radio"], 132 | input[type="checkbox"] { 133 | cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 134 | } 135 | input[type="search"] { // Appearance in Safari/Chrome 136 | .box-sizing(content-box); 137 | -webkit-appearance: textfield; 138 | } 139 | input[type="search"]::-webkit-search-decoration, 140 | input[type="search"]::-webkit-search-cancel-button { 141 | -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 142 | } 143 | textarea { 144 | overflow: auto; // Remove vertical scrollbar in IE6-9 145 | vertical-align: top; // Readability and alignment cross-browser 146 | } 147 | 148 | 149 | // Printing 150 | // ------------------------- 151 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 152 | 153 | @media print { 154 | 155 | * { 156 | text-shadow: none !important; 157 | color: #000 !important; // Black prints faster: h5bp.com/s 158 | background: transparent !important; 159 | box-shadow: none !important; 160 | } 161 | 162 | a, 163 | a:visited { 164 | text-decoration: underline; 165 | } 166 | 167 | a[href]:after { 168 | content: " (" attr(href) ")"; 169 | } 170 | 171 | abbr[title]:after { 172 | content: " (" attr(title) ")"; 173 | } 174 | 175 | // Don't show links for images, or javascript/internal links 176 | .ir a:after, 177 | a[href^="javascript:"]:after, 178 | a[href^="#"]:after { 179 | content: ""; 180 | } 181 | 182 | pre, 183 | blockquote { 184 | border: 1px solid #999; 185 | page-break-inside: avoid; 186 | } 187 | 188 | thead { 189 | display: table-header-group; // h5bp.com/t 190 | } 191 | 192 | tr, 193 | img { 194 | page-break-inside: avoid; 195 | } 196 | 197 | img { 198 | max-width: 100% !important; 199 | } 200 | 201 | @page { 202 | margin: 0.5cm; 203 | } 204 | 205 | p, 206 | h2, 207 | h3 { 208 | orphans: 3; 209 | widows: 3; 210 | } 211 | 212 | h2, 213 | h3 { 214 | page-break-after: avoid; 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive-1200px-min.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Large desktop and up 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (min-width: 1200px) { 7 | 8 | // Fixed grid 9 | #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200); 10 | 11 | // Fluid grid 12 | #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200); 13 | 14 | // Input grid 15 | #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200); 16 | 17 | // Thumbnails 18 | .thumbnails { 19 | margin-left: -@gridGutterWidth1200; 20 | } 21 | .thumbnails > li { 22 | margin-left: @gridGutterWidth1200; 23 | } 24 | .row-fluid .thumbnails { 25 | margin-left: 0; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive-767px-max.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Landscape phone to desktop/tablet 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (max-width: 767px) { 7 | 8 | // Padding to set content in a bit 9 | body { 10 | padding-left: 20px; 11 | padding-right: 20px; 12 | } 13 | // Negative indent the now static "fixed" navbar 14 | .navbar-fixed-top, 15 | .navbar-fixed-bottom, 16 | .navbar-static-top { 17 | margin-left: -20px; 18 | margin-right: -20px; 19 | } 20 | // Remove padding on container given explicit padding set on body 21 | .container-fluid { 22 | padding: 0; 23 | } 24 | 25 | // TYPOGRAPHY 26 | // ---------- 27 | // Reset horizontal dl 28 | .dl-horizontal { 29 | dt { 30 | float: none; 31 | clear: none; 32 | width: auto; 33 | text-align: left; 34 | } 35 | dd { 36 | margin-left: 0; 37 | } 38 | } 39 | 40 | // GRID & CONTAINERS 41 | // ----------------- 42 | // Remove width from containers 43 | .container { 44 | width: auto; 45 | } 46 | // Fluid rows 47 | .row-fluid { 48 | width: 100%; 49 | } 50 | // Undo negative margin on rows and thumbnails 51 | .row, 52 | .thumbnails { 53 | margin-left: 0; 54 | } 55 | .thumbnails > li { 56 | float: none; 57 | margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present 58 | } 59 | // Make all grid-sized elements block level again 60 | [class*="span"], 61 | .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing 62 | .row-fluid [class*="span"] { 63 | float: none; 64 | display: block; 65 | width: 100%; 66 | margin-left: 0; 67 | .box-sizing(border-box); 68 | } 69 | .span12, 70 | .row-fluid .span12 { 71 | width: 100%; 72 | .box-sizing(border-box); 73 | } 74 | .row-fluid [class*="offset"]:first-child { 75 | margin-left: 0; 76 | } 77 | 78 | // FORM FIELDS 79 | // ----------- 80 | // Make span* classes full width 81 | .input-large, 82 | .input-xlarge, 83 | .input-xxlarge, 84 | input[class*="span"], 85 | select[class*="span"], 86 | textarea[class*="span"], 87 | .uneditable-input { 88 | .input-block-level(); 89 | } 90 | // But don't let it screw up prepend/append inputs 91 | .input-prepend input, 92 | .input-append input, 93 | .input-prepend input[class*="span"], 94 | .input-append input[class*="span"] { 95 | display: inline-block; // redeclare so they don't wrap to new lines 96 | width: auto; 97 | } 98 | .controls-row [class*="span"] + [class*="span"] { 99 | margin-left: 0; 100 | } 101 | 102 | // Modals 103 | .modal { 104 | position: fixed; 105 | top: 20px; 106 | left: 20px; 107 | right: 20px; 108 | width: auto; 109 | margin: 0; 110 | &.fade { top: -100px; } 111 | &.fade.in { top: 20px; } 112 | } 113 | 114 | } 115 | 116 | 117 | 118 | // UP TO LANDSCAPE PHONE 119 | // --------------------- 120 | 121 | @media (max-width: 480px) { 122 | 123 | // Smooth out the collapsing/expanding nav 124 | .nav-collapse { 125 | -webkit-transform: translate3d(0, 0, 0); // activate the GPU 126 | } 127 | 128 | // Block level the page header small tag for readability 129 | .page-header h1 small { 130 | display: block; 131 | line-height: @baseLineHeight; 132 | } 133 | 134 | // Update checkboxes for iOS 135 | input[type="checkbox"], 136 | input[type="radio"] { 137 | border: 1px solid #ccc; 138 | } 139 | 140 | // Remove the horizontal form styles 141 | .form-horizontal { 142 | .control-label { 143 | float: none; 144 | width: auto; 145 | padding-top: 0; 146 | text-align: left; 147 | } 148 | // Move over all input controls and content 149 | .controls { 150 | margin-left: 0; 151 | } 152 | // Move the options list down to align with labels 153 | .control-list { 154 | padding-top: 0; // has to be padding because margin collaspes 155 | } 156 | // Move over buttons in .form-actions to align with .controls 157 | .form-actions { 158 | padding-left: 10px; 159 | padding-right: 10px; 160 | } 161 | } 162 | 163 | // Medias 164 | // Reset float and spacing to stack 165 | .media .pull-left, 166 | .media .pull-right { 167 | float: none; 168 | display: block; 169 | margin-bottom: 10px; 170 | } 171 | // Remove side margins since we stack instead of indent 172 | .media-object { 173 | margin-right: 0; 174 | margin-left: 0; 175 | } 176 | 177 | // Modals 178 | .modal { 179 | top: 10px; 180 | left: 10px; 181 | right: 10px; 182 | } 183 | .modal-header .close { 184 | padding: 10px; 185 | margin: -10px; 186 | } 187 | 188 | // Carousel 189 | .carousel-caption { 190 | position: static; 191 | } 192 | 193 | } 194 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive-768px-979px.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Tablet to desktop 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (min-width: 768px) and (max-width: 979px) { 7 | 8 | // Fixed grid 9 | #grid > .core(@gridColumnWidth768, @gridGutterWidth768); 10 | 11 | // Fluid grid 12 | #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768); 13 | 14 | // Input grid 15 | #grid > .input(@gridColumnWidth768, @gridGutterWidth768); 16 | 17 | // No need to reset .thumbnails here since it's the same @gridGutterWidth 18 | 19 | } 20 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive-navbar.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Navbar 3 | // -------------------------------------------------- 4 | 5 | 6 | // TABLETS AND BELOW 7 | // ----------------- 8 | @media (max-width: @navbarCollapseWidth) { 9 | 10 | // UNFIX THE TOPBAR 11 | // ---------------- 12 | // Remove any padding from the body 13 | body { 14 | padding-top: 0; 15 | } 16 | // Unfix the navbars 17 | .navbar-fixed-top, 18 | .navbar-fixed-bottom { 19 | position: static; 20 | } 21 | .navbar-fixed-top { 22 | margin-bottom: @baseLineHeight; 23 | } 24 | .navbar-fixed-bottom { 25 | margin-top: @baseLineHeight; 26 | } 27 | .navbar-fixed-top .navbar-inner, 28 | .navbar-fixed-bottom .navbar-inner { 29 | padding: 5px; 30 | } 31 | .navbar .container { 32 | width: auto; 33 | padding: 0; 34 | } 35 | // Account for brand name 36 | .navbar .brand { 37 | padding-left: 10px; 38 | padding-right: 10px; 39 | margin: 0 0 0 -5px; 40 | } 41 | 42 | // COLLAPSIBLE NAVBAR 43 | // ------------------ 44 | // Nav collapse clears brand 45 | .nav-collapse { 46 | clear: both; 47 | } 48 | // Block-level the nav 49 | .nav-collapse .nav { 50 | float: none; 51 | margin: 0 0 (@baseLineHeight / 2); 52 | } 53 | .nav-collapse .nav > li { 54 | float: none; 55 | } 56 | .nav-collapse .nav > li > a { 57 | margin-bottom: 2px; 58 | } 59 | .nav-collapse .nav > .divider-vertical { 60 | display: none; 61 | } 62 | .nav-collapse .nav .nav-header { 63 | color: @navbarText; 64 | text-shadow: none; 65 | } 66 | // Nav and dropdown links in navbar 67 | .nav-collapse .nav > li > a, 68 | .nav-collapse .dropdown-menu a { 69 | padding: 9px 15px; 70 | font-weight: bold; 71 | color: @navbarLinkColor; 72 | .border-radius(3px); 73 | } 74 | // Buttons 75 | .nav-collapse .btn { 76 | padding: 4px 10px 4px; 77 | font-weight: normal; 78 | .border-radius(@baseBorderRadius); 79 | } 80 | .nav-collapse .dropdown-menu li + li a { 81 | margin-bottom: 2px; 82 | } 83 | .nav-collapse .nav > li > a:hover, 84 | .nav-collapse .nav > li > a:focus, 85 | .nav-collapse .dropdown-menu a:hover, 86 | .nav-collapse .dropdown-menu a:focus { 87 | background-color: @navbarBackground; 88 | } 89 | .navbar-inverse .nav-collapse .nav > li > a, 90 | .navbar-inverse .nav-collapse .dropdown-menu a { 91 | color: @navbarInverseLinkColor; 92 | } 93 | .navbar-inverse .nav-collapse .nav > li > a:hover, 94 | .navbar-inverse .nav-collapse .nav > li > a:focus, 95 | .navbar-inverse .nav-collapse .dropdown-menu a:hover, 96 | .navbar-inverse .nav-collapse .dropdown-menu a:focus { 97 | background-color: @navbarInverseBackground; 98 | } 99 | // Buttons in the navbar 100 | .nav-collapse.in .btn-group { 101 | margin-top: 5px; 102 | padding: 0; 103 | } 104 | // Dropdowns in the navbar 105 | .nav-collapse .dropdown-menu { 106 | position: static; 107 | top: auto; 108 | left: auto; 109 | float: none; 110 | display: none; 111 | max-width: none; 112 | margin: 0 15px; 113 | padding: 0; 114 | background-color: transparent; 115 | border: none; 116 | .border-radius(0); 117 | .box-shadow(none); 118 | } 119 | .nav-collapse .open > .dropdown-menu { 120 | display: block; 121 | } 122 | 123 | .nav-collapse .dropdown-menu:before, 124 | .nav-collapse .dropdown-menu:after { 125 | display: none; 126 | } 127 | .nav-collapse .dropdown-menu .divider { 128 | display: none; 129 | } 130 | .nav-collapse .nav > li > .dropdown-menu { 131 | &:before, 132 | &:after { 133 | display: none; 134 | } 135 | } 136 | // Forms in navbar 137 | .nav-collapse .navbar-form, 138 | .nav-collapse .navbar-search { 139 | float: none; 140 | padding: (@baseLineHeight / 2) 15px; 141 | margin: (@baseLineHeight / 2) 0; 142 | border-top: 1px solid @navbarBackground; 143 | border-bottom: 1px solid @navbarBackground; 144 | .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); 145 | } 146 | .navbar-inverse .nav-collapse .navbar-form, 147 | .navbar-inverse .nav-collapse .navbar-search { 148 | border-top-color: @navbarInverseBackground; 149 | border-bottom-color: @navbarInverseBackground; 150 | } 151 | // Pull right (secondary) nav content 152 | .navbar .nav-collapse .nav.pull-right { 153 | float: none; 154 | margin-left: 0; 155 | } 156 | // Hide everything in the navbar save .brand and toggle button */ 157 | .nav-collapse, 158 | .nav-collapse.collapse { 159 | overflow: hidden; 160 | height: 0; 161 | } 162 | // Navbar button 163 | .navbar .btn-navbar { 164 | display: block; 165 | } 166 | 167 | // STATIC NAVBAR 168 | // ------------- 169 | .navbar-static .navbar-inner { 170 | padding-left: 10px; 171 | padding-right: 10px; 172 | } 173 | 174 | 175 | } 176 | 177 | 178 | // DEFAULT DESKTOP 179 | // --------------- 180 | 181 | @media (min-width: @navbarCollapseDesktopWidth) { 182 | 183 | // Required to make the collapsing navbar work on regular desktops 184 | .nav-collapse.collapse { 185 | height: auto !important; 186 | overflow: visible !important; 187 | } 188 | 189 | } 190 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive-utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // IE10 Metro responsive 7 | // Required for Windows 8 Metro split-screen snapping with IE10 8 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 9 | @-ms-viewport{ 10 | width: device-width; 11 | } 12 | 13 | // Hide from screenreaders and browsers 14 | // Credit: HTML5 Boilerplate 15 | .hidden { 16 | display: none; 17 | visibility: hidden; 18 | } 19 | 20 | // Visibility utilities 21 | 22 | // For desktops 23 | .visible-phone { display: none !important; } 24 | .visible-tablet { display: none !important; } 25 | .hidden-phone { } 26 | .hidden-tablet { } 27 | .hidden-desktop { display: none !important; } 28 | .visible-desktop { display: inherit !important; } 29 | 30 | // Tablets & small desktops only 31 | @media (min-width: 768px) and (max-width: 979px) { 32 | // Hide everything else 33 | .hidden-desktop { display: inherit !important; } 34 | .visible-desktop { display: none !important ; } 35 | // Show 36 | .visible-tablet { display: inherit !important; } 37 | // Hide 38 | .hidden-tablet { display: none !important; } 39 | } 40 | 41 | // Phones only 42 | @media (max-width: 767px) { 43 | // Hide everything else 44 | .hidden-desktop { display: inherit !important; } 45 | .visible-desktop { display: none !important; } 46 | // Show 47 | .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior 48 | // Hide 49 | .hidden-phone { display: none !important; } 50 | } 51 | 52 | // Print utilities 53 | .visible-print { display: none !important; } 54 | .hidden-print { } 55 | 56 | @media print { 57 | .visible-print { display: inherit !important; } 58 | .hidden-print { display: none !important; } 59 | } 60 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/responsive.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.3.2 3 | * 4 | * Copyright 2013 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world by @mdo and @fat. 9 | */ 10 | 11 | 12 | // Responsive.less 13 | // For phone and tablet devices 14 | // ------------------------------------------------------------- 15 | 16 | 17 | // REPEAT VARIABLES & MIXINS 18 | // ------------------------- 19 | // Required since we compile the responsive stuff separately 20 | 21 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc 22 | @import "mixins.less"; 23 | 24 | 25 | // RESPONSIVE CLASSES 26 | // ------------------ 27 | 28 | @import "responsive-utilities.less"; 29 | 30 | 31 | // MEDIA QUERIES 32 | // ------------------ 33 | 34 | // Large desktops 35 | @import "responsive-1200px-min.less"; 36 | 37 | // Tablets to regular desktops 38 | @import "responsive-768px-979px.less"; 39 | 40 | // Phones to portrait tablets and narrow desktops 41 | @import "responsive-767px-max.less"; 42 | 43 | 44 | // RESPONSIVE NAVBAR 45 | // ------------------ 46 | 47 | // From 979px and below, show a button to toggle navbar contents 48 | @import "responsive-navbar.less"; 49 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/scaffolding.less: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // -------------------------------------------------- 4 | 5 | 6 | // Body reset 7 | // ------------------------- 8 | 9 | body { 10 | margin: 0; 11 | font-family: @baseFontFamily; 12 | font-size: @baseFontSize; 13 | line-height: @baseLineHeight; 14 | color: @textColor; 15 | background-color: @bodyBackground; 16 | } 17 | 18 | 19 | // Links 20 | // ------------------------- 21 | 22 | a { 23 | color: @linkColor; 24 | text-decoration: none; 25 | } 26 | a:hover, 27 | a:focus { 28 | color: @linkColorHover; 29 | text-decoration: underline; 30 | } 31 | 32 | 33 | // Images 34 | // ------------------------- 35 | 36 | // Rounded corners 37 | .img-rounded { 38 | .border-radius(6px); 39 | } 40 | 41 | // Add polaroid-esque trim 42 | .img-polaroid { 43 | padding: 4px; 44 | background-color: #fff; 45 | border: 1px solid #ccc; 46 | border: 1px solid rgba(0,0,0,.2); 47 | .box-shadow(0 1px 3px rgba(0,0,0,.1)); 48 | } 49 | 50 | // Perfect circle 51 | .img-circle { 52 | .border-radius(500px); // crank the border-radius so it works with most reasonably sized images 53 | } 54 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/thumbnails.less: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files 7 | 8 | // Make wrapper ul behave like the grid 9 | .thumbnails { 10 | margin-left: -@gridGutterWidth; 11 | list-style: none; 12 | .clearfix(); 13 | } 14 | // Fluid rows have no left margin 15 | .row-fluid .thumbnails { 16 | margin-left: 0; 17 | } 18 | 19 | // Float li to make thumbnails appear in a row 20 | .thumbnails > li { 21 | float: left; // Explicity set the float since we don't require .span* classes 22 | margin-bottom: @baseLineHeight; 23 | margin-left: @gridGutterWidth; 24 | } 25 | 26 | // The actual thumbnail (can be `a` or `div`) 27 | .thumbnail { 28 | display: block; 29 | padding: 4px; 30 | line-height: @baseLineHeight; 31 | border: 1px solid #ddd; 32 | .border-radius(@baseBorderRadius); 33 | .box-shadow(0 1px 3px rgba(0,0,0,.055)); 34 | .transition(all .2s ease-in-out); 35 | } 36 | // Add a hover/focus state for linked versions only 37 | a.thumbnail:hover, 38 | a.thumbnail:focus { 39 | border-color: @linkColor; 40 | .box-shadow(0 1px 4px rgba(0,105,214,.25)); 41 | } 42 | 43 | // Images and captions 44 | .thumbnail > img { 45 | display: block; 46 | max-width: 100%; 47 | margin-left: auto; 48 | margin-right: auto; 49 | } 50 | .thumbnail .caption { 51 | padding: 9px; 52 | color: @gray; 53 | } 54 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/tooltip.less: -------------------------------------------------------------------------------- 1 | // 2 | // Tooltips 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .tooltip { 8 | position: absolute; 9 | z-index: @zindexTooltip; 10 | display: block; 11 | visibility: visible; 12 | font-size: 11px; 13 | line-height: 1.4; 14 | .opacity(0); 15 | &.in { .opacity(80); } 16 | &.top { margin-top: -3px; padding: 5px 0; } 17 | &.right { margin-left: 3px; padding: 0 5px; } 18 | &.bottom { margin-top: 3px; padding: 5px 0; } 19 | &.left { margin-left: -3px; padding: 0 5px; } 20 | } 21 | 22 | // Wrapper for the tooltip content 23 | .tooltip-inner { 24 | max-width: 200px; 25 | padding: 8px; 26 | color: @tooltipColor; 27 | text-align: center; 28 | text-decoration: none; 29 | background-color: @tooltipBackground; 30 | .border-radius(@baseBorderRadius); 31 | } 32 | 33 | // Arrows 34 | .tooltip-arrow { 35 | position: absolute; 36 | width: 0; 37 | height: 0; 38 | border-color: transparent; 39 | border-style: solid; 40 | } 41 | .tooltip { 42 | &.top .tooltip-arrow { 43 | bottom: 0; 44 | left: 50%; 45 | margin-left: -@tooltipArrowWidth; 46 | border-width: @tooltipArrowWidth @tooltipArrowWidth 0; 47 | border-top-color: @tooltipArrowColor; 48 | } 49 | &.right .tooltip-arrow { 50 | top: 50%; 51 | left: 0; 52 | margin-top: -@tooltipArrowWidth; 53 | border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; 54 | border-right-color: @tooltipArrowColor; 55 | } 56 | &.left .tooltip-arrow { 57 | top: 50%; 58 | right: 0; 59 | margin-top: -@tooltipArrowWidth; 60 | border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; 61 | border-left-color: @tooltipArrowColor; 62 | } 63 | &.bottom .tooltip-arrow { 64 | top: 0; 65 | left: 50%; 66 | margin-left: -@tooltipArrowWidth; 67 | border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; 68 | border-bottom-color: @tooltipArrowColor; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Quick floats 7 | .pull-right { 8 | float: right; 9 | } 10 | .pull-left { 11 | float: left; 12 | } 13 | 14 | // Toggling content 15 | .hide { 16 | display: none; 17 | } 18 | .show { 19 | display: block; 20 | } 21 | 22 | // Visibility 23 | .invisible { 24 | visibility: hidden; 25 | } 26 | 27 | // For Affix plugin 28 | .affix { 29 | position: fixed; 30 | } 31 | -------------------------------------------------------------------------------- /examples/architecture/app/less/bootstrap/wells.less: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: @wellBackground; 12 | border: 1px solid darken(@wellBackground, 7%); 13 | .border-radius(@baseBorderRadius); 14 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-large { 23 | padding: 24px; 24 | .border-radius(@borderRadiusLarge); 25 | } 26 | .well-small { 27 | padding: 9px; 28 | .border-radius(@borderRadiusSmall); 29 | } 30 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/bootstrap.less: -------------------------------------------------------------------------------- 1 | /* BOOTSTRAP SPECIFIC CLASSES 2 | * -------------------------- */ 3 | 4 | /* Bootstrap 2.0 sprites.less reset */ 5 | [class^="icon-"], 6 | [class*=" icon-"] { 7 | display: inline; 8 | width: auto; 9 | height: auto; 10 | line-height: normal; 11 | vertical-align: baseline; 12 | background-image: none; 13 | background-position: 0% 0%; 14 | background-repeat: repeat; 15 | margin-top: 0; 16 | } 17 | 18 | /* more sprites.less reset */ 19 | .icon-white, 20 | .nav-pills > .active > a > [class^="icon-"], 21 | .nav-pills > .active > a > [class*=" icon-"], 22 | .nav-list > .active > a > [class^="icon-"], 23 | .nav-list > .active > a > [class*=" icon-"], 24 | .navbar-inverse .nav > .active > a > [class^="icon-"], 25 | .navbar-inverse .nav > .active > a > [class*=" icon-"], 26 | .dropdown-menu > li > a:hover > [class^="icon-"], 27 | .dropdown-menu > li > a:hover > [class*=" icon-"], 28 | .dropdown-menu > .active > a > [class^="icon-"], 29 | .dropdown-menu > .active > a > [class*=" icon-"], 30 | .dropdown-submenu:hover > a > [class^="icon-"], 31 | .dropdown-submenu:hover > a > [class*=" icon-"] { 32 | background-image: none; 33 | } 34 | 35 | 36 | /* keeps Bootstrap styles with and without icons the same */ 37 | .btn, .nav { 38 | [class^="icon-"], 39 | [class*=" icon-"] { 40 | // display: inline; 41 | &.icon-large { line-height: .9em; } 42 | &.icon-spin { display: inline-block; } 43 | } 44 | } 45 | .nav-tabs, .nav-pills { 46 | [class^="icon-"], 47 | [class*=" icon-"] { 48 | &, &.icon-large { line-height: .9em; } 49 | } 50 | } 51 | .btn { 52 | [class^="icon-"], 53 | [class*=" icon-"] { 54 | &.pull-left, &.pull-right { 55 | &.icon-2x { margin-top: .18em; } 56 | } 57 | &.icon-spin.icon-large { line-height: .8em; } 58 | } 59 | } 60 | .btn.btn-small { 61 | [class^="icon-"], 62 | [class*=" icon-"] { 63 | &.pull-left, &.pull-right { 64 | &.icon-2x { margin-top: .25em; } 65 | } 66 | } 67 | } 68 | .btn.btn-large { 69 | [class^="icon-"], 70 | [class*=" icon-"] { 71 | margin-top: 0; // overrides bootstrap default 72 | &.pull-left, &.pull-right { 73 | &.icon-2x { margin-top: .05em; } 74 | } 75 | &.pull-left.icon-2x { margin-right: .2em; } 76 | &.pull-right.icon-2x { margin-left: .2em; } 77 | } 78 | } 79 | 80 | /* Fixes alignment in nav lists */ 81 | .nav-list [class^="icon-"], 82 | .nav-list [class*=" icon-"] { 83 | line-height: inherit; 84 | } 85 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/core.less: -------------------------------------------------------------------------------- 1 | /* FONT AWESOME CORE 2 | * -------------------------- */ 3 | 4 | [class^="icon-"], 5 | [class*=" icon-"] { 6 | .icon-FontAwesome(); 7 | } 8 | 9 | [class^="icon-"]:before, 10 | [class*=" icon-"]:before { 11 | text-decoration: inherit; 12 | display: inline-block; 13 | speak: none; 14 | } 15 | 16 | /* makes the font 33% larger relative to the icon container */ 17 | .icon-large:before { 18 | vertical-align: -10%; 19 | font-size: 4/3em; 20 | } 21 | 22 | /* makes sure icons active on rollover in links */ 23 | a { 24 | [class^="icon-"], 25 | [class*=" icon-"] { 26 | display: inline; 27 | } 28 | } 29 | 30 | /* increased font size for icon-large */ 31 | [class^="icon-"], 32 | [class*=" icon-"] { 33 | &.icon-fixed-width { 34 | display: inline-block; 35 | width: 16/14em; 36 | text-align: right; 37 | padding-right: 4/14em; 38 | &.icon-large { 39 | width: 20/14em; 40 | } 41 | } 42 | } 43 | 44 | .icons-ul { 45 | margin-left: @icons-li-width; 46 | list-style-type: none; 47 | 48 | > li { position: relative; } 49 | 50 | .icon-li { 51 | position: absolute; 52 | left: -@icons-li-width; 53 | width: @icons-li-width; 54 | text-align: center; 55 | line-height: inherit; 56 | } 57 | } 58 | 59 | // allows usage of the hide class directly on font awesome icons 60 | [class^="icon-"], 61 | [class*=" icon-"] { 62 | &.hide { 63 | display: none; 64 | } 65 | } 66 | 67 | .icon-muted { color: @iconMuted; } 68 | .icon-light { color: @iconLight; } 69 | .icon-dark { color: @iconDark; } 70 | 71 | // Icon Borders 72 | // ------------------------- 73 | 74 | .icon-border { 75 | border: solid 1px @borderColor; 76 | padding: .2em .25em .15em; 77 | .border-radius(3px); 78 | } 79 | 80 | // Icon Sizes 81 | // ------------------------- 82 | 83 | .icon-2x { 84 | font-size: 2em; 85 | &.icon-border { 86 | border-width: 2px; 87 | .border-radius(4px); 88 | } 89 | } 90 | .icon-3x { 91 | font-size: 3em; 92 | &.icon-border { 93 | border-width: 3px; 94 | .border-radius(5px); 95 | } 96 | } 97 | .icon-4x { 98 | font-size: 4em; 99 | &.icon-border { 100 | border-width: 4px; 101 | .border-radius(6px); 102 | } 103 | } 104 | 105 | .icon-5x { 106 | font-size: 5em; 107 | &.icon-border { 108 | border-width: 5px; 109 | .border-radius(7px); 110 | } 111 | } 112 | 113 | 114 | // Floats & Margins 115 | // ------------------------- 116 | 117 | // Quick floats 118 | .pull-right { float: right; } 119 | .pull-left { float: left; } 120 | 121 | [class^="icon-"], 122 | [class*=" icon-"] { 123 | &.pull-left { 124 | margin-right: .3em; 125 | } 126 | &.pull-right { 127 | margin-left: .3em; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/extras.less: -------------------------------------------------------------------------------- 1 | /* EXTRAS 2 | * -------------------------- */ 3 | 4 | /* Stacked and layered icon */ 5 | .icon-stack(); 6 | 7 | /* Animated rotating icon */ 8 | .icon-spin { 9 | display: inline-block; 10 | -moz-animation: spin 2s infinite linear; 11 | -o-animation: spin 2s infinite linear; 12 | -webkit-animation: spin 2s infinite linear; 13 | animation: spin 2s infinite linear; 14 | } 15 | 16 | /* Prevent stack and spinners from being taken inline when inside a link */ 17 | a .icon-stack, 18 | a .icon-spin { 19 | display: inline-block; 20 | text-decoration: none; 21 | } 22 | 23 | @-moz-keyframes spin { 24 | 0% { -moz-transform: rotate(0deg); } 25 | 100% { -moz-transform: rotate(359deg); } 26 | } 27 | @-webkit-keyframes spin { 28 | 0% { -webkit-transform: rotate(0deg); } 29 | 100% { -webkit-transform: rotate(359deg); } 30 | } 31 | @-o-keyframes spin { 32 | 0% { -o-transform: rotate(0deg); } 33 | 100% { -o-transform: rotate(359deg); } 34 | } 35 | @-ms-keyframes spin { 36 | 0% { -ms-transform: rotate(0deg); } 37 | 100% { -ms-transform: rotate(359deg); } 38 | } 39 | @keyframes spin { 40 | 0% { transform: rotate(0deg); } 41 | 100% { transform: rotate(359deg); } 42 | } 43 | 44 | /* Icon rotations and mirroring */ 45 | .icon-rotate-90:before { 46 | -webkit-transform: rotate(90deg); 47 | -moz-transform: rotate(90deg); 48 | -ms-transform: rotate(90deg); 49 | -o-transform: rotate(90deg); 50 | transform: rotate(90deg); 51 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 52 | } 53 | 54 | .icon-rotate-180:before { 55 | -webkit-transform: rotate(180deg); 56 | -moz-transform: rotate(180deg); 57 | -ms-transform: rotate(180deg); 58 | -o-transform: rotate(180deg); 59 | transform: rotate(180deg); 60 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 61 | } 62 | 63 | .icon-rotate-270:before { 64 | -webkit-transform: rotate(270deg); 65 | -moz-transform: rotate(270deg); 66 | -ms-transform: rotate(270deg); 67 | -o-transform: rotate(270deg); 68 | transform: rotate(270deg); 69 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 70 | } 71 | 72 | .icon-flip-horizontal:before { 73 | -webkit-transform: scale(-1, 1); 74 | -moz-transform: scale(-1, 1); 75 | -ms-transform: scale(-1, 1); 76 | -o-transform: scale(-1, 1); 77 | transform: scale(-1, 1); 78 | } 79 | 80 | .icon-flip-vertical:before { 81 | -webkit-transform: scale(1, -1); 82 | -moz-transform: scale(1, -1); 83 | -ms-transform: scale(1, -1); 84 | -o-transform: scale(1, -1); 85 | transform: scale(1, -1); 86 | } 87 | 88 | /* ensure rotation occurs inside anchor tags */ 89 | a { 90 | .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { 91 | &:before { display: inline-block; } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 3.2.1 3 | * the iconic font designed for Bootstrap 4 | * ------------------------------------------------------------------------------ 5 | * The full suite of pictographic icons, examples, and documentation can be 6 | * found at http://fontawesome.io. Stay up to date on Twitter at 7 | * http://twitter.com/fontawesome. 8 | * 9 | * License 10 | * ------------------------------------------------------------------------------ 11 | * - The Font Awesome font is licensed under SIL OFL 1.1 - 12 | * http://scripts.sil.org/OFL 13 | * - Font Awesome CSS, LESS, and SASS files are licensed under MIT License - 14 | * http://opensource.org/licenses/mit-license.html 15 | * - Font Awesome documentation licensed under CC BY 3.0 - 16 | * http://creativecommons.org/licenses/by/3.0/ 17 | * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: 18 | * "Font Awesome by Dave Gandy - http://fontawesome.io" 19 | * 20 | * Author - Dave Gandy 21 | * ------------------------------------------------------------------------------ 22 | * Email: dave@fontawesome.io 23 | * Twitter: http://twitter.com/davegandy 24 | * Work: Lead Product Designer @ Kyruus - http://kyruus.com 25 | */ 26 | 27 | @import "variables.less"; 28 | @import "mixins.less"; 29 | @import "path.less"; 30 | @import "core.less"; 31 | @import "bootstrap.less"; 32 | @import "extras.less"; 33 | @import "icons.less"; 34 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .icon(@icon) { 5 | .icon-FontAwesome(); 6 | content: @icon; 7 | } 8 | 9 | .icon-FontAwesome() { 10 | font-family: FontAwesome; 11 | font-weight: normal; 12 | font-style: normal; 13 | text-decoration: inherit; 14 | -webkit-font-smoothing: antialiased; 15 | *margin-right: .3em; // fixes ie7 issues 16 | } 17 | 18 | .border-radius(@radius) { 19 | -webkit-border-radius: @radius; 20 | -moz-border-radius: @radius; 21 | border-radius: @radius; 22 | } 23 | 24 | .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { 25 | .icon-stack { 26 | position: relative; 27 | display: inline-block; 28 | width: @width; 29 | height: @height; 30 | line-height: @width; 31 | vertical-align: -35%; 32 | [class^="icon-"], 33 | [class*=" icon-"] { 34 | display: block; 35 | text-align: center; 36 | position: absolute; 37 | width: 100%; 38 | height: 100%; 39 | font-size: @top-font-size; 40 | line-height: inherit; 41 | *line-height: @height; 42 | } 43 | .icon-stack-base { 44 | font-size: @base-font-size; 45 | *line-height: @height / @base-font-size; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/architecture/app/less/font-awesome/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}'); 7 | src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'), 8 | url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'), 9 | url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype'), 10 | url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg'); 11 | // src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | -------------------------------------------------------------------------------- /examples/architecture/app/views/admin/groups/list.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Here could be something like table with groups.

    3 |
    -------------------------------------------------------------------------------- /examples/architecture/app/views/admin/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 12 | 13 |
    14 | 15 |
    16 |
    17 | 18 |
    -------------------------------------------------------------------------------- /examples/architecture/app/views/admin/users/list.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 |
    6 | 10 | NameE-mailExternal sync
    18 | 19 | {{user.getFullName()}}{{user.email}}{{user.extSync}} (can't be removed)
    26 |
    27 | 28 |
    29 |
    30 | 34 |
    35 | 36 |
    37 | 43 | 44 |
    45 |
    46 |
    47 |
    -------------------------------------------------------------------------------- /examples/architecture/config/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | config.set({ 3 | 4 | basePath: '../app', 5 | 6 | frameworks: ["jasmine"], 7 | 8 | files: [ 9 | '../test/lib/angular/angular.js', 10 | '../test/lib/angular/angular-*.js', 11 | 'lib/lodash.min.js', 12 | 'lib/angular-route-segment.js', 13 | '../test/lib/helpers.js', 14 | 'js/**/**/*.js', 15 | '../test/unit/**/*.js' 16 | ], 17 | 18 | autoWatch: true, 19 | singleRun: false, 20 | keepalive: true, 21 | 22 | browsers: ['PhantomJS'], 23 | 24 | preprocessors: { 25 | '**/*.html' : 'html2js' 26 | }, 27 | 28 | reporters: ['progress','junit'], 29 | 30 | junitReporter: { 31 | outputFile: '../junit.xml', 32 | suite: 'unit' 33 | } 34 | 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /examples/architecture/docs/arch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/examples/architecture/docs/arch.png -------------------------------------------------------------------------------- /examples/architecture/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "architecture-example", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "grunt": "", 6 | "grunt-contrib-uglify": "", 7 | "grunt-contrib-concat": "", 8 | "grunt-contrib-watch": "", 9 | "grunt-contrib-less": "", 10 | "grunt-karma": "", 11 | "grunt-cleanx": "", 12 | "grunt-contrib-clean": "", 13 | "grunt-contrib-copy": "", 14 | "karma": "", 15 | "karma-jasmine": "", 16 | "karma-phantomjs-launcher": "", 17 | "karma-junit-reporter": "" 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /examples/architecture/test/lib/angular/version.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/architecture/test/lib/helpers.js: -------------------------------------------------------------------------------- 1 | beforeEach(function() { 2 | this.addMatchers({ 3 | toEqualData: function(expected) { 4 | var notText = this.isNot ? " not" : ""; 5 | this.message = function() { 6 | return "Expected '" + angular.mock.dump(expected) + "'" + 7 | notText + " to equal '" + angular.mock.dump(this.actual) + "'."; 8 | }; 9 | return angular.equals(this.actual, expected); 10 | } 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /examples/common-resolve/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Common resolver: once for application 5 | 6 | 7 | 12 | 13 | 14 | 15 |
    16 | 21 | 22 | 23 |
    24 | 25 | 26 | 27 | 31 | 32 | 36 | 37 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /examples/promises/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | karma: { 8 | once: { 9 | options: { 10 | keepalive: true, 11 | configFile: 'karma.conf.js', 12 | autoWatch: false, 13 | singleRun: true 14 | } 15 | }, 16 | keep: { 17 | options: { 18 | keepalive: true, 19 | configFile: 'karma.conf.js', 20 | autoWatch: true, 21 | singleRun: false 22 | } 23 | } 24 | } 25 | 26 | }); 27 | 28 | grunt.loadNpmTasks('grunt-karma'); 29 | }; 30 | -------------------------------------------------------------------------------- /examples/promises/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | config.set({ 3 | 4 | basePath: '.', 5 | 6 | frameworks: ["jasmine"], 7 | 8 | files: [ 9 | '../../assets/js/angular-1.1.5.js', 10 | '../../assets/js/angular-mocks.js', 11 | '../../assets/js/lodash.min.js', 12 | 13 | '*.js' 14 | ], 15 | 16 | autoWatch: true, 17 | singleRun: false, 18 | keepalive: true, 19 | 20 | browsers: ['PhantomJS'], 21 | 22 | reporters: ['progress','junit'], 23 | 24 | unitReporter: { 25 | outputFile: 'junit.xml', 26 | suite: 'unit' 27 | } 28 | 29 | }); 30 | }; -------------------------------------------------------------------------------- /examples/promises/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "promises-examples", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "grunt": "", 6 | "grunt-contrib-watch": "", 7 | "grunt-karma": "", 8 | "karma": "", 9 | "karma-jasmine": "", 10 | "karma-phantomjs-launcher": "", 11 | "karma-junit-reporter": "" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Directives 5 | 6 | 7 | 8 | 9 | 18 | 19 | 20 |
    21 |

    Directives list

    22 |
    23 |
    ng-if
    24 |
    no additional requirements
    25 | 26 |
    tb-tooltip
    27 |
    require jQuery, Bootstrap Tooltips component
    28 | 29 |
    ui-alerts
    30 |
    no additional requirements
    31 | 32 |
    ui-checkbox
    33 |
    no additional requirements
    34 | 35 |
    ui-checkboxgroup
    36 |
    no additional requirements
    37 | 38 |
    ui-conditional-attributes
    39 |
    no additional requirements
    40 | 41 |
    ui-datetime
    42 |
    require jQuery, jQuery UI Datepicker widget
    43 | 44 |
    ui-equal-to
    45 |
    no additional requirements
    46 | 47 |
    ui-grid
    48 |
    no additional requirements
    49 | 50 |
    ui-isolated-form
    51 |
    no additional requirements
    52 | 53 |
    ui-length-limit
    54 |
    AngularJS 1.0.3
    55 | 56 |
    ui-multicombo
    57 |
    no additional requirements
    58 | 59 |
    ui-pagination
    60 |
    no additional requirements
    61 | 62 |
    ui-rate
    63 |
    require jQuery
    64 | 65 |
    ui-responsive-width
    66 |
    require jQuery
    67 | 68 |
    ui-source
    69 |
    require google-code-prettify
    70 |
    71 |

    Other

    72 |
    73 |
    Validation examples
    74 |
    Common resolve for all routes
    75 |
    Promises examples + unit-tests
    76 |
    OUTDATED: Example of AngularJS project architecture
    77 |
    Angular2 project architecture experiments
    78 |
    79 |
    80 | 81 | -------------------------------------------------------------------------------- /ng-if/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Test 4 | 5 | 6 | 7 | 8 | 9 | 36 | 37 | 38 | 39 | 40 | 41 | 46 | 47 |
    {{order.name}} 42 |
    43 | {{order.description}} 44 |
    45 |
    48 | 49 | 50 | 51 | 52 | 57 | 58 |
    {{order.name}} 53 |
    54 | {{order.description}} 55 |
    56 |
    59 | 60 | 61 | 62 | 63 | 66 | 71 | 72 |
    {{order.name}} 64 | {{order.description}} 65 | 67 | 68 | 69 | 70 |
    73 | 74 | -------------------------------------------------------------------------------- /ng-if/ng-if.js: -------------------------------------------------------------------------------- 1 | angular.module('ExperimentsModule', []) 2 | .directive('ngIf', function() { 3 | return { 4 | priority: 500, 5 | restrict: 'A', 6 | transclude: 'element', 7 | compile: function(element, attrs, transcludeFn) { 8 | var watchExpr = attrs.ngIf; 9 | 10 | return function(scope, element) { 11 | var selectedElement, 12 | selectedScope; 13 | 14 | scope.$watch(watchExpr, function(value) { 15 | if (selectedElement) { 16 | selectedScope.$destroy(); 17 | selectedElement.remove(); 18 | selectedElement = selectedScope = null; 19 | } 20 | 21 | if (value && transcludeFn) { 22 | selectedScope = scope.$new(); 23 | transcludeFn(selectedScope, function(transcludeElement) { 24 | selectedElement = transcludeElement; 25 | element.after(transcludeElement); 26 | }); 27 | }; 28 | }); 29 | }; 30 | } 31 | }; 32 | }); 33 | -------------------------------------------------------------------------------- /tb-tooltip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 37 | 38 | 39 |
    40 | 41 | 42 | 43 | 50 | 51 | 52 |
    {{order.description}} 44 | 47 | {{order.cancelDateTime | date:'dd.MM.yyyy HH:mm'}} 48 | 49 |
    53 |
    54 | 55 | -------------------------------------------------------------------------------- /tb-tooltip/tb-tooltip.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive("tbTooltip", function(){ 3 | return function(scope, element, iAttrs) { 4 | iAttrs.$observe('title', function(value) { 5 | // for updating tooltip when title changed 6 | element.removeData('tooltip'); 7 | 8 | element.tooltip(); 9 | }); 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /ui-alerts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 26 | 27 | 39 | 40 | 41 |
    42 |
    43 | 44 | 45 | 46 |
    47 |
    48 | 49 |
    50 |
    51 | 52 | -------------------------------------------------------------------------------- /ui-alerts/ui-alerts.js: -------------------------------------------------------------------------------- 1 | angular.module("UiAlertsModule", []) 2 | .factory('alertsService', ['$timeout', function ($timeout) { 3 | var baseAlert = { 4 | success: false, 5 | error: false, 6 | warning: false, 7 | message: '' 8 | }; 9 | return { 10 | messages: [], 11 | addSuccess: function (message) { 12 | this.messages.push(angular.extend({}, baseAlert, { success: true, message: message })); 13 | }, 14 | addError: function (message) { 15 | this.messages.push(angular.extend({}, baseAlert, { error: true, message: message })); 16 | }, 17 | addWarning: function (message) { 18 | var alert = angular.extend({}, baseAlert, { warning: true, message: message }); 19 | this.messages.push(alert); 20 | var self = this; 21 | $timeout(function () { 22 | self.remove(alert); 23 | }, 3000); 24 | }, 25 | remove: function (alert) { 26 | var index = this.messages.indexOf(alert); 27 | this.messages.splice(index, 1); 28 | } 29 | }; 30 | }]) 31 | .directive('uiAlerts', ['alertsService', function (alertsService) { 32 | return { 33 | restrict: 'EA', 34 | replace: true, 35 | template: 36 | '
    ' + 37 | '
    ' + 41 | '×' + 42 | '{{alert.message}}' + 43 | '
    ' + 44 | '
    ', 45 | link: function (scope) { 46 | scope.alerts = alertsService; 47 | } 48 | }; 49 | }]); 50 | -------------------------------------------------------------------------------- /ui-checkbox/css/ui-checkbox.css: -------------------------------------------------------------------------------- 1 | .checkbox-control { 2 | cursor: pointer; 3 | } 4 | .checkbox-control .checkbox-label { 5 | display: inline-block; 6 | margin-left: 3px; 7 | -webkit-touch-callout: none; 8 | -webkit-user-select: none; 9 | -khtml-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | } 14 | -------------------------------------------------------------------------------- /ui-checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 | 26 | 38 | 39 | 40 |
    41 | Test checkbox 1 42 | set true 43 | set false 44 |
    45 | Test checkbox 2 46 |
    47 | 48 | -------------------------------------------------------------------------------- /ui-checkbox/ui-checkbox.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive('uiCheckbox', function () { 3 | return { 4 | restrict: 'EA', 5 | replace: true, 6 | transclude: true, 7 | template: 8 | '
    ' + 9 | '' + 10 | '' + 11 | '
    ', 12 | require: 'ngModel', 13 | scope: true, 14 | link: function (scope, element, attrs, ngModelCtrl) { 15 | scope.value = false; 16 | 17 | ngModelCtrl.$render = function () { 18 | scope.value = ngModelCtrl.$viewValue; 19 | }; 20 | 21 | scope.toggle = function () { 22 | scope.value = !scope.value; 23 | ngModelCtrl.$setViewValue(scope.value); 24 | }; 25 | } 26 | }; 27 | }); 28 | -------------------------------------------------------------------------------- /ui-checkboxgroup/css/ui-checkboxgroup.css: -------------------------------------------------------------------------------- 1 | ul.checkbox-group { 2 | list-style-type: none; 3 | } -------------------------------------------------------------------------------- /ui-checkboxgroup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | 46 | 47 | 48 |
    49 |
    50 | 51 |

    selectedChoices

    52 | 55 | 56 | 57 | 58 | 59 |
    60 | 61 |
    62 |
    63 | 64 |

    selectedChoices

    65 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /ui-checkboxgroup/ui-checkboxgroup.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive("uiCheckboxgroup", function($document){ 3 | return { 4 | restrict: 'A', 5 | replace: true, 6 | template: 7 | '', 15 | scope: { 16 | _data: '=uiCheckboxgroup', 17 | _selectedItems: '=uiSelectedValues' 18 | }, 19 | controller: ['$scope', function($scope) { 20 | $scope.toggleSelectedItem = function(itemValue, checked) { 21 | var idx = $scope._selectedItems.indexOf(itemValue); 22 | 23 | //already selected 24 | if (checked && idx > -1) return; 25 | 26 | if (checked) $scope._selectedItems.push(itemValue); 27 | else $scope._selectedItems.splice(idx, 1); 28 | }; 29 | 30 | $scope.isItemSelected = function(itemValue) { 31 | return $scope._selectedItems.indexOf(itemValue) > -1; 32 | }; 33 | } 34 | ] 35 | }; 36 | }); -------------------------------------------------------------------------------- /ui-conditional-attributes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 35 | 36 | 41 | 42 | 43 |
    44 |

    Width: {{width}}

    45 |

    Change width from 1170 to 940 and back and watch the stars

    46 | 47 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 | 60 | 61 |
    TextTextTextText 53 | 54 |
    58 | Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 59 |
    62 |
    63 | 64 | -------------------------------------------------------------------------------- /ui-conditional-attributes/ui-conditional-attributes.js: -------------------------------------------------------------------------------- 1 | angular.module("UiConditionalAttributesModule", []) 2 | .directive('uiConditionalAttributes', function () { 3 | return { 4 | priority: 1000, 5 | link: function (scope, element, attrs) { 6 | var conditions = JSON.parse(attrs.uiConditionalAttributes); 7 | for (var condition in conditions) { 8 | var handlerFactory = function (cond) { 9 | return function (newValue) { 10 | if (newValue) { 11 | var attributes = conditions[cond]; 12 | for (var attr in attributes) { 13 | attrs.$set(attr, attributes[attr]); 14 | } 15 | } 16 | }; 17 | }; 18 | scope.$watch(condition, handlerFactory(condition)); 19 | }; 20 | } 21 | }; 22 | }); 23 | -------------------------------------------------------------------------------- /ui-datetime/css/ui-datetime.css: -------------------------------------------------------------------------------- 1 | .ui-datetime .date { 2 | width: 8em; 3 | } 4 | 5 | .ui-datetime .hours, 6 | .ui-datetime .minutes { 7 | width: 3em; 8 | } 9 | 10 | .ui-datetime input+input { 11 | margin-left: 5px; 12 | } -------------------------------------------------------------------------------- /ui-datetime/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 33 | 34 | 35 |
    36 | 37 | {{dates.datetime1}} 38 |
    39 | 40 | -------------------------------------------------------------------------------- /ui-datetime/ui-datetime.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive("uiDatetime", function(){ 3 | return { 4 | restrict: 'EA', 5 | replace: true, 6 | template: '
    ' + 7 | '' + 8 | '' + 9 | '' + 10 | '
    ', 11 | require: 'ngModel', 12 | scope: true, 13 | link: function(scope, element, attrs, ngModelCtrl) { 14 | var elDate = element.find('input.date'); 15 | 16 | ngModelCtrl.$render = function () { 17 | var date = new Date(ngModelCtrl.$viewValue); 18 | var fillNull = function(num) { 19 | if (num < 10) return '0' + num; 20 | return num; 21 | }; 22 | scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear(); 23 | scope._hours = date.getHours(); 24 | scope._minutes = date.getMinutes(); 25 | }; 26 | 27 | elDate.datepicker({ 28 | dateFormat: 'dd.mm.yy', 29 | onSelect: function(value, picker) { 30 | scope._date = value; 31 | scope.$apply(); 32 | } 33 | }); 34 | 35 | var watchExpr = function() { 36 | var res = scope._date.split('.'); 37 | if (res.length == 3) return new Date(res[2], res[1] - 1, res[0], scope._hours, scope._minutes); 38 | return 0; 39 | }; 40 | scope.$watch(watchExpr, function (newValue) { 41 | ngModelCtrl.$setViewValue(newValue); 42 | }, true); 43 | } 44 | }; 45 | }); 46 | -------------------------------------------------------------------------------- /ui-equal-to/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 43 | 44 | 49 | 50 | 51 |
    52 |

    Password equality validation

    53 |
    54 |
    55 |

    Change password

    56 |
    57 | 58 | 59 | 60 | 61 | 62 |
    63 | Should be equal to password 64 |
    65 | 66 |
    67 | 68 |
    69 |
    70 |
    71 |
    72 | 73 |
    74 | 75 | 76 | 77 | 78 | 79 |
    80 | Should be equal to password 81 |
    82 | 83 |
    84 | 85 |
    86 |
    87 |     88 |
    89 |
    90 |
    91 | 92 | -------------------------------------------------------------------------------- /ui-equal-to/ui-equal-to.js: -------------------------------------------------------------------------------- 1 | angular.module("UiEqualToModule", []) 2 | .directive('uiEqualTo', function(){ 3 | return { 4 | restrict: 'A', 5 | require: 'ngModel', 6 | link: function (scope, elm, attrs, ctrl) { 7 | 8 | function validateEqual(myValue, otherValue) { 9 | if (myValue === otherValue) { 10 | ctrl.$setValidity('equal', true); 11 | return myValue; 12 | } else { 13 | ctrl.$setValidity('equal', false); 14 | return myValue; 15 | } 16 | } 17 | 18 | scope.$watch(attrs.uiEqualTo, function (otherModelValue) { 19 | validateEqual(ctrl.$viewValue, otherModelValue); 20 | }); 21 | 22 | ctrl.$parsers.unshift(function (viewValue) { 23 | return validateEqual(viewValue, scope.$eval(attrs.uiEqualTo)); 24 | }); 25 | 26 | ctrl.$formatters.unshift(function (modelValue) { 27 | return validateEqual(modelValue, scope.$eval(attrs.uiEqualTo)); 28 | }); 29 | } 30 | }; 31 | }); 32 | -------------------------------------------------------------------------------- /ui-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 60 | 61 | 89 | 90 | 91 |
    92 |
    93 | 94 | $scope.data = [ 95 | { column1: 'aaa', column2: '333', column3: 'aaa', column4: 'sdf' }, 96 | { column1: 'bbb', column2: '222', column3: 'zzz', column4: 'sdf' }, 97 | { column1: 'ccc', column2: '111', column3: 'ddd', column4: 'sdf' } 98 | ] 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
    108 |
    109 | 110 | 111 | 112 | 113 | 114 |
    115 |
    116 | 117 | -------------------------------------------------------------------------------- /ui-grid/ui-grid.js: -------------------------------------------------------------------------------- 1 | angular.module("UiGridModule", []) 2 | .directive('uiGrid', function () { 3 | return { 4 | restrict: 'EA', 5 | replace: true, 6 | transclude: true, 7 | template: 8 | '
    ' + 9 | '
    ' + 10 | '' + 11 | '' + 12 | '' + 18 | '' + 19 | '' + 20 | '' + 23 | '' + 24 | '
    ' + 16 | '{{column.name}} ' + 17 | '
    ' + 21 | '{{row[column.name]}}' + 22 | '
    ' + 25 | '
    ', 26 | scope: { 27 | rows: '=source' 28 | }, 29 | controller: function($scope) { 30 | var columns = $scope.columns = []; 31 | 32 | this.addColumn = function(column){ 33 | columns.push(column); 34 | }; 35 | 36 | $scope.sortBy = function(column) { 37 | if (!column.sortable) return; 38 | 39 | if ($scope.sortColumn == column.name) { 40 | $scope.reverse = !$scope.reverse; 41 | } else { 42 | $scope.sortColumn = column.name; 43 | $scope.reverse = false; 44 | } 45 | }; 46 | 47 | $scope.getSortDir = function(column) { 48 | if ($scope.sortColumn == column.name) { 49 | return $scope.reverse ? 'desc' : 'asc'; 50 | } 51 | }; 52 | } 53 | }; 54 | }) 55 | .directive('column', function() { 56 | return { 57 | restrict: 'EA', 58 | require: '^uiGrid', 59 | link: function (scope, element, attrs, uiGridCtrl) { 60 | uiGridCtrl.addColumn({ 61 | name: attrs.name, 62 | sortable: scope.$eval(attrs.sortable) 63 | }); 64 | } 65 | }; 66 | }); 67 | -------------------------------------------------------------------------------- /ui-isolated-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 43 | 44 | 63 | 64 | 65 |
    66 |

    Isolated form

    67 |
    68 |
    69 |

    Object creating

    70 |
    71 |
    72 | Main info: 73 | 74 | 75 | 76 | 77 | 78 |
    79 | 80 |
    81 | Sites: 82 |
      83 |
    • {{site.name}} ({{site.url}})
      • 84 |
    85 | 86 | 87 | 88 | 91 | 92 |

    This isolated form doesn't affect the validity of main (parent) form.

    93 |
    94 | 95 |
    96 | 97 |
    98 |
    99 |
    100 |
    101 | 102 |
    103 |
    104 | Main info: 105 | 106 | 107 | 108 | 109 | 110 |
    111 | 112 |
    113 | Sites: 114 |
      115 |
    • {{site.name}} ({{site.url}})
      • 116 |
    117 | 118 | 119 | 120 | 123 | 124 |

    This isolated form doesn't affect the validity of main (parent) form.

    125 |
    126 | 127 |
    128 | 129 |
    130 |
    131 |     132 |
    133 |
    134 |
    135 | 136 | -------------------------------------------------------------------------------- /ui-isolated-form/ui-isolated-form.js: -------------------------------------------------------------------------------- 1 | angular.module("UiIsolatedFormModule", []) 2 | .directive('uiIsolatedForm', function(){ 3 | return { 4 | require: 'form', 5 | link: function(scope, formElement, attrs, formController) { 6 | var parentFormCtrl = formElement.parent().controller('form'); 7 | var core$setValidity = formController.$setValidity; 8 | formController.$setValidity = function(validationToken, isValid, control) { 9 | core$setValidity(validationToken, isValid, control); 10 | if (!isValid && parentFormCtrl) { 11 | parentFormCtrl.$setValidity(validationToken, true, formController); 12 | } 13 | } 14 | } 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /ui-length-limit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 30 | 31 | 32 |
    33 | Max symbols: 10
    34 | 35 |
    36 | 37 | -------------------------------------------------------------------------------- /ui-length-limit/ui-length-limit.js: -------------------------------------------------------------------------------- 1 | angular.module("UiLengthLimitModule", []) 2 | .directive('uiLengthLimit', ['$parse', function ($parse) { 3 | return { 4 | require: 'ngModel', 5 | link: function (scope, element, attrs, ngModelCtrl) { 6 | var ngModelSet = $parse(attrs.ngModel).assign; 7 | 8 | ngModelCtrl.$viewChangeListeners.push(function() { 9 | ngModelSet(scope, ngModelCtrl.$viewValue.slice(0, attrs.uiLengthLimit)); 10 | }); 11 | } 12 | }; 13 | }]); -------------------------------------------------------------------------------- /ui-multicombo/css/ui-multicombo-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreev-artem/angular_experiments/9a2cd51d1daca5fabef35cc0e7f6e9bc4e527f0c/ui-multicombo/css/ui-multicombo-sprite.png -------------------------------------------------------------------------------- /ui-multicombo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | 46 | 47 | 48 |
    49 |
    50 | 51 |

    choices

    52 | 55 | 56 |

    selectedChoices

    57 | 60 | 61 | 62 | 63 | 64 |
    65 | 66 |
    67 |
    68 | 69 |

    choices

    70 | 73 | 74 |

    selectedChoices

    75 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /ui-multicombo/ui-multicombo.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive("uiMcomboChoices", function($document){ 3 | // simultaneously should not be two open items 4 | var openElement = null, close; 5 | return { 6 | restrict: 'A', 7 | replace: true, 8 | template: 9 | '
    ' + 10 | ' ' + 19 | '
    ' + 20 | ' ' + 26 | '
    ' + 27 | '
    ', 28 | scope: { 29 | _choices: '=uiMcomboChoices', 30 | _selectedChoices: '=uiMcomboSelected', 31 | _placeholder: '@uiMcomboPlaceholder' 32 | }, 33 | controller: ['$scope', '$filter', function($scope, $filter) { 34 | $scope._searchElem = null; 35 | 36 | $scope.filteredChoices = function() { 37 | var filtered = $filter('filter')($scope._choices, $scope._search); 38 | return $filter('orderBy')(filtered, 'text'); 39 | }; 40 | 41 | $scope.moveToSelected = function(choice, $event) { 42 | $scope._selectedChoices.push(choice); 43 | $scope._choices.splice($scope._choices.indexOf(choice), 1); 44 | $scope._search=''; 45 | 46 | $scope._searchElem.focus(); 47 | 48 | // do not 'close' on choice click 49 | $event.preventDefault(); 50 | $event.stopPropagation(); 51 | }; 52 | 53 | $scope.removeFromSelected = function(choice) { 54 | $scope._choices.push(choice); 55 | $scope._selectedChoices.splice($scope._selectedChoices.indexOf(choice), 1); 56 | 57 | $scope._searchElem.focus(); 58 | }; 59 | } 60 | ], 61 | link: function(scope, element, attrs) { 62 | var selUl = element.children().eq(0); 63 | var selItems = selUl.children(); 64 | scope._searchElem = selItems.eq(selItems.length-1).children().eq(0)[0]; 65 | selUl.bind('click', function(event) { 66 | // otherwise 'close' will be called immediately 67 | event.preventDefault(); 68 | event.stopPropagation(); 69 | 70 | if (openElement) { 71 | close(); 72 | } 73 | 74 | if (!element.hasClass('mcombo-container-active')) { 75 | element.addClass('mcombo-container-active'); 76 | openElement = element; 77 | 78 | close = function (event) { 79 | event && event.preventDefault(); 80 | event && event.stopPropagation(); 81 | $document.unbind('click', close); 82 | element.removeClass('mcombo-container-active'); 83 | close = null; 84 | openElement = null; 85 | }; 86 | $document.bind('click', close); 87 | } 88 | 89 | scope._searchElem.focus(); 90 | }); 91 | } 92 | }; 93 | }); -------------------------------------------------------------------------------- /ui-pagination/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 39 | 40 | 41 |
    42 |

    Page:

    43 | 44 | 45 |
    Display:
    46 |
    47 | 48 | -------------------------------------------------------------------------------- /ui-pagination/ui-pagination.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive('uiPagination', function () { 3 | return { 4 | restrict: 'EA', 5 | replace: true, 6 | template: 7 | '', 29 | scope: { 30 | cur: '=', 31 | total: '=', 32 | display: '@' 33 | }, 34 | link: function (scope, element, attrs) { 35 | var calcPages = function () { 36 | var display = +scope.display; 37 | var delta = Math.floor(display / 2); 38 | scope.start = scope.cur - delta; 39 | if (scope.start < 1) { 40 | scope.start = 1; 41 | } 42 | scope.end = scope.start + display - 1; 43 | if (scope.end > scope.total) { 44 | scope.end = scope.total; 45 | scope.start = scope.end - (display - 1); 46 | if (scope.start < 1) { 47 | scope.start = 1; 48 | } 49 | } 50 | 51 | scope.pages = []; 52 | for (var i = scope.start; i <= scope.end; ++i) { 53 | scope.pages.push(i); 54 | } 55 | }; 56 | scope.$watch('cur', calcPages); 57 | scope.$watch('total', calcPages); 58 | scope.$watch('display', calcPages); 59 | 60 | scope.isCurrent = function (index) { 61 | return scope.cur == index; 62 | }; 63 | 64 | scope.setCurrent = function (index) { 65 | scope.cur = index; 66 | }; 67 | 68 | scope.hasPrev = function () { 69 | return scope.cur > 1; 70 | }; 71 | scope.prev = function () { 72 | if (scope.hasPrev()) scope.cur--; 73 | }; 74 | 75 | scope.hasNext = function () { 76 | return scope.cur < scope.total; 77 | }; 78 | scope.next = function () { 79 | if (scope.hasNext()) scope.cur++; 80 | }; 81 | 82 | scope.firstPage = function () { 83 | return scope.start == 1; 84 | }; 85 | scope.goToFirstPage = function () { 86 | if (!scope.firstPage()) scope.cur = 1; 87 | }; 88 | scope.lastPage = function () { 89 | return scope.end == scope.total; 90 | }; 91 | scope.goToLastPage = function () { 92 | if (!scope.lastPage()) scope.cur = scope.total; 93 | }; 94 | } 95 | }; 96 | }); -------------------------------------------------------------------------------- /ui-rate/css/ui-rate.css: -------------------------------------------------------------------------------- 1 | .rate-control { 2 | margin: 0; 3 | list-style: none; 4 | } 5 | 6 | .rate-control:before, 7 | .rate-control:after { 8 | display: table; 9 | content: ""; 10 | line-height: 0; 11 | } 12 | 13 | .rate-control:after { 14 | clear: both; 15 | } 16 | 17 | .rate-control li { 18 | float: left; 19 | } 20 | 21 | .icon-star-empty.icon-star-half:after { 22 | font-family: FontAwesome; 23 | font-weight: normal; 24 | font-style: normal; 25 | display: inline-block; 26 | text-decoration: inherit; 27 | content: "\f006"; 28 | text-indent: -.4em; 29 | } -------------------------------------------------------------------------------- /ui-rate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 30 | 31 | 42 | 43 | 44 |
    45 | 46 | 47 |
    48 | 49 | -------------------------------------------------------------------------------- /ui-rate/ui-rate.js: -------------------------------------------------------------------------------- 1 | angular.module("ExperimentsModule", []) 2 | .directive('uiRate', function () { 3 | return { 4 | restrict: 'EA', 5 | replace: true, 6 | template: 7 | '', 12 | require: 'ngModel', 13 | scope: true, 14 | link: function (scope, element, attrs, ngModelCtrl) { 15 | scope.value = undefined; 16 | scope.items = new Array(+attrs.max); 17 | 18 | ngModelCtrl.$render = function () { 19 | scope.last_value = scope.value = ngModelCtrl.$viewValue; 20 | }; 21 | 22 | scope.getClass = function(index) { 23 | if (index >= scope.value) { 24 | return 'icon-star-empty'; 25 | } 26 | if (index == Math.floor(scope.value)) { 27 | return 'icon-star-empty icon-star-half'; 28 | } 29 | if (index < scope.value) { 30 | return 'icon-star'; 31 | } 32 | }; 33 | 34 | scope.setValue = function(index, e) { 35 | var star = angular.element(e.target); 36 | if (e.pageX < star.offset().left + star.outerWidth() / 2) { 37 | scope.last_value = index + 0.5; 38 | } else { 39 | scope.last_value = index + 1; 40 | } 41 | ngModelCtrl.$setViewValue(scope.last_value); 42 | }; 43 | 44 | setTimeout(function(){ 45 | scope.last_value = scope.value; 46 | var stars = element.find('i'); 47 | angular.forEach(stars, function(elem, index){ 48 | var star = angular.element(elem); 49 | star.bind('mousemove', function(e){ 50 | if (e.pageX < star.offset().left + star.outerWidth() / 2) { 51 | scope.value = index + 0.5; 52 | } else { 53 | scope.value = index + 1; 54 | } 55 | if (!scope.$$phase) { 56 | scope.$digest(); 57 | } 58 | }); 59 | }); 60 | element.bind('mouseout', function(){ 61 | scope.value = scope.last_value; 62 | if (!scope.$$phase) { 63 | scope.$digest(); 64 | } 65 | }); 66 | }, 0); 67 | } 68 | }; 69 | }); 70 | -------------------------------------------------------------------------------- /ui-responsive-width/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 26 | 27 | 28 |
    29 |

    Current width: {{width}}

    30 | 31 |
    This content is displayed when container width is 1170
    32 |
    This content is displayed when container width is 940
    33 |
    This content is displayed when container width is not 1170 or 940
    34 |     35 |
    36 | 37 | -------------------------------------------------------------------------------- /ui-responsive-width/ui-responsive-width.js: -------------------------------------------------------------------------------- 1 | angular.module("UiResponsiveWidthModule", []) 2 | .directive('uiResponsiveWidth', function ($parse) { 3 | return function (scope, element, attrs) { 4 | var width = element.width(); 5 | var setWidth = $parse(attrs.uiResponsiveWidth).assign; 6 | setWidth(scope, width); 7 | 8 | setInterval(function () { 9 | var newWidth = element.width(); 10 | if (newWidth != width) { 11 | width = newWidth; 12 | setWidth(scope, width); 13 | scope.$apply(); 14 | } 15 | }, 250); 16 | }; 17 | }); 18 | -------------------------------------------------------------------------------- /ui-source/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 26 | 27 | 28 |
    29 | 30 | 31 |
    32 | 33 | 34 |
    35 |

    Hello {{yourName}}!

    36 |
    37 |     38 |     39 |
    40 | 41 | -------------------------------------------------------------------------------- /ui-source/ui-source.js: -------------------------------------------------------------------------------- 1 | angular.module("UiSourceModule", []) 2 | .directive('uiSource', function () { 3 | return { 4 | restrict: 'EA', 5 | terminal: true, 6 | compile: function (elem) { 7 | var escape = function(content) { 8 | return content 9 | .replace(/\&/g, '&') 10 | .replace(/\/g, '>') 12 | .replace(/"/g, '"'); 13 | }; 14 | 15 | var pre = angular.element('
    ');
16 |                 pre.append(prettyPrintOne(escape(elem.html().slice(1)), undefined, true));
17 |                 elem.replaceWith(pre);
18 |             }
19 |         };
20 |     });
21 | 


--------------------------------------------------------------------------------