├── Demos ├── .gitignore ├── gulpfile.js ├── package.json └── src │ ├── content │ ├── basic │ │ ├── border_margin_padding.css │ │ ├── inheritance_in_action.css │ │ ├── simple_selectors.css │ │ ├── specifity.css │ │ ├── specifying_property_values.css │ │ ├── using_font_family.css │ │ └── using_the_cascade.css │ ├── flex │ │ └── site.css │ ├── images │ │ ├── 3-cerditos.jpg │ │ ├── braulio-diez.png │ │ ├── gift.png │ │ ├── girl.png │ │ ├── jaime-salas.jpg │ │ ├── lollipop.png │ │ ├── teddy.png │ │ └── toad.jpg │ ├── materialize │ │ └── site.css │ ├── positioning │ │ ├── absolute.css │ │ ├── fixed.css │ │ ├── float.css │ │ ├── relative.css │ │ └── static_inherit_z_index.css │ ├── sass │ │ ├── bem │ │ │ ├── bem.scss │ │ │ ├── mixin-at-root.scss │ │ │ ├── mixins.scss │ │ │ ├── no-bem.scss │ │ │ └── sass-bem.scss │ │ ├── custom_bootstrap │ │ │ ├── _variables.scss │ │ │ └── main.scss │ │ ├── playground │ │ │ └── main.scss │ │ ├── test │ │ │ ├── colors.scss │ │ │ ├── init.scss │ │ │ ├── main.scss │ │ │ ├── mixins.scss │ │ │ └── palate.scss │ │ ├── using_control_directives │ │ │ ├── functions.scss │ │ │ ├── init.scss │ │ │ ├── main.scss │ │ │ └── mixins.scss │ │ ├── using_extend │ │ │ ├── colors.scss │ │ │ ├── form.scss │ │ │ └── init.scss │ │ ├── using_function │ │ │ ├── colors.scss │ │ │ ├── form.scss │ │ │ ├── functions.scss │ │ │ ├── init.scss │ │ │ └── mixins.scss │ │ ├── using_import │ │ │ ├── colors.scss │ │ │ ├── form.scss │ │ │ └── init.scss │ │ ├── using_mixins │ │ │ ├── colors.scss │ │ │ ├── form.scss │ │ │ ├── init.scss │ │ │ └── mixins.scss │ │ ├── using_rules │ │ │ └── form.scss │ │ └── variables_and_functions │ │ │ └── form.scss │ └── site.css │ ├── index.html │ ├── js │ ├── bootstrap.js │ └── jquery.js │ └── pages │ ├── basic │ ├── border_margin_padding.html │ ├── inheritance_in_action.html │ ├── simple_selectors.html │ ├── specifity.html │ ├── specifying_property_values.html │ ├── using_font_family.html │ └── using_the_cascade.html │ ├── bootstrap3 │ ├── 01 BasicColumnsA │ │ └── index.html │ ├── 02 BasicColumnsB │ │ └── index.html │ ├── 03 BasicColumnsC │ │ └── index.html │ ├── 04 NestedColumns │ │ └── index.html │ ├── 05 Forms │ │ ├── assets │ │ │ ├── css │ │ │ │ └── site.css │ │ │ └── images │ │ │ │ ├── archive.png │ │ │ │ └── logo.png │ │ └── index.html │ ├── 06 NavBar │ │ ├── assets │ │ │ ├── css │ │ │ │ └── site.css │ │ │ └── images │ │ │ │ └── logo.png │ │ └── index.html │ └── 07 Tables │ │ ├── assets │ │ ├── css │ │ │ └── site.css │ │ └── images │ │ │ └── logo.png │ │ └── index.html │ ├── flex │ └── index.html │ ├── materialize │ ├── 01 Hello materialize │ │ └── index.html │ ├── 02 BasicGrid │ │ └── index.html │ ├── 03 ResponsiveGrid │ │ └── index.html │ └── 04 Forms │ │ └── index.html │ ├── positioning │ ├── absolute.html │ ├── fixed.html │ ├── float.html │ ├── relative.html │ └── static_inherit_z_index.html │ ├── rwd │ ├── basic-transform.html │ ├── media-queries-print.html │ ├── media-queries.html │ └── transform-with-image.html │ └── sass │ ├── bem │ ├── bem.html │ ├── no-bem.html │ └── sass-bem.html │ ├── custom_bootstrap │ └── index.html │ ├── plain │ ├── form.css │ └── form.html │ ├── playground │ └── index.html │ ├── test │ └── index.html │ ├── using_control_directives │ └── index.html │ ├── using_extend │ └── form.html │ ├── using_function │ └── form.html │ ├── using_import │ └── form.html │ ├── using_mixins │ └── form.html │ ├── using_rules │ └── form.html │ └── variables_and_functions │ └── form.html └── LICENSE /Demos/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist/ 4 | typings/ 5 | *.orig 6 | .idea/ 7 | compile_css 8 | -------------------------------------------------------------------------------- /Demos/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | connect = require('gulp-connect'), 5 | open = require('gulp-open'), 6 | sass = require('gulp-sass'), 7 | options = { 8 | port: 9005, 9 | root: ['src'], 10 | devBase: 'http://localhost:', 11 | browser: 'chrome', 12 | sassFolder: './src/content/sass/**/*.scss', 13 | cssCompile: './src/content/compile_css' 14 | }; 15 | 16 | gulp.task('connect', function(){ 17 | var openOptions = { 18 | uri: options.devBase + options.port, 19 | app: options.browser 20 | }; 21 | connect.server({ 22 | root: options.root, 23 | port: options.port 24 | }); 25 | }); 26 | 27 | gulp.task('open', function() { 28 | var openOptions = { 29 | uri: options.devBase + options.port, 30 | app: options.browser 31 | }; 32 | gulp.src(__filename) 33 | .pipe(open(openOptions)); 34 | }); 35 | 36 | gulp.task('sass', function(){ 37 | return gulp.src(options.sassFolder) 38 | .pipe(sass().on('error', sass.logError)) 39 | .pipe(gulp.dest(options.cssCompile)); 40 | }); 41 | 42 | gulp.task('copy', function() { 43 | gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js') 44 | .pipe(gulp.dest('src/js')); 45 | 46 | gulp.src('./node_modules/jquery/dist/jquery.js') 47 | .pipe(gulp.dest('src/js')); 48 | }) 49 | 50 | gulp.task('watch', function(){ 51 | gulp.watch(options.sassFolder, ['sass']); 52 | }); 53 | 54 | gulp.task('default', ['connect', 'open', 'watch']); 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Demos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demos", 3 | "version": "1.0.0", 4 | "description": "Current demos for Lemoncode Master 16/17", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp" 8 | }, 9 | "author": "Jaime Salas", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "bootstrap-sass": "^3.3.7", 13 | "gulp": "^3.9.1", 14 | "gulp-connect": "^5.0.0", 15 | "gulp-open": "^2.0.0", 16 | "gulp-sass": "^2.3.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Demos/src/content/basic/border_margin_padding.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | 3 | body { 4 | font-family: 'Raleway', sans-serif; 5 | /*background-color: gray;*/ 6 | } 7 | 8 | * { 9 | padding: 0px; 10 | margin: 0px; 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | color: black; 16 | } 17 | 18 | a:hover { 19 | color: greenyellow; 20 | } 21 | 22 | .menu { 23 | list-style-type: none; 24 | text-align: center; 25 | } 26 | 27 | .menu li:hover { /*pseudo-class*/ 28 | background-color: #ffb380; 29 | } 30 | 31 | .menu li { 32 | display: inline-block; 33 | width: 150px; 34 | background-color: rgba(173, 255, 47, 0.5); 35 | padding: 3px 0 0 10px; 36 | border-bottom: 3px solid #000000; 37 | } 38 | 39 | .menu li a { 40 | text-decoration: none; 41 | color: black; 42 | } -------------------------------------------------------------------------------- /Demos/src/content/basic/inheritance_in_action.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | 3 | body { 4 | font-family: 'Raleway', sans-serif; 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | color: black; 10 | } 11 | 12 | a:hover { 13 | color: greenyellow; 14 | } 15 | 16 | div { 17 | font-size: 8px; 18 | } 19 | 20 | /* 21 | We can override inherited properties. 22 | */ 23 | p { 24 | font-size: 22px; 25 | border-style: solid; 26 | border-width: 5px; 27 | } -------------------------------------------------------------------------------- /Demos/src/content/basic/simple_selectors.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | 3 | body { 4 | font-size: 80%; 5 | font-family: 'Raleway', sans-serif; 6 | background-color: yellowgreen; 7 | } 8 | 9 | a { 10 | text-decoration: none; 11 | color: black; 12 | background-color: rgba(255, 0, 0, 0.5); 13 | } 14 | 15 | a:hover { 16 | color: white; 17 | } 18 | 19 | /*x-ms-webview canvas set style form multiple elements using a coma separator*/ 20 | h1, h2 { 21 | background-color: yellow; 22 | } 23 | 24 | div { 25 | background-color: red; 26 | } 27 | 28 | /*the content here will get aqua color-profile because datalist the last rule apllied*/ 29 | /*you canvas think that paragraph as having overriden the background guven by the div*/ 30 | p { 31 | background-color: aqua; 32 | } 33 | 34 | /*just the identified element by its id*/ 35 | #content { 36 | background-color: green; 37 | } 38 | /*classes can be used anywhere*/ 39 | .quotation { 40 | background-color: blueviolet; 41 | } 42 | -------------------------------------------------------------------------------- /Demos/src/content/basic/specifity.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: monospace; 3 | font-size: 3rem; 4 | } 5 | 6 | * { 7 | color: deeppink; 8 | } 9 | 10 | p { 11 | color: white 12 | } 13 | 14 | div p { 15 | color: darkblue 16 | } 17 | 18 | .red { 19 | color: red; 20 | } 21 | 22 | #lemoncode { 23 | color: greenyellow; 24 | } 25 | 26 | .container { 27 | width: 90%; 28 | margin: 0 auto; 29 | background: lightslategray; 30 | } 31 | -------------------------------------------------------------------------------- /Demos/src/content/basic/specifying_property_values.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | 3 | body { 4 | font-size: 80%; 5 | font-family: 'Raleway', sans-serif; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | color: black; 11 | } 12 | 13 | a:hover { 14 | color: greenyellow; 15 | } 16 | 17 | p { 18 | font-size: xx-large;/ /*Using keyword 19 | /*font-size: 28pt;*/ /*Using points*/ 20 | /*font-size: 1.0em; /*Using relative em. This is the current size for the page*/*/ 21 | /*font-size: 1.5em;*/ /*Represents a 50% bigger*/ 22 | border-style:solid; 23 | border-color:black; 24 | border-width: thin; /*we can specify using pixels mm cm */ 25 | width: 50%; /*it sets the 50% relative to its parent, in this case the window. px*/ 26 | } 27 | 28 | div { 29 | width: 50%; /*The paragraph inside of the div will be 25%, because the p element has to be the 50% relative to its parent, in this case the div.*/ 30 | } 31 | -------------------------------------------------------------------------------- /Demos/src/content/basic/using_font_family.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: sans-serif; 8 | background: #ccff99; 9 | } 10 | 11 | .copyright { 12 | font-weight: bold; 13 | font-size: 0.8em; 14 | } 15 | 16 | .code { 17 | font-family: monospace; 18 | font-size: 0.9em; 19 | } 20 | 21 | /*The browser will ignore the font that does not exist, and move to the next one*/ 22 | h1 { 23 | font-family: fontdoesnotexist, 'Times New Roman', serif; 24 | font-size: 1.2em; 25 | /*letter-spacing: 2em;*/ 26 | /*word-spacing: 2em;*/ 27 | /*text-decoration: underline line-through;*/ 28 | text-align: center; 29 | } 30 | 31 | ol { 32 | /*font: italic 0.9em serif;*/ 33 | font-style: italic; 34 | font-size: 0.9em; 35 | } 36 | 37 | .content { 38 | background: #eeeecc; 39 | padding: 7px; 40 | line-height: 1.2em; /*Space between text lines*/ 41 | /*text-indent: 3em;*/ 42 | text-align: justify; /*Makes the content to be the colesest as posible to the margin*/ 43 | } -------------------------------------------------------------------------------- /Demos/src/content/basic/using_the_cascade.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | 3 | body { 4 | /*font-size: 80%;*/ 5 | font-family: 'Raleway', sans-serif; 6 | } 7 | 8 | h1 { 9 | font-size: 0.5em; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | color: black; 15 | } 16 | 17 | a:hover { 18 | color: greenyellow; 19 | } 20 | 21 | p { 22 | background-color: green; 23 | } 24 | 25 | p { 26 | background-color: grey; 27 | } 28 | 29 | 30 | /* 31 | The winner is grey. Because the browser sees these conflicting rules that come 32 | from the same source it just uses the last rule that it sees that would apply 33 | to that element. The order of rules is significant and this also counts when 34 | you are using multiple stylesheets. 35 | */ 36 | -------------------------------------------------------------------------------- /Demos/src/content/flex/site.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Open+Sans'; 2 | 3 | body { 4 | font-family: 'Open Sans', sans-serif; 5 | } 6 | 7 | .container-flex { 8 | display: flex; 9 | flex-direction: row; 10 | flex-wrap: wrap; 11 | /*justify-content: space-between;*/ 12 | align-items: baseline; 13 | height: 500px; 14 | } 15 | 16 | .item { 17 | height: 250px; 18 | width: 100px; 19 | color: white; 20 | padding-top: 50px; 21 | font-weight: bold; 22 | font-size: 2em; 23 | text-align: center; 24 | } 25 | 26 | .item.color-red { 27 | background-color: red; 28 | } 29 | 30 | .item.color-blue { 31 | background-color: blue; 32 | } 33 | 34 | .item.color-green { 35 | background-color: green; 36 | height: 100px; 37 | align-self: center; 38 | } 39 | 40 | .item.color-brown { 41 | background-color: brown; 42 | } 43 | 44 | .item.color-purple { 45 | background-color: purple; 46 | } 47 | 48 | .item.color-cyan { 49 | background-color: cyan; 50 | } 51 | 52 | .item.color-orange { 53 | background-color: orange; 54 | } 55 | -------------------------------------------------------------------------------- /Demos/src/content/images/3-cerditos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/3-cerditos.jpg -------------------------------------------------------------------------------- /Demos/src/content/images/braulio-diez.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/braulio-diez.png -------------------------------------------------------------------------------- /Demos/src/content/images/gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/gift.png -------------------------------------------------------------------------------- /Demos/src/content/images/girl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/girl.png -------------------------------------------------------------------------------- /Demos/src/content/images/jaime-salas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/jaime-salas.jpg -------------------------------------------------------------------------------- /Demos/src/content/images/lollipop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/lollipop.png -------------------------------------------------------------------------------- /Demos/src/content/images/teddy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/teddy.png -------------------------------------------------------------------------------- /Demos/src/content/images/toad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/content/images/toad.jpg -------------------------------------------------------------------------------- /Demos/src/content/materialize/site.css: -------------------------------------------------------------------------------- 1 | footer { 2 | position:fixed; 3 | bottom:0; 4 | width:100%; 5 | } 6 | 7 | .column-decorator { 8 | box-sizing: border-box; 9 | border: 0.3em solid black; 10 | } 11 | 12 | .column-decorator:nth-of-type(2n){ 13 | background-color: #00bcd4; 14 | } 15 | 16 | .column-decorator:nth-of-type(2n + 1){ 17 | background-color: #d81b60; 18 | } -------------------------------------------------------------------------------- /Demos/src/content/positioning/absolute.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1f1f1f; 3 | color: #bfbfbf; 4 | height: 2000px; 5 | } 6 | 7 | h1 { 8 | font-weight: normal; 9 | } 10 | 11 | em { 12 | color: greenyellow; 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .blue-box { 22 | background: lightblue; 23 | position: absolute; 24 | /*z-index: -5;*/ 25 | /*bottom: 50px;*/ 26 | top: 10px; 27 | /*Moves to the top of the window*/ 28 | } 29 | 30 | .green-box { 31 | background: lightgreen; 32 | } 33 | 34 | .container { 35 | background: rgba(0, 0, 0, 0.4); 36 | height: 200px; 37 | width: 200px; 38 | position: absolute; 39 | top: 300px; 40 | margin-top: 150px; 41 | } 42 | -------------------------------------------------------------------------------- /Demos/src/content/positioning/fixed.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1f1f1f; 3 | color: #bfbfbf; 4 | height: 2000px; 5 | } 6 | 7 | h1 { 8 | font-weight: normal; 9 | } 10 | 11 | em { 12 | color: yellowgreen; 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .blue-box { 22 | background: lightblue; 23 | /*Our blue box has moved exactly 150 pixels from its original position (top)*/ 24 | position: fixed; 25 | /*top: 150px;*/ 26 | /*left: 150px;*/ 27 | bottom: 0px; 28 | } 29 | 30 | .green-box { 31 | background: lightgreen; 32 | } 33 | -------------------------------------------------------------------------------- /Demos/src/content/positioning/float.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1f1f1f; 3 | color: #bfbfbf; 4 | height: 1000px; 5 | } 6 | 7 | h1 { 8 | font-weight: normal; 9 | } 10 | 11 | em { 12 | color: yellowgreen; 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | margin-right: 10px; 20 | } 21 | 22 | .blue-box { 23 | background: lightblue; 24 | float: left; 25 | } 26 | 27 | .green-box { 28 | background: lightgreen; 29 | float: left; 30 | } 31 | 32 | h1 { 33 | clear: both; 34 | } 35 | -------------------------------------------------------------------------------- /Demos/src/content/positioning/relative.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1f1f1f; 3 | color: #bfbfbf; 4 | height: 2000px; 5 | } 6 | 7 | h1 { 8 | font-weight: normal; 9 | } 10 | 11 | em { 12 | color: yellowgreen; 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .blue-box { 22 | background: lightblue; 23 | position: absolute; 24 | top: 0px; 25 | left: 50px; 26 | /*top: 600px;*/ 27 | } 28 | 29 | .green-box { 30 | background: lightgreen; 31 | } 32 | 33 | .container { 34 | background: rgba(0, 0, 0, 0.4); 35 | width: 200px; 36 | height: 200px; 37 | position: relative; 38 | /*top: 200px;*/ 39 | } 40 | -------------------------------------------------------------------------------- /Demos/src/content/positioning/static_inherit_z_index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1f1f1f; 3 | color: #bfbfbf; 4 | height: 1000px; 5 | } 6 | 7 | h1 { 8 | font-weight: normal; 9 | } 10 | 11 | em { 12 | color: yellowgreen; 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .blue-box { 22 | background: lightblue; 23 | /*position: relative;*/ 24 | /*position: relative;*/ 25 | position: inherit; 26 | top: 0px; 27 | z-index: 5; 28 | } 29 | 30 | .green-box { 31 | background: lightgreen; 32 | position: relative; 33 | /*top: -150px;*/ 34 | z-index: 1; 35 | } 36 | 37 | .container { 38 | background: rgba(0, 0, 0, 0.4); 39 | width: 200px; 40 | height: 200px; 41 | position: absolute; 42 | } 43 | -------------------------------------------------------------------------------- /Demos/src/content/sass/bem/bem.scss: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | @import 'http://fonts.googleapis.com/css?family=Share:400,700'; 3 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s'; 4 | 5 | // Bloque -> albumList (ul) 6 | // Elemento -> each item of the list (li) 7 | // Modificador -> Changes the visual state (fav) 8 | 9 | html { 10 | font-family: 'Raleway', sans-serif; 11 | } 12 | 13 | /*block*/ 14 | .content { 15 | max-width: 500px; 16 | margin: 0 auto; 17 | background-color: rgba(120, 120, 120, 0.3); 18 | } 19 | 20 | /*block*/ 21 | .albumList { 22 | list-style-type: none; 23 | } 24 | 25 | /*block-element*/ 26 | .albumList-item { 27 | font-size: 10pt; 28 | } 29 | 30 | /*block-element--modifier*/ 31 | .albumList-item--fav { 32 | font-weight: 600; 33 | color: magenta; 34 | font-size: 12pt; 35 | } 36 | 37 | // TODO: Discuss on class what to do with this element. 38 | .fav { 39 | font-size: 14pt; 40 | color: darkblue; 41 | text-decoration: underline; 42 | } 43 | 44 | br { 45 | margin-top: 10px; 46 | margin-bottom: 10px; 47 | } 48 | -------------------------------------------------------------------------------- /Demos/src/content/sass/bem/mixin-at-root.scss: -------------------------------------------------------------------------------- 1 | // Reference:https://github.com/sass/sass/issues/440 2 | // Reference:https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498 3 | $extend: false; 4 | $blockExtended: ""; 5 | 6 | @mixin at-root-block($name) { 7 | 8 | @at-root .#{$name} { // Avoid pass the point on name. 9 | @content; 10 | } 11 | } 12 | 13 | @mixin at-root-modifier($name) { 14 | 15 | @at-root #{&}--#{$name}{ 16 | @content; 17 | } 18 | } 19 | 20 | @mixin at-root-element($name) { 21 | 22 | @if $extend { 23 | @at-root #{&} .#{$blockExtended}--#{$name} { 24 | @content; 25 | } 26 | } @else { 27 | @at-root #{&}--#{$name} { 28 | @content; 29 | } 30 | } 31 | } 32 | 33 | @mixin at-root-extendBlock($blockExtended, $name){ 34 | $extend: true !global; 35 | $blockExtended: $blockExtended !global; 36 | 37 | @at-root .#{$blockExtended}--#{$name} { 38 | @content; 39 | } 40 | 41 | $extend: false !global; // Reset variable 42 | } 43 | -------------------------------------------------------------------------------- /Demos/src/content/sass/bem/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin block($block) { 2 | #{$block} { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin element($element) { 8 | &__#{$element} { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin modifier($modifier) { 14 | &--#{$modifier} { 15 | @content; 16 | } 17 | } 18 | 19 | // Playing with @at-root 20 | // Does not control real inheritence 21 | // @mixin extendBlock($block, $modifier) { 22 | // #{$block}--#{$modifier} { 23 | // @content; 24 | // } 25 | // } 26 | -------------------------------------------------------------------------------- /Demos/src/content/sass/bem/no-bem.scss: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | @import 'http://fonts.googleapis.com/css?family=Share:400,700'; 3 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s'; 4 | 5 | html { 6 | font-family: 'Raleway', sans-serif; 7 | } 8 | 9 | .albumList { 10 | list-style-type: none; 11 | } 12 | 13 | .content { 14 | max-width: 500px; 15 | margin: 0 auto; 16 | background-color: rgba(120, 120, 120, 0.3); 17 | } 18 | 19 | .content .albumList li { 20 | font-size: 10pt; 21 | } 22 | 23 | .albumList .fav { 24 | font-weight: 600; 25 | color: magenta; 26 | font-size: 12pt; 27 | } 28 | 29 | .fav { 30 | font-size: 14pt; 31 | color: darkblue; 32 | text-decoration: underline; 33 | } 34 | 35 | br { 36 | margin-top: 10px; 37 | margin-bottom: 10px; 38 | } 39 | -------------------------------------------------------------------------------- /Demos/src/content/sass/bem/sass-bem.scss: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Raleway'; 2 | @import 'http://fonts.googleapis.com/css?family=Share:400,700'; 3 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s'; 4 | @import "mixins.scss"; 5 | @import "mixin-at-root.scss"; 6 | 7 | html { 8 | font-family: 'Raleway', sans-serif; 9 | } 10 | // Using mixins 11 | // @include block('.album'){ 12 | // list-style-type: none; 13 | // @include element('record'){ 14 | // font-size: 15pt; 15 | // @include modifier('bad'){ 16 | // font-weight: 600; 17 | // color: magenta; 18 | // font-size: 12pt; 19 | // } 20 | // } 21 | // }; 22 | 23 | // Using mixins with inheritance 24 | // @include at-root-extendBlock('album', 'horizontal'){ 25 | // display: inline-block; 26 | // @include at-root-element('record') { 27 | // font-size: 15pt; 28 | // } 29 | // }; 30 | 31 | /*block*/ 32 | .content { 33 | max-width: 500px; 34 | margin: 0 auto; 35 | background-color: rgba(120, 120, 120, 0.3); 36 | } 37 | 38 | .albumList { // block 39 | list-style-type: none; 40 | 41 | @at-root #{&}-item { // element 42 | font-size: 10pt; 43 | 44 | @at-root #{&}--fav { // modifier 45 | font-weight: 600; 46 | color: magenta; 47 | font-size: 12pt; 48 | } 49 | } 50 | } 51 | 52 | // TODO: Discuss on class what to do with this element. 53 | .fav { 54 | font-size: 14pt; 55 | color: darkblue; 56 | text-decoration: underline; 57 | } 58 | 59 | br { 60 | margin-top: 10px; 61 | margin-bottom: 10px; 62 | } 63 | -------------------------------------------------------------------------------- /Demos/src/content/sass/custom_bootstrap/_variables.scss: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Butterfly+Kids'; 2 | $bootstrap-sass-asset-helper: false !default; 3 | // 4 | // Variables 5 | // -------------------------------------------------- 6 | 7 | 8 | //== Colors 9 | // 10 | //## Gray and brand colors for use across Bootstrap. 11 | 12 | $gray-base: #000 !default; 13 | $gray-darker: lighten($gray-base, 13.5%) !default; // #222 14 | $gray-dark: lighten($gray-base, 20%) !default; // #333 15 | $gray: lighten($gray-base, 33.5%) !default; // #555 16 | $gray-light: lighten($gray-base, 46.7%) !default; // #777 17 | $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee 18 | 19 | $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 20 | $brand-success: #5cb85c !default; 21 | $brand-info: #5bc0de !default; 22 | $brand-warning: #f0ad4e !default; 23 | $brand-danger: #d9534f !default; 24 | 25 | 26 | //== Scaffolding 27 | // 28 | //## Settings for some of the most global styles. 29 | 30 | //** Background color for ``. 31 | $body-bg: #fff !default; 32 | //** Global text color on ``. 33 | $text-color: $gray-dark !default; 34 | 35 | //** Global textual link color. 36 | $link-color: $brand-primary !default; 37 | //** Link hover color set via `darken()` function. 38 | $link-hover-color: darken($link-color, 15%) !default; 39 | //** Link hover decoration. 40 | $link-hover-decoration: underline !default; 41 | 42 | 43 | //== Typography 44 | // 45 | //## Font, line-height, and color for body text, headings, and more. 46 | 47 | // 'Butterfly Kids' 48 | //$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; 49 | $font-family-sans-serif: 'Butterfly Kids', Helvetica, Arial, sans-serif !default; 50 | $font-family-serif: Georgia, "Times New Roman", Times, serif !default; 51 | //** Default monospace fonts for ``, ``, and `
`.
 52 | $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 53 | $font-family-base:        $font-family-sans-serif !default;
 54 | 
 55 | $font-size-base:          20px !default; // Base size bigger.
 56 | $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 57 | $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 58 | 
 59 | $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 60 | $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 61 | $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 62 | $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 63 | $font-size-h5:            $font-size-base !default;
 64 | $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 65 | 
 66 | //** Unit-less `line-height` for use in components like buttons.
 67 | $line-height-base:        1.428571429 !default; // 20/14
 68 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 69 | $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 70 | 
 71 | //** By default, this inherits from the ``.
 72 | $headings-font-family:    inherit !default;
 73 | $headings-font-weight:    500 !default;
 74 | $headings-line-height:    1.1 !default;
 75 | $headings-color:          inherit !default;
 76 | 
 77 | 
 78 | //== Iconography
 79 | //
 80 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 81 | 
 82 | //** Load fonts from this directory.
 83 | 
 84 | // [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
 85 | // [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
 86 | $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
 87 | 
 88 | //** File name for all font files.
 89 | $icon-font-name:          "glyphicons-halflings-regular" !default;
 90 | //** Element ID within SVG icon file.
 91 | $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
 92 | 
 93 | 
 94 | //== Components
 95 | //
 96 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 97 | 
 98 | $padding-base-vertical:     6px !default;
 99 | $padding-base-horizontal:   12px !default;
100 | 
101 | $padding-large-vertical:    10px !default;
102 | $padding-large-horizontal:  16px !default;
103 | 
104 | $padding-small-vertical:    5px !default;
105 | $padding-small-horizontal:  10px !default;
106 | 
107 | $padding-xs-vertical:       1px !default;
108 | $padding-xs-horizontal:     5px !default;
109 | 
110 | $line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
111 | $line-height-small:         1.5 !default;
112 | 
113 | $border-radius-base:        4px !default;
114 | $border-radius-large:       6px !default;
115 | $border-radius-small:       3px !default;
116 | 
117 | //** Global color for active items (e.g., navs or dropdowns).
118 | $component-active-color:    #fff !default;
119 | //** Global background color for active items (e.g., navs or dropdowns).
120 | $component-active-bg:       $brand-primary !default;
121 | 
122 | //** Width of the `border` for generating carets that indicate dropdowns.
123 | $caret-width-base:          4px !default;
124 | //** Carets increase slightly in size for larger components.
125 | $caret-width-large:         5px !default;
126 | 
127 | 
128 | //== Tables
129 | //
130 | //## Customizes the `.table` component with basic values, each used across all table variations.
131 | 
132 | //** Padding for ``s and ``s.
133 | $table-cell-padding:            8px !default;
134 | //** Padding for cells in `.table-condensed`.
135 | $table-condensed-cell-padding:  5px !default;
136 | 
137 | //** Default background color used for all tables.
138 | $table-bg:                      transparent !default;
139 | //** Background color used for `.table-striped`.
140 | $table-bg-accent:               #f9f9f9 !default;
141 | //** Background color used for `.table-hover`.
142 | $table-bg-hover:                #f5f5f5 !default;
143 | $table-bg-active:               $table-bg-hover !default;
144 | 
145 | //** Border color for table and cell borders.
146 | $table-border-color:            #ddd !default;
147 | 
148 | 
149 | //== Buttons
150 | //
151 | //## For each of Bootstrap's buttons, define text, background and border color.
152 | 
153 | $btn-font-weight:                normal !default;
154 | 
155 | $btn-default-color:              #333 !default;
156 | $btn-default-bg:                 #fff !default;
157 | $btn-default-border:             #ccc !default;
158 | 
159 | $btn-primary-color:              #fff !default;
160 | $btn-primary-bg:                 $brand-primary !default;
161 | $btn-primary-border:             darken($btn-primary-bg, 5%) !default;
162 | 
163 | $btn-success-color:              #fff !default;
164 | $btn-success-bg:                 $brand-success !default;
165 | $btn-success-border:             darken($btn-success-bg, 5%) !default;
166 | 
167 | $btn-info-color:                 #fff !default;
168 | $btn-info-bg:                    $brand-info !default;
169 | $btn-info-border:                darken($btn-info-bg, 5%) !default;
170 | 
171 | $btn-warning-color:              #fff !default;
172 | $btn-warning-bg:                 $brand-warning !default;
173 | $btn-warning-border:             darken($btn-warning-bg, 5%) !default;
174 | 
175 | $btn-danger-color:               #fff !default;
176 | $btn-danger-bg:                  $brand-danger !default;
177 | $btn-danger-border:              darken($btn-danger-bg, 5%) !default;
178 | 
179 | $btn-link-disabled-color:        $gray-light !default;
180 | 
181 | // Allows for customizing button radius independently from global border radius
182 | $btn-border-radius-base:         $border-radius-base !default;
183 | $btn-border-radius-large:        $border-radius-large !default;
184 | $btn-border-radius-small:        $border-radius-small !default;
185 | 
186 | 
187 | //== Forms
188 | //
189 | //##
190 | 
191 | //** `` background color
192 | $input-bg:                       #fff !default;
193 | //** `` background color
194 | $input-bg-disabled:              $gray-lighter !default;
195 | 
196 | //** Text color for ``s
197 | $input-color:                    $gray !default;
198 | //** `` border color
199 | $input-border:                   #ccc !default;
200 | 
201 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
202 | //** Default `.form-control` border radius
203 | // This has no effect on ``s in CSS.
204 | $input-border-radius:            $border-radius-base !default;
205 | //** Large `.form-control` border radius
206 | $input-border-radius-large:      $border-radius-large !default;
207 | //** Small `.form-control` border radius
208 | $input-border-radius-small:      $border-radius-small !default;
209 | 
210 | //** Border color for inputs on focus
211 | $input-border-focus:             #66afe9 !default;
212 | 
213 | //** Placeholder text color
214 | $input-color-placeholder:        #999 !default;
215 | 
216 | //** Default `.form-control` height
217 | $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
218 | //** Large `.form-control` height
219 | $input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
220 | //** Small `.form-control` height
221 | $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
222 | 
223 | //** `.form-group` margin
224 | $form-group-margin-bottom:       15px !default;
225 | 
226 | $legend-color:                   $gray-dark !default;
227 | $legend-border-color:            #e5e5e5 !default;
228 | 
229 | //** Background color for textual input addons
230 | $input-group-addon-bg:           $gray-lighter !default;
231 | //** Border color for textual input addons
232 | $input-group-addon-border-color: $input-border !default;
233 | 
234 | //** Disabled cursor for form controls and buttons.
235 | $cursor-disabled:                not-allowed !default;
236 | 
237 | 
238 | //== Dropdowns
239 | //
240 | //## Dropdown menu container and contents.
241 | 
242 | //** Background for the dropdown menu.
243 | $dropdown-bg:                    #fff !default;
244 | //** Dropdown menu `border-color`.
245 | $dropdown-border:                rgba(0,0,0,.15) !default;
246 | //** Dropdown menu `border-color` **for IE8**.
247 | $dropdown-fallback-border:       #ccc !default;
248 | //** Divider color for between dropdown items.
249 | $dropdown-divider-bg:            #e5e5e5 !default;
250 | 
251 | //** Dropdown link text color.
252 | $dropdown-link-color:            $gray-dark !default;
253 | //** Hover color for dropdown links.
254 | $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
255 | //** Hover background for dropdown links.
256 | $dropdown-link-hover-bg:         #f5f5f5 !default;
257 | 
258 | //** Active dropdown menu item text color.
259 | $dropdown-link-active-color:     $component-active-color !default;
260 | //** Active dropdown menu item background color.
261 | $dropdown-link-active-bg:        $component-active-bg !default;
262 | 
263 | //** Disabled dropdown menu item background color.
264 | $dropdown-link-disabled-color:   $gray-light !default;
265 | 
266 | //** Text color for headers within dropdown menus.
267 | $dropdown-header-color:          $gray-light !default;
268 | 
269 | //** Deprecated `$dropdown-caret-color` as of v3.1.0
270 | $dropdown-caret-color:           #000 !default;
271 | 
272 | 
273 | //-- Z-index master list
274 | //
275 | // Warning: Avoid customizing these values. They're used for a bird's eye view
276 | // of components dependent on the z-axis and are designed to all work together.
277 | //
278 | // Note: These variables are not generated into the Customizer.
279 | 
280 | $zindex-navbar:            1000 !default;
281 | $zindex-dropdown:          1000 !default;
282 | $zindex-popover:           1060 !default;
283 | $zindex-tooltip:           1070 !default;
284 | $zindex-navbar-fixed:      1030 !default;
285 | $zindex-modal-background:  1040 !default;
286 | $zindex-modal:             1050 !default;
287 | 
288 | 
289 | //== Media queries breakpoints
290 | //
291 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
292 | 
293 | // Extra small screen / phone
294 | //** Deprecated `$screen-xs` as of v3.0.1
295 | $screen-xs:                  480px !default;
296 | //** Deprecated `$screen-xs-min` as of v3.2.0
297 | $screen-xs-min:              $screen-xs !default;
298 | //** Deprecated `$screen-phone` as of v3.0.1
299 | $screen-phone:               $screen-xs-min !default;
300 | 
301 | // Small screen / tablet
302 | //** Deprecated `$screen-sm` as of v3.0.1
303 | $screen-sm:                  768px !default;
304 | $screen-sm-min:              $screen-sm !default;
305 | //** Deprecated `$screen-tablet` as of v3.0.1
306 | $screen-tablet:              $screen-sm-min !default;
307 | 
308 | // Medium screen / desktop
309 | //** Deprecated `$screen-md` as of v3.0.1
310 | $screen-md:                  992px !default;
311 | $screen-md-min:              $screen-md !default;
312 | //** Deprecated `$screen-desktop` as of v3.0.1
313 | $screen-desktop:             $screen-md-min !default;
314 | 
315 | // Large screen / wide desktop
316 | //** Deprecated `$screen-lg` as of v3.0.1
317 | $screen-lg:                  1200px !default;
318 | $screen-lg-min:              $screen-lg !default;
319 | //** Deprecated `$screen-lg-desktop` as of v3.0.1
320 | $screen-lg-desktop:          $screen-lg-min !default;
321 | 
322 | // So media queries don't overlap when required, provide a maximum
323 | $screen-xs-max:              ($screen-sm-min - 1) !default;
324 | $screen-sm-max:              ($screen-md-min - 1) !default;
325 | $screen-md-max:              ($screen-lg-min - 1) !default;
326 | 
327 | 
328 | //== Grid system
329 | //
330 | //## Define your custom responsive grid.
331 | 
332 | //** Number of columns in the grid.
333 | $grid-columns:              12 !default;
334 | //** Padding between columns. Gets divided in half for the left and right.
335 | $grid-gutter-width:         30px !default;
336 | // Navbar collapse
337 | //** Point at which the navbar becomes uncollapsed.
338 | $grid-float-breakpoint:     $screen-sm-min !default;
339 | //** Point at which the navbar begins collapsing.
340 | $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
341 | 
342 | 
343 | //== Container sizes
344 | //
345 | //## Define the maximum width of `.container` for different screen sizes.
346 | 
347 | // Small screen / tablet
348 | $container-tablet:             (720px + $grid-gutter-width) !default;
349 | //** For `$screen-sm-min` and up.
350 | $container-sm:                 $container-tablet !default;
351 | 
352 | // Medium screen / desktop
353 | $container-desktop:            (940px + $grid-gutter-width) !default;
354 | //** For `$screen-md-min` and up.
355 | $container-md:                 $container-desktop !default;
356 | 
357 | // Large screen / wide desktop
358 | $container-large-desktop:      (1140px + $grid-gutter-width) !default;
359 | //** For `$screen-lg-min` and up.
360 | $container-lg:                 $container-large-desktop !default;
361 | 
362 | 
363 | //== Navbar
364 | //
365 | //##
366 | 
367 | // Basics of a navbar
368 | $navbar-height:                    50px !default;
369 | $navbar-margin-bottom:             $line-height-computed !default;
370 | $navbar-border-radius:             $border-radius-base !default;
371 | $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
372 | $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
373 | $navbar-collapse-max-height:       340px !default;
374 | 
375 | $navbar-default-color:             #777 !default;
376 | $navbar-default-bg:                #fce4ec !default;
377 | $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
378 | 
379 | // Navbar links
380 | $navbar-default-link-color:                #777 !default;
381 | $navbar-default-link-hover-color:          #333 !default;
382 | $navbar-default-link-hover-bg:             transparent !default;
383 | $navbar-default-link-active-color:         #8e24aa !default;
384 | $navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
385 | $navbar-default-link-disabled-color:       #f3e5f5 !default;
386 | $navbar-default-link-disabled-bg:          transparent !default;
387 | 
388 | // Navbar brand label
389 | $navbar-default-brand-color:               $navbar-default-link-color !default;
390 | $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
391 | $navbar-default-brand-hover-bg:            transparent !default;
392 | 
393 | // Navbar toggle
394 | $navbar-default-toggle-hover-bg:           #d81b60 !default;
395 | $navbar-default-toggle-icon-bar-bg:        #ff80ab !default;
396 | $navbar-default-toggle-border-color:       #fce4ec !default;
397 | 
398 | 
399 | //=== Inverted navbar
400 | // Reset inverted navbar basics
401 | $navbar-inverse-color:                      lighten($gray-light, 15%) !default;
402 | $navbar-inverse-bg:                         #222 !default;
403 | $navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
404 | 
405 | // Inverted navbar links
406 | $navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
407 | $navbar-inverse-link-hover-color:           #fff !default;
408 | $navbar-inverse-link-hover-bg:              transparent !default;
409 | $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
410 | $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
411 | $navbar-inverse-link-disabled-color:        #444 !default;
412 | $navbar-inverse-link-disabled-bg:           transparent !default;
413 | 
414 | // Inverted navbar brand label
415 | $navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
416 | $navbar-inverse-brand-hover-color:          #fff !default;
417 | $navbar-inverse-brand-hover-bg:             transparent !default;
418 | 
419 | // Inverted navbar toggle
420 | $navbar-inverse-toggle-hover-bg:            #333 !default;
421 | $navbar-inverse-toggle-icon-bar-bg:         #fff !default;
422 | $navbar-inverse-toggle-border-color:        #333 !default;
423 | 
424 | 
425 | //== Navs
426 | //
427 | //##
428 | 
429 | //=== Shared nav styles
430 | $nav-link-padding:                          10px 15px !default;
431 | $nav-link-hover-bg:                         $gray-lighter !default;
432 | 
433 | $nav-disabled-link-color:                   $gray-light !default;
434 | $nav-disabled-link-hover-color:             $gray-light !default;
435 | 
436 | //== Tabs
437 | $nav-tabs-border-color:                     #ddd !default;
438 | 
439 | $nav-tabs-link-hover-border-color:          $gray-lighter !default;
440 | 
441 | $nav-tabs-active-link-hover-bg:             $body-bg !default;
442 | $nav-tabs-active-link-hover-color:          $gray !default;
443 | $nav-tabs-active-link-hover-border-color:   #ddd !default;
444 | 
445 | $nav-tabs-justified-link-border-color:            #ddd !default;
446 | $nav-tabs-justified-active-link-border-color:     $body-bg !default;
447 | 
448 | //== Pills
449 | $nav-pills-border-radius:                   $border-radius-base !default;
450 | $nav-pills-active-link-hover-bg:            $component-active-bg !default;
451 | $nav-pills-active-link-hover-color:         $component-active-color !default;
452 | 
453 | 
454 | //== Pagination
455 | //
456 | //##
457 | 
458 | $pagination-color:                     $link-color !default;
459 | $pagination-bg:                        #fff !default;
460 | $pagination-border:                    #ddd !default;
461 | 
462 | $pagination-hover-color:               $link-hover-color !default;
463 | $pagination-hover-bg:                  $gray-lighter !default;
464 | $pagination-hover-border:              #ddd !default;
465 | 
466 | $pagination-active-color:              #fff !default;
467 | $pagination-active-bg:                 $brand-primary !default;
468 | $pagination-active-border:             $brand-primary !default;
469 | 
470 | $pagination-disabled-color:            $gray-light !default;
471 | $pagination-disabled-bg:               #fff !default;
472 | $pagination-disabled-border:           #ddd !default;
473 | 
474 | 
475 | //== Pager
476 | //
477 | //##
478 | 
479 | $pager-bg:                             $pagination-bg !default;
480 | $pager-border:                         $pagination-border !default;
481 | $pager-border-radius:                  15px !default;
482 | 
483 | $pager-hover-bg:                       $pagination-hover-bg !default;
484 | 
485 | $pager-active-bg:                      $pagination-active-bg !default;
486 | $pager-active-color:                   $pagination-active-color !default;
487 | 
488 | $pager-disabled-color:                 $pagination-disabled-color !default;
489 | 
490 | 
491 | //== Jumbotron
492 | //
493 | //##
494 | 
495 | $jumbotron-padding:              30px !default;
496 | $jumbotron-color:                inherit !default;
497 | $jumbotron-bg:                   $gray-lighter !default;
498 | $jumbotron-heading-color:        inherit !default;
499 | $jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
500 | $jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
501 | 
502 | 
503 | //== Form states and alerts
504 | //
505 | //## Define colors for form feedback states and, by default, alerts.
506 | 
507 | $state-success-text:             #4db6ac !default;
508 | $state-success-bg:               #dff0d8 !default;
509 | $state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
510 | 
511 | $state-info-text:                #4dd0e1 !default;
512 | $state-info-bg:                  #d9edf7 !default;
513 | $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
514 | 
515 | $state-warning-text:             #cddc39 !default;
516 | $state-warning-bg:               #fcf8e3 !default;
517 | $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
518 | 
519 | $state-danger-text:              #fb8c00 !default;
520 | $state-danger-bg:                #f2dede !default;
521 | $state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
522 | 
523 | 
524 | //== Tooltips
525 | //
526 | //##
527 | 
528 | //** Tooltip max width
529 | $tooltip-max-width:           200px !default;
530 | //** Tooltip text color
531 | $tooltip-color:               #fff !default;
532 | //** Tooltip background color
533 | $tooltip-bg:                  #000 !default;
534 | $tooltip-opacity:             .9 !default;
535 | 
536 | //** Tooltip arrow width
537 | $tooltip-arrow-width:         5px !default;
538 | //** Tooltip arrow color
539 | $tooltip-arrow-color:         $tooltip-bg !default;
540 | 
541 | 
542 | //== Popovers
543 | //
544 | //##
545 | 
546 | //** Popover body background color
547 | $popover-bg:                          #fff !default;
548 | //** Popover maximum width
549 | $popover-max-width:                   276px !default;
550 | //** Popover border color
551 | $popover-border-color:                rgba(0,0,0,.2) !default;
552 | //** Popover fallback border color
553 | $popover-fallback-border-color:       #ccc !default;
554 | 
555 | //** Popover title background color
556 | $popover-title-bg:                    darken($popover-bg, 3%) !default;
557 | 
558 | //** Popover arrow width
559 | $popover-arrow-width:                 10px !default;
560 | //** Popover arrow color
561 | $popover-arrow-color:                 $popover-bg !default;
562 | 
563 | //** Popover outer arrow width
564 | $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
565 | //** Popover outer arrow color
566 | $popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
567 | //** Popover outer arrow fallback color
568 | $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
569 | 
570 | 
571 | //== Labels
572 | //
573 | //##
574 | 
575 | //** Default label background color
576 | $label-default-bg:            $gray-light !default;
577 | //** Primary label background color
578 | $label-primary-bg:            $brand-primary !default;
579 | //** Success label background color
580 | $label-success-bg:            $brand-success !default;
581 | //** Info label background color
582 | $label-info-bg:               $brand-info !default;
583 | //** Warning label background color
584 | $label-warning-bg:            $brand-warning !default;
585 | //** Danger label background color
586 | $label-danger-bg:             $brand-danger !default;
587 | 
588 | //** Default label text color
589 | $label-color:                 #fff !default;
590 | //** Default text color of a linked label
591 | $label-link-hover-color:      #fff !default;
592 | 
593 | 
594 | //== Modals
595 | //
596 | //##
597 | 
598 | //** Padding applied to the modal body
599 | $modal-inner-padding:         15px !default;
600 | 
601 | //** Padding applied to the modal title
602 | $modal-title-padding:         15px !default;
603 | //** Modal title line-height
604 | $modal-title-line-height:     $line-height-base !default;
605 | 
606 | //** Background color of modal content area
607 | $modal-content-bg:                             #fff !default;
608 | //** Modal content border color
609 | $modal-content-border-color:                   rgba(0,0,0,.2) !default;
610 | //** Modal content border color **for IE8**
611 | $modal-content-fallback-border-color:          #999 !default;
612 | 
613 | //** Modal backdrop background color
614 | $modal-backdrop-bg:           #000 !default;
615 | //** Modal backdrop opacity
616 | $modal-backdrop-opacity:      .5 !default;
617 | //** Modal header border color
618 | $modal-header-border-color:   #e5e5e5 !default;
619 | //** Modal footer border color
620 | $modal-footer-border-color:   $modal-header-border-color !default;
621 | 
622 | $modal-lg:                    900px !default;
623 | $modal-md:                    600px !default;
624 | $modal-sm:                    300px !default;
625 | 
626 | 
627 | //== Alerts
628 | //
629 | //## Define alert colors, border radius, and padding.
630 | 
631 | $alert-padding:               15px !default;
632 | $alert-border-radius:         $border-radius-base !default;
633 | $alert-link-font-weight:      bold !default;
634 | 
635 | $alert-success-bg:            $state-success-bg !default;
636 | $alert-success-text:          $state-success-text !default;
637 | $alert-success-border:        $state-success-border !default;
638 | 
639 | $alert-info-bg:               $state-info-bg !default;
640 | $alert-info-text:             $state-info-text !default;
641 | $alert-info-border:           $state-info-border !default;
642 | 
643 | $alert-warning-bg:            $state-warning-bg !default;
644 | $alert-warning-text:          $state-warning-text !default;
645 | $alert-warning-border:        $state-warning-border !default;
646 | 
647 | $alert-danger-bg:             $state-danger-bg !default;
648 | $alert-danger-text:           $state-danger-text !default;
649 | $alert-danger-border:         $state-danger-border !default;
650 | 
651 | 
652 | //== Progress bars
653 | //
654 | //##
655 | 
656 | //** Background color of the whole progress component
657 | $progress-bg:                 #f5f5f5 !default;
658 | //** Progress bar text color
659 | $progress-bar-color:          #fff !default;
660 | //** Variable for setting rounded corners on progress bar.
661 | $progress-border-radius:      $border-radius-base !default;
662 | 
663 | //** Default progress bar color
664 | $progress-bar-bg:             $brand-primary !default;
665 | //** Success progress bar color
666 | $progress-bar-success-bg:     $brand-success !default;
667 | //** Warning progress bar color
668 | $progress-bar-warning-bg:     $brand-warning !default;
669 | //** Danger progress bar color
670 | $progress-bar-danger-bg:      $brand-danger !default;
671 | //** Info progress bar color
672 | $progress-bar-info-bg:        $brand-info !default;
673 | 
674 | 
675 | //== List group
676 | //
677 | //##
678 | 
679 | //** Background color on `.list-group-item`
680 | $list-group-bg:                 #fff !default;
681 | //** `.list-group-item` border color
682 | $list-group-border:             #ddd !default;
683 | //** List group border radius
684 | $list-group-border-radius:      $border-radius-base !default;
685 | 
686 | //** Background color of single list items on hover
687 | $list-group-hover-bg:           #f5f5f5 !default;
688 | //** Text color of active list items
689 | $list-group-active-color:       $component-active-color !default;
690 | //** Background color of active list items
691 | $list-group-active-bg:          $component-active-bg !default;
692 | //** Border color of active list elements
693 | $list-group-active-border:      $list-group-active-bg !default;
694 | //** Text color for content within active list items
695 | $list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
696 | 
697 | //** Text color of disabled list items
698 | $list-group-disabled-color:      $gray-light !default;
699 | //** Background color of disabled list items
700 | $list-group-disabled-bg:         $gray-lighter !default;
701 | //** Text color for content within disabled list items
702 | $list-group-disabled-text-color: $list-group-disabled-color !default;
703 | 
704 | $list-group-link-color:         #555 !default;
705 | $list-group-link-hover-color:   $list-group-link-color !default;
706 | $list-group-link-heading-color: #333 !default;
707 | 
708 | 
709 | //== Panels
710 | //
711 | //##
712 | 
713 | $panel-bg:                    #fff !default;
714 | $panel-body-padding:          15px !default;
715 | $panel-heading-padding:       10px 15px !default;
716 | $panel-footer-padding:        $panel-heading-padding !default;
717 | $panel-border-radius:         $border-radius-base !default;
718 | 
719 | //** Border color for elements within panels
720 | $panel-inner-border:          #ddd !default;
721 | $panel-footer-bg:             #f5f5f5 !default;
722 | 
723 | $panel-default-text:          $gray-dark !default;
724 | $panel-default-border:        #ddd !default;
725 | $panel-default-heading-bg:    #f5f5f5 !default;
726 | 
727 | $panel-primary-text:          #fff !default;
728 | $panel-primary-border:        $brand-primary !default;
729 | $panel-primary-heading-bg:    $brand-primary !default;
730 | 
731 | $panel-success-text:          $state-success-text !default;
732 | $panel-success-border:        $state-success-border !default;
733 | $panel-success-heading-bg:    $state-success-bg !default;
734 | 
735 | $panel-info-text:             $state-info-text !default;
736 | $panel-info-border:           $state-info-border !default;
737 | $panel-info-heading-bg:       $state-info-bg !default;
738 | 
739 | $panel-warning-text:          $state-warning-text !default;
740 | $panel-warning-border:        $state-warning-border !default;
741 | $panel-warning-heading-bg:    $state-warning-bg !default;
742 | 
743 | $panel-danger-text:           $state-danger-text !default;
744 | $panel-danger-border:         $state-danger-border !default;
745 | $panel-danger-heading-bg:     $state-danger-bg !default;
746 | 
747 | 
748 | //== Thumbnails
749 | //
750 | //##
751 | 
752 | //** Padding around the thumbnail image
753 | $thumbnail-padding:           4px !default;
754 | //** Thumbnail background color
755 | $thumbnail-bg:                $body-bg !default;
756 | //** Thumbnail border color
757 | $thumbnail-border:            #ddd !default;
758 | //** Thumbnail border radius
759 | $thumbnail-border-radius:     $border-radius-base !default;
760 | 
761 | //** Custom text color for thumbnail captions
762 | $thumbnail-caption-color:     $text-color !default;
763 | //** Padding around the thumbnail caption
764 | $thumbnail-caption-padding:   9px !default;
765 | 
766 | 
767 | //== Wells
768 | //
769 | //##
770 | 
771 | $well-bg:                     #f5f5f5 !default;
772 | $well-border:                 darken($well-bg, 7%) !default;
773 | 
774 | 
775 | //== Badges
776 | //
777 | //##
778 | 
779 | $badge-color:                 #fff !default;
780 | //** Linked badge text color on hover
781 | $badge-link-hover-color:      #fff !default;
782 | $badge-bg:                    $gray-light !default;
783 | 
784 | //** Badge text color in active nav link
785 | $badge-active-color:          $link-color !default;
786 | //** Badge background color in active nav link
787 | $badge-active-bg:             #fff !default;
788 | 
789 | $badge-font-weight:           bold !default;
790 | $badge-line-height:           1 !default;
791 | $badge-border-radius:         10px !default;
792 | 
793 | 
794 | //== Breadcrumbs
795 | //
796 | //##
797 | 
798 | $breadcrumb-padding-vertical:   8px !default;
799 | $breadcrumb-padding-horizontal: 15px !default;
800 | //** Breadcrumb background color
801 | $breadcrumb-bg:                 #f5f5f5 !default;
802 | //** Breadcrumb text color
803 | $breadcrumb-color:              #ccc !default;
804 | //** Text color of current page in the breadcrumb
805 | $breadcrumb-active-color:       $gray-light !default;
806 | //** Textual separator for between breadcrumb elements
807 | $breadcrumb-separator:          "/" !default;
808 | 
809 | 
810 | //== Carousel
811 | //
812 | //##
813 | 
814 | $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
815 | 
816 | $carousel-control-color:                      #fff !default;
817 | $carousel-control-width:                      15% !default;
818 | $carousel-control-opacity:                    .5 !default;
819 | $carousel-control-font-size:                  20px !default;
820 | 
821 | $carousel-indicator-active-bg:                #fff !default;
822 | $carousel-indicator-border-color:             #fff !default;
823 | 
824 | $carousel-caption-color:                      #fff !default;
825 | 
826 | 
827 | //== Close
828 | //
829 | //##
830 | 
831 | $close-font-weight:           bold !default;
832 | $close-color:                 #000 !default;
833 | $close-text-shadow:           0 1px 0 #fff !default;
834 | 
835 | 
836 | //== Code
837 | //
838 | //##
839 | 
840 | $code-color:                  #c7254e !default;
841 | $code-bg:                     #f9f2f4 !default;
842 | 
843 | $kbd-color:                   #fff !default;
844 | $kbd-bg:                      #333 !default;
845 | 
846 | $pre-bg:                      #f5f5f5 !default;
847 | $pre-color:                   $gray-dark !default;
848 | $pre-border-color:            #ccc !default;
849 | $pre-scrollable-max-height:   340px !default;
850 | 
851 | 
852 | //== Type
853 | //
854 | //##
855 | 
856 | //** Horizontal offset for forms and lists.
857 | $component-offset-horizontal: 180px !default;
858 | //** Text muted color
859 | $text-muted:                  $gray-light !default;
860 | //** Abbreviations and acronyms border color
861 | $abbr-border-color:           $gray-light !default;
862 | //** Headings small color
863 | $headings-small-color:        $gray-light !default;
864 | //** Blockquote small color
865 | $blockquote-small-color:      $gray-light !default;
866 | //** Blockquote font size
867 | $blockquote-font-size:        ($font-size-base * 1.25) !default;
868 | //** Blockquote border color
869 | $blockquote-border-color:     $gray-lighter !default;
870 | //** Page header border color
871 | $page-header-border-color:    $gray-lighter !default;
872 | //** Width of horizontal description list titles
873 | $dl-horizontal-offset:        $component-offset-horizontal !default;
874 | //** Point at which .dl-horizontal becomes horizontal
875 | $dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
876 | //** Horizontal line color.
877 | $hr-border:                   $gray-lighter !default;
878 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/custom_bootstrap/main.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |     >npm install bootstrap-sass --save-dev
 3 |     // In this main file, we can import the parts that we want to use from bootstrap.
 4 |     // For simplicity, bootstrap and theme (animations reponsible).
 5 |     // We create our own variables (copy _variables.scss) files, and there, we will override
 6 |     // all the values that we are interested on.
 7 | */
 8 | 
 9 | @import "variables.scss";
10 | 
11 | @import "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
12 | @import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
13 | 
14 | // TODO: Move this to its own file.
15 | body {
16 |     padding-top: 70px;
17 | }
18 | 
19 | @media screen and (max-width: $screen-sm) {
20 |   .navbar-brand {
21 |       img {
22 |           max-width: 90%;
23 |           height: auto;
24 |         //   margin-bottom: 1%;
25 |       }
26 |       padding-top: $navbar-padding-vertical / 2;
27 |   }
28 | }
29 | 
30 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/playground/main.scss:
--------------------------------------------------------------------------------
  1 | // Variables declaration
  2 | $baseSize: 14px;
  3 | 
  4 | 
  5 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  6 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  7 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  8 | 
  9 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 10 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 11 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 12 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 13 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 14 | menu, nav, section, summary, time, mark, audio, video {
 15 |     margin: 0;
 16 |     padding: 0;
 17 |     border: 0;
 18 |     outline: 0;
 19 |     font-size: 100%;
 20 |     vertical-align: baseline;
 21 |     background: transparent;
 22 | }
 23 | 
 24 | /* Basics */
 25 | html {
 26 |     font-family: 'Raleway', sans-serif;
 27 |     font-size: $baseSize;
 28 | }
 29 | 
 30 | body {
 31 |     background: black;
 32 | }
 33 | 
 34 | h1 {
 35 |     font-size: $baseSize + 10px;
 36 | }
 37 | 
 38 | h2 {
 39 |     font-size: $baseSize + 4px;
 40 | }
 41 | 
 42 | h3 {
 43 |     font-size: $baseSize + 2px;
 44 | }
 45 | 
 46 | /* Layout */
 47 | .container {
 48 |     width: 1200px;
 49 |     height: inherit;
 50 |     margin-left: auto;
 51 |     margin-right: auto;
 52 |     background: #FFF;
 53 |     padding: 25px;
 54 |     color: black;
 55 | }
 56 | 
 57 | /* Sections */
 58 | header {
 59 |     border-bottom: 5px solid greenyellow;
 60 |     background-color: darkgrey;
 61 |     padding-left: 30px;
 62 |     padding-right: 30px;
 63 |     padding-top: 30px;
 64 |     min-height: 70px;
 65 | }
 66 | 
 67 | header h1 {
 68 |     font-size: $baseSize + 10px;
 69 |     font-family: 'Share', cursive;
 70 |     color: yellowgreen;
 71 | }
 72 | 
 73 | nav {
 74 |     font-size: $baseSize;
 75 |     font-weight: bold;
 76 |     float: right;
 77 |     color: white;
 78 | }
 79 | nav ul {
 80 |     list-style-type: none;
 81 | }
 82 | nav ul li {
 83 |     float: left;
 84 |     margin: 2px;
 85 | }
 86 | 
 87 | nav ul a {
 88 |     text-decoration: none;
 89 |     color: white;
 90 | }
 91 | 
 92 | nav ul a:hover {
 93 |     text-decoration: underline;
 94 |     color: yellowgreen;
 95 | }
 96 | 
 97 | footer {
 98 |     font-size: $baseSize - 5px;
 99 |     text-align: center;
100 |     color: white;
101 | 
102 |     position: fixed;
103 |     left: 0px;
104 |     bottom: 0px;
105 |     width: 97%;
106 | 
107 |     padding-left: 30px;
108 |     padding-right: 30px;
109 |     padding-top: 30px;
110 |     min-height: 70px;
111 | 
112 |     border-top: 5px solid greenyellow;
113 |     background-color: darkgrey;
114 | }
115 | 
116 | 
117 | /* Forms */
118 | .contact-form {
119 |     background: #f8f8f8;
120 |     width: 480px;
121 |     height: 380px;
122 |     margin-left: auto;
123 |     margin-right: auto;
124 |     border: black 2px solid;
125 |     padding: 5px;
126 | }
127 | 
128 | .contact-form input[type=text], .contact-form textarea {
129 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
130 |     font-size: 18px;
131 |     background: #e6e6e6;
132 |     width: 350px;
133 |     border: 1px #000 solid;
134 |     float: right;
135 | }
136 | 
137 | .form-statement {
138 |     padding: 20px;
139 |     display: block;
140 | }
141 | 
142 | .contact-form textarea {
143 |     height: 100px;
144 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
145 |     resize: none;
146 | }
147 | .contact-form label {
148 |     width: 150px;
149 | }
150 | 
151 | .contact-form input[type=submit] {
152 |     float: right;
153 |     border: 2px solid yellowgreen;
154 |     border-radius: 5px;
155 |     -moz-border-radius: 5px;
156 |     -webkit-border-radius: 5px;
157 |     color: white;
158 |     background-color: black;
159 | }
160 | 
161 | .form-submit {
162 |     display: block;
163 |     margin-top: 100px;
164 | }
165 | 
166 | .about {
167 |     background-color: white;
168 |     width: 480px;
169 |     height: 275px;
170 |     margin-top: 1em;
171 |     margin-left: auto;
172 |     margin-right: auto;
173 |     border: black 2px solid;
174 |     padding: 5px;
175 | }
176 | 
177 | .about img {
178 |     max-width: 50%;
179 |     max-height: 50%;
180 |     padding: 5px;
181 | }
182 | 
183 | .about img:hover {
184 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
185 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
186 | }
187 | 
188 | footer p:after {
189 |     margin-left: 5px;
190 |     content: '\00A9';
191 | }
192 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/test/colors.scss:
--------------------------------------------------------------------------------
1 | $mainColor: black;
2 | $lemoncodeColor: greenyellow;
3 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/test/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent;
14 | }
15 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/test/main.scss:
--------------------------------------------------------------------------------
  1 | // Variables declaration
  2 | $baseSize: 14px;
  3 | 
  4 | // External imports
  5 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  6 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  7 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  8 | 
  9 | // Local imports
 10 | @import "init";
 11 | @import "colors.scss";
 12 | @import "mixins";
 13 | @import "palate";
 14 | 
 15 | 
 16 | $mainColor: green;
 17 | 
 18 | 
 19 | @mixin addingLighten($numberOfColumns: 1) {
 20 |   @for $colNumber from 1 through $numberOfColumns {
 21 |     .col-#{$colNumber} {
 22 |        border-radius: 25px;
 23 |        border: 2px solid black;
 24 |        padding: 20px;
 25 |        width: 200px;
 26 |        height: 50px;
 27 |        background-color: paintLighten($mainColor, $colNumber);
 28 |     }
 29 |   }
 30 | }
 31 | 
 32 | @function paintLighten($color, $colNumber) {
 33 | //  @debug 'paintLighten: ' + $color + ' - ' + $colNumber;
 34 |     @return lighten($color, 10%*$colNumber) ;
 35 | }
 36 | 
 37 | $mainColors: calculatePalate(10, #00ff00);
 38 | 
 39 | .test {
 40 |   background-color: nth($mainColors, 3);
 41 | }
 42 | 
 43 | /* Basics */
 44 | html {
 45 |     font-family: 'Raleway', sans-serif;
 46 |     font-size: $baseSize;
 47 | }
 48 | 
 49 | body {
 50 |     background: $mainColor;
 51 | }
 52 | 
 53 | h1 {
 54 |     font-size: $baseSize + 10;
 55 | }
 56 | 
 57 | h2 {
 58 |     font-size:  $baseSize  + 4;
 59 | }
 60 | 
 61 | h3 {
 62 |     font-size: $baseSize  + 2;
 63 | }
 64 | 
 65 | /* Layout */
 66 | .container {
 67 |     width: 1200px;
 68 |     height: inherit;
 69 |     margin-left: auto;
 70 |     margin-right: auto;
 71 |     background: #FFF;
 72 |     padding: 25px;
 73 |     color: $mainColor;
 74 | }
 75 | 
 76 | /* Sections */
 77 | /*este comentario aparece compilado*/
 78 | // este comentario no aparece compilado
 79 | header {
 80 |   @include header-footer-box-initialization;
 81 |   h1 {
 82 |     font {
 83 |       size: $baseSize + 10;
 84 |       family: 'Share', cursive;
 85 |     }
 86 |     color: yellowgreen;
 87 |   }
 88 | }
 89 | 
 90 | nav {
 91 |   font {
 92 |     size: $baseSize;
 93 |     weight: bold;
 94 |   }
 95 |   float: right;
 96 |   color: white;
 97 | 
 98 |   ul {
 99 |     list-style-type: none;
100 | 
101 |     li {
102 |       float: left;
103 |       margin: 2px;
104 |     }
105 | 
106 |     a {
107 |       text-decoration: none;
108 |       color: white;
109 | 
110 |       &:hover {
111 |         text-decoration: underline;
112 |         color: yellowgreen;
113 |       }
114 |     }
115 |   }
116 | }
117 | 
118 | footer {
119 |     font-size: $baseSize + 4;
120 |     text-align: center;
121 |     color: white;
122 | 
123 |     // position: fixed;
124 |     // left: 0px;
125 |     // bottom: 0px;
126 |     @include set-footer-position;
127 |     width: 97%;
128 | 
129 |     @include header-footer-box-initialization;
130 |     // padding-left: 30px;
131 |     // padding-right: 30px;
132 |     // padding-top: 30px;
133 |     // min-height: 70px;
134 |     //
135 |     // border-top: 5px solid greenyellow;
136 |     // background-color: lighten($mainColor, 25%);
137 | }
138 | 
139 | 
140 | /* Forms */
141 | .contact-form {
142 |     background: #f8f8f8;
143 |     // width: 480px;
144 |     height: 380px;
145 |     // margin-left: auto;
146 |     // margin-right: auto;
147 |     // border: black 2px solid;
148 |     // padding: 5px;
149 |     @include content-sections-initialization;
150 |     input[type=text] {
151 |       font-family: "Open Sans", Verdana, Helvetica, sans-serif;
152 |       font-size: $baseSize + 4;
153 |       background: #e6e6e6;
154 |       width: 350px;
155 |       border: 1px #000 solid;
156 |       float: right;
157 |     }
158 | 
159 |     textarea {
160 |       @extend input[type=text];
161 |       height: 100px;
162 |       // font-family: "Open Sans", Verdana, Helvetica, sans-serif;
163 |       resize: none;
164 |     }
165 | }
166 | 
167 | .form-statement {
168 |     padding: 20px;
169 |     display: block;
170 | }
171 | 
172 | // .contact-form textarea {
173 | //     height: 100px;
174 | //     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
175 | //     resize: none;
176 | // }
177 | .contact-form label {
178 |     width: 150px;
179 | }
180 | 
181 | .contact-form input[type=submit] {
182 |     float: right;
183 |     border: 2px solid yellowgreen;
184 |     border-radius: 5px;
185 |     -moz-border-radius: 5px;
186 |     -webkit-border-radius: 5px;
187 |     color: white;
188 |     background-color: black;
189 | }
190 | 
191 | .form-submit {
192 |     display: block;
193 |     margin-top: 100px;
194 | }
195 | 
196 | .about {
197 |     background-color: white;
198 |     width: 480px;
199 |     height: 275px;
200 |     margin-top: 1em;
201 |     margin-left: auto;
202 |     margin-right: auto;
203 |     border: black 2px solid;
204 |     padding: 5px;
205 | 
206 |     img {
207 |       max-width: 50%;
208 |       max-height: 50%;
209 |       padding: 5px;
210 | 
211 |       &:hover {
212 |         // -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
213 |         // filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
214 |         @include image-transparent-cover;
215 |       }
216 |     }
217 | }
218 | 
219 | footer {
220 |   p {
221 |     &:after {
222 |       margin-left: 5px;
223 |       content: '\00A9';
224 |     }
225 |   }
226 | }
227 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/test/mixins.scss:
--------------------------------------------------------------------------------
 1 | @import "colors";
 2 | 
 3 | @mixin header-footer-box-initialization() {
 4 |     padding-left: 30px;
 5 |     padding-right: 30px;
 6 |     padding-top: 30px;
 7 |     min-height: 70px;
 8 |     background-color: darkgrey; // Move to colors
 9 |     border-top: 5px solid $lemoncodeColor;
10 | }
11 | 
12 | @mixin content-sections-initialization() {
13 |     width: 480px;
14 |     @include justify-content;
15 |     border: $mainColor 2px solid;
16 |     padding: 5px;
17 | }
18 | 
19 | @mixin justify-content() {
20 |     margin-left: auto;
21 |     margin-right: auto;
22 | }
23 | 
24 | @mixin set-footer-position() {
25 |     position: fixed;
26 |     left: 0px;
27 |     bottom: 0px;
28 | }
29 | 
30 | @mixin image-transparent-cover($brightness: 50%) {
31 |     -webkit-filter: brightness($brightness) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
32 |     filter: brightness($brightness) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
33 | }
34 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/test/palate.scss:
--------------------------------------------------------------------------------
1 | @function calculatePalate($numberSteps, $baseColor:#ff0000) {
2 |   $palate:(); //
3 |   @for $step from 1 through $numberSteps {
4 |     $percentage: 0% + (($step / $numberSteps) * 100);
5 |     $palate: append($palate, lighten($baseColor, $percentage), 'comma');
6 |   }
7 |   @return $palate;
8 | }
9 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_control_directives/functions.scss:
--------------------------------------------------------------------------------
1 | @function calculateBorderOffSection($baseFontSize, $fontRatio, $color: yellowgreen){
2 |   @return $baseFontSize / $fontRatio solid $color;
3 | }
4 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_control_directives/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent; 
14 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_control_directives/main.scss:
--------------------------------------------------------------------------------
 1 | @import 'https://fonts.googleapis.com/css?family=Raleway';
 2 | @import "init";
 3 | @import "mixins.scss";
 4 | @import "functions.scss";
 5 | 
 6 | // References: http://thesassway.com/
 7 | 
 8 | $baseFontSize: 1.5em;
 9 | $offSectionColor: black;
10 | $numberOfColumns: 2; // 6
11 | 
12 | html {
13 |     font-family: 'Raleway', sans-serif;
14 |     font-size: $baseFontSize;
15 | }
16 | 
17 | header {
18 |   @include off-section($offSectionColor);
19 |   border-bottom: calculateBorderOffSection($baseFontSize, 3);
20 |   @include nav-off($baseFontSize);
21 | 
22 |   h1 {
23 |     padding-top: 0.3em;
24 |     padding-left: 0.3em;
25 |     font: {
26 |       size: $baseFontSize;
27 |       color: white;
28 |     }
29 |   }
30 | }
31 | 
32 | // @include calculate-columns($numberOfColumns);
33 | 
34 | // TODO: Change media queries range
35 | 
36 | @media screen and (min-width: 500px) {
37 |   @include calculate-columns(2);
38 | }
39 | 
40 | @media screen and (min-width: 1200px) {
41 |   @include calculate-columns(6);
42 | }
43 | 
44 | .container {
45 |   padding-left: 1em;
46 |   padding-right: 1em;
47 | 
48 |   div:nth-of-type(2n + 1) {
49 |     background-color: lighten(yellow, 25%);
50 |   }
51 | 
52 |   div:nth-of-type(2n) {
53 |     background-color: lighten(cyan, 25%);
54 |   }
55 | }
56 | 
57 | .col-1 {
58 |   height: 12em;
59 | }
60 | 
61 | .col-2 {
62 |   height: 12em;
63 | }
64 | 
65 | footer {
66 |   @include off-section($offSectionColor);
67 |   border-top: calculateBorderOffSection($baseFontSize, 3);
68 |   @include nav-off($baseFontSize);
69 |   position: fixed;
70 |   bottom: 0;
71 | 
72 |   p {
73 |     text-align: center;
74 |     color: white;
75 |     font-size: $baseFontSize * 0.5;
76 |     margin-top: 1em;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_control_directives/mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin nav-off ($baseFontSize, $color:white, $hoverColor:yellowgreen) {
 2 |   nav {
 3 |     color: white;
 4 |     float: right;
 5 |     padding: 1em;
 6 |     font: {
 7 |       size: $baseFontSize * 0.5;
 8 |     }
 9 | 
10 |     ul {
11 |       list-style-type: none;
12 | 
13 |       li {
14 |         display: inline-block;
15 | 
16 |         a {
17 |           color: $color;
18 | 
19 |           &:hover {
20 |             color: $hoverColor;
21 |           }
22 |         }
23 |       }
24 |     }
25 |   }
26 | }
27 | 
28 | @mixin off-section ($offSectionColor, $percentage:35%) {
29 |   min-height: 5em;
30 |   width: 100%;
31 |   background-color: lighten($offSectionColor, $percentage);
32 |   margin: 0;
33 | }
34 | 
35 | @mixin calculate-columns($numberOfColumns: 1) {
36 | 
37 |   @for $colNumber from 1 through $numberOfColumns {
38 |     .col-#{$colNumber} {
39 |       width: 100% * ($colNumber / $numberOfColumns);
40 |       float: left;
41 |       box-sizing: border-box;
42 |       border: 0.3em solid black;
43 |     }
44 |   }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_extend/colors.scss:
--------------------------------------------------------------------------------
1 | $lemoncodeColor: greenyellow;
2 | $mainColor: black;
3 | $offColor: white;


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_extend/form.scss:
--------------------------------------------------------------------------------
  1 | // Imports
  2 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  3 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  4 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  5 | // Local imports
  6 | @import "init";
  7 | @import "colors.scss";
  8 | // Variables declaration
  9 | $baseSize: 14px;
 10 | 
 11 | /* Basics */
 12 | html {
 13 |     font-family: 'Raleway', sans-serif;
 14 |     font-size: $baseSize; 
 15 | }
 16 | 
 17 | body {
 18 |     background: $mainColor; 
 19 | }
 20 | 
 21 | h1 {
 22 |     font-size: $baseSize + 10px; 
 23 | }
 24 | 
 25 | h2 {
 26 |     font-size: $baseSize + 4px;
 27 | }
 28 | 
 29 | h3 {
 30 |     font-size: $baseSize + 2px; 
 31 | }
 32 | 
 33 | /* Layout */
 34 | .container {
 35 |     width: 1200px;
 36 |     height: inherit;
 37 |     margin-left: auto;
 38 |     margin-right: auto;
 39 |     background: $offColor;
 40 |     padding: 25px;
 41 |     color: $mainColor; 
 42 | }
 43 | 
 44 | /* Sections */
 45 | header {
 46 |     border-bottom: 5px solid $lemoncodeColor;
 47 |     background-color: darkgrey;
 48 |     padding-left: 30px;
 49 |     padding-right: 30px;
 50 |     padding-top: 30px;
 51 |     min-height: 70px;
 52 | 
 53 |     h1 {
 54 |         font-size: $baseSize + 10px;
 55 |         font-family: 'Share', cursive;
 56 |         color: $lemoncodeColor;    
 57 |     }
 58 | }
 59 | 
 60 | nav {
 61 |     font-size: $baseSize;
 62 |     font-weight: bold;
 63 |     float: right; 
 64 |     color: $offColor;
 65 | 
 66 |     ul {
 67 |         list-style-type: none;
 68 | 
 69 |         li {
 70 |             float: left;
 71 |             margin: 2px;        
 72 |         }   
 73 | 
 74 |         a {
 75 |             text-decoration: none; 
 76 |             color: $offColor;
 77 | 
 78 |             &:hover {
 79 |                 text-decoration: underline;
 80 |                 color: $lemoncodeColor;            
 81 |             }        
 82 |         } 
 83 |     }
 84 | }
 85 | 
 86 | /* Forms */
 87 | .contact-form {
 88 |     background: #f8f8f8;
 89 |     width: 480px;
 90 |     height: 380px;
 91 |     margin-left: auto;
 92 |     margin-right: auto;
 93 |     border: $mainColor 2px solid;
 94 |     padding: 5px;
 95 | 
 96 |     input[type=text] {
 97 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 98 |         font-size: 18px;
 99 |         background: #e6e6e6;
100 |         width: 350px;
101 |         border: 1px $mainColor solid;
102 |         float: right;    
103 |     }
104 | 
105 |     textarea {
106 |         @extend input[type=text];
107 |         height: 100px;
108 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
109 |         resize: none;
110 |     }
111 | 
112 |     label {
113 |         width: 150px;
114 |     }
115 | 
116 |     input[type=submit] {
117 |         float: right;
118 |         border: 2px solid $lemoncodeColor; 
119 |         border-radius: 5px;
120 |         -moz-border-radius: 5px;
121 |         -webkit-border-radius: 5px;
122 |         color: $offColor;
123 |         background-color: $mainColor;
124 |     }
125 | }
126 | 
127 | .form-statement {
128 |     padding: 20px;
129 |     display: block;
130 | }
131 | 
132 | .form-submit {
133 |     display: block;
134 |     margin-top: 100px;
135 | }
136 | 
137 | .about {
138 |     background-color: $offColor;
139 |     width: 480px;
140 |     height: 275px;
141 |     margin-top: 1em;
142 |     margin-left: auto;
143 |     margin-right: auto;
144 |     border: $mainColor 2px solid;
145 |     padding: 5px;
146 | 
147 |     img {
148 |         max-width: 50%;
149 |         max-height: 50%;
150 |         padding: 5px;
151 | 
152 |         &:hover {
153 |             -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
154 |             filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);        
155 |         }    
156 |     }
157 | }
158 | 
159 | .about img:hover {
160 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
161 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
162 | }
163 | 
164 | footer {
165 |     font-size: $baseSize - 5px;
166 |     text-align: center;
167 |     color: $offColor;
168 |     
169 |     position: fixed; 
170 |     left: 0px;
171 |     bottom: 0px;
172 |     width: 97%;
173 | 
174 |     padding-left: 30px;
175 |     padding-right: 30px;
176 |     padding-top: 30px;
177 |     min-height: 70px;
178 | 
179 |     border-top: 5px solid $lemoncodeColor;
180 |     background-color: darkgrey;
181 | 
182 |     p:after {
183 |         margin-left: 5px;
184 |         content: '\00A9';    
185 |     }
186 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_extend/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent; 
14 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_function/colors.scss:
--------------------------------------------------------------------------------
1 | $lemoncodeColor: greenyellow;
2 | $mainColor: black;
3 | $offColor: white;


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_function/form.scss:
--------------------------------------------------------------------------------
  1 | // Imports
  2 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  3 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  4 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  5 | // Local imports
  6 | @import "init";
  7 | @import "colors.scss";
  8 | @import "mixins.scss";
  9 | // Variables declaration
 10 | $baseSize: 14px;
 11 | 
 12 | /* Basics */
 13 | html {
 14 |     font-family: 'Raleway', sans-serif;
 15 |     font-size: $baseSize; 
 16 | }
 17 | 
 18 | body {
 19 |     background: $mainColor; 
 20 | }
 21 | 
 22 | h1 {
 23 |     font-size: $baseSize + 10px; 
 24 | }
 25 | 
 26 | h2 {
 27 |     font-size: $baseSize + 4px;
 28 | }
 29 | 
 30 | h3 {
 31 |     font-size: $baseSize + 2px; 
 32 | }
 33 | 
 34 | /* Layout */
 35 | .container {
 36 |     width: 1200px;
 37 |     height: inherit;
 38 |     @include justify-content;
 39 |     background: $offColor;
 40 |     padding: 25px;
 41 |     color: $mainColor; 
 42 | }
 43 | 
 44 | /* Sections */
 45 | header {
 46 |     @include header-footer-box-initialization;
 47 | 
 48 |     h1 {
 49 |         font-size: $baseSize + 10px;
 50 |         font-family: 'Share', cursive;
 51 |         color: $lemoncodeColor;    
 52 |     }
 53 | }
 54 | 
 55 | nav {
 56 |     font-size: $baseSize;
 57 |     font-weight: bold;
 58 |     float: right; 
 59 |     color: $offColor;
 60 | 
 61 |     ul {
 62 |         list-style-type: none;
 63 | 
 64 |         li {
 65 |             float: left;
 66 |             margin: 2px;        
 67 |         }   
 68 | 
 69 |         a {
 70 |             text-decoration: none; 
 71 |             color: $offColor;
 72 | 
 73 |             &:hover {
 74 |                 text-decoration: underline;
 75 |                 color: $lemoncodeColor;            
 76 |             }        
 77 |         } 
 78 |     }
 79 | }
 80 | 
 81 | /* Forms */
 82 | .contact-form {
 83 |     background: #f8f8f8;
 84 |     height: 380px;
 85 |     @include content-sections-initialization;
 86 | 
 87 |     input[type=text], textarea {
 88 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 89 |         font-size: 18px;
 90 |         background: #e6e6e6;
 91 |         width: 350px;
 92 |         border: 1px $mainColor solid;
 93 |         float: right;    
 94 |     }
 95 | 
 96 |     textarea {
 97 |         height: 100px;
 98 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 99 |         resize: none;
100 |     }
101 | 
102 |     label {
103 |         width: 150px;
104 |     }
105 | 
106 |     input[type=submit] {
107 |         float: right;
108 |         border: 2px solid $lemoncodeColor; 
109 |         @include rounded-corners-all;
110 |         color: $offColor;
111 |         background-color: $mainColor;
112 |     }
113 | }
114 | 
115 | .form-statement {
116 |     padding: 20px;
117 |     display: block;
118 | }
119 | 
120 | .form-submit {
121 |     display: block;
122 |     margin-top: 100px;
123 | }
124 | 
125 | .about {
126 |     background-color: $offColor;
127 |     height: 275px;
128 |     margin-top: 1em;
129 |     @include content-sections-initialization;
130 | 
131 |     img {
132 |         max-width: 50%;
133 |         max-height: 50%;
134 |         padding: 5px;
135 | 
136 |         &:hover {
137 |             @include image-transparent-cover;    
138 |         }    
139 |     }
140 | }
141 | 
142 | footer {
143 |     font-size: $baseSize - 5px;
144 |     text-align: center;
145 |     color: $offColor;
146 |     @include header-footer-box-initialization;
147 |     @include set-footer-position;
148 |     width: 97%;
149 | 
150 |     p:after {
151 |         margin-left: 5px;
152 |         content: '\00A9';    
153 |     }
154 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_function/functions.scss:
--------------------------------------------------------------------------------
 1 | // http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
 2 | // http://hugogiraudel.com/2013/10/09/advanced-sass-list-functions-again/
 3 | // https://www.sitepoint.com/understanding-sass-units/
 4 | // http://stackoverflow.com/questions/2348597/why-doesnt-this-javascript-rgb-to-hsl-code-work/2348659#2348659
 5 | // http://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour
 6 | // https://www.sitepoint.com/using-sass-error-warn-and-debug-directives/
 7 | $baseColorHue: 38;
 8 | $baseColorSaturation: 24.5;
 9 | $baseColorBrightnes: 60;
10 | 
11 | @function calculateRotation($r, $g, $b) {
12 |     $h: nth(rgb-to-hsl($r, $g, $b), 1);
13 |     // @debug $h;
14 |     @return 0deg + $h - $baseColorHue; // Casting
15 | }
16 | 
17 | @function calculateSaturationFilter($r, $g, $b) {
18 |     $s: nth(rgb-to-hsl($r, $g, $b), 2);
19 |     // @debug $s;
20 |     // Built in function -> percentage
21 |     @return percentage((500 + ($baseColorSaturation - $s)) / 100); // Saturate extra to notice effects.
22 | }
23 | 
24 | @function calculateBrightness($r, $g, $b) {
25 |     $l: nth(rgb-to-hsl($r, $g, $b), 3);
26 |     // @debug $l;
27 |     @return percentage((100 + ($l - $baseColorBrightnes)) / 100);
28 | }
29 | 
30 | @function rgb-to-hsl($r, $g, $b){
31 |     $r: $r / 255;
32 |     $g: $g / 255;
33 |     $b: $b / 255;
34 | 
35 |     $maxValue: max($r, $g, $b);
36 |     $minValue: min($r, $g, $b);
37 |     $l: ($maxValue + $minValue) / 2;
38 |     $h: ();
39 |     $s: ();
40 | 
41 |     @if ($maxValue == $minValue) {
42 |         $h: 0;
43 |         $s: 0;
44 |     }
45 |     @else {
46 |         $s: calculateSaturation($l, $maxValue, $minValue);
47 |         $h: calculateHue($r, $g, $b);
48 |     }
49 |     
50 |     $hsl: floor($h * 360), floor($s * 100), floor($l * 100);
51 |     @return $hsl;
52 | }
53 | 
54 | @function calculateSaturation($l, $maxValue, $minValue) {
55 |     $delta: $maxValue - $minValue;
56 |     $saturation: ();
57 |     @if ($l > 0.5) {
58 |         $saturation: $delta / (2 - $maxValue - $minValue);
59 |     }
60 |     @else {
61 |         $saturation: $delta / ($maxValue + $minValue);
62 |     }
63 | 
64 |     @return $saturation;
65 | }
66 | 
67 | @function calculateHue($r, $g, $b) {
68 |     $hue: ();
69 |     $maxValueHue: max($r, $g, $b);
70 |     $minValueHue: min($r, $g, $b);
71 | 
72 |     @if($maxValueHue == $r) {
73 |         $hue: ($g -$b) / ($maxValueHue - $minValueHue) + hueFactor($g, $b);
74 |     } @else if($maxValueHue == $g) {
75 |         $hue: ($b -$r) / ($maxValueHue - $minValueHue) + 2;
76 |     } @else if($maxValueHue == $b) {
77 |         $hue: ($r -$g) / ($maxValueHue - $minValueHue) + 4
78 |     }
79 |     @return $hue / 6;
80 | }
81 | 
82 | @function hueFactor($g, $b) {
83 |     @if($g < $b) {
84 |         @return 6;
85 |     } @else {
86 |         @return 0;
87 |     }
88 | }
89 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_function/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent; 
14 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_function/mixins.scss:
--------------------------------------------------------------------------------
 1 | @import "colors.scss";
 2 | @import "functions.scss";
 3 | 
 4 | @mixin rounded-corners-all($size:5px){
 5 |     border-radius: $size;
 6 |     -moz-border-radius: $size; // Deprecated
 7 |     -webkit-border-radius: $size // Deprecated
 8 | }
 9 | 
10 | @mixin header-footer-box-initialization() {
11 |     padding-left: 30px;
12 |     padding-right: 30px;
13 |     padding-top: 30px;
14 |     min-height: 70px;
15 |     background-color: darkgrey; // Move to colors
16 |     border-top: 5px solid $lemoncodeColor;
17 | }
18 | 
19 | @mixin content-sections-initialization() {
20 |     width: 480px;
21 |     @include justify-content;
22 |     border: $mainColor 2px solid;
23 |     padding: 5px;
24 | }
25 | 
26 | @mixin justify-content() {
27 |     margin-left: auto;
28 |     margin-right: auto;
29 | }
30 | 
31 | @mixin set-footer-position() {
32 |     position: fixed; 
33 |     left: 0px;
34 |     bottom: 0px;
35 | }
36 | 
37 | @mixin image-transparent-cover() {
38 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(calculateRotation(104, 238, 148)) saturate(calculateSaturationFilter(104, 238, 148)) brightness(calculateBrightness(104, 238, 148));
39 |     filter: brightness(50%) sepia(1)  hue-rotate(calculateRotation(104, 238, 148)) saturate(calculateSaturationFilter(104, 238, 148)) brightness(calculateBrightness(104, 238, 148));
40 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_import/colors.scss:
--------------------------------------------------------------------------------
1 | $lemoncodeColor: greenyellow;
2 | $mainColor: black;
3 | $offColor: white;


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_import/form.scss:
--------------------------------------------------------------------------------
  1 | // Imports
  2 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  3 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  4 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  5 | // Local imports
  6 | @import "init";
  7 | @import "colors.scss";
  8 | // Variables declaration
  9 | $baseSize: 14px;
 10 | 
 11 | /* Basics */
 12 | html {
 13 |     font-family: 'Raleway', sans-serif;
 14 |     font-size: $baseSize; 
 15 | }
 16 | 
 17 | body {
 18 |     background: $mainColor; 
 19 | }
 20 | 
 21 | h1 {
 22 |     font-size: $baseSize + 10px; 
 23 | }
 24 | 
 25 | h2 {
 26 |     font-size: $baseSize + 4px;
 27 | }
 28 | 
 29 | h3 {
 30 |     font-size: $baseSize + 2px; 
 31 | }
 32 | 
 33 | /* Layout */
 34 | .container {
 35 |     width: 1200px;
 36 |     height: inherit;
 37 |     margin-left: auto;
 38 |     margin-right: auto;
 39 |     background: $offColor;
 40 |     padding: 25px;
 41 |     color: $mainColor; 
 42 | }
 43 | 
 44 | /* Sections */
 45 | header {
 46 |     border-bottom: 5px solid $lemoncodeColor;
 47 |     background-color: darkgrey;
 48 |     padding-left: 30px;
 49 |     padding-right: 30px;
 50 |     padding-top: 30px;
 51 |     min-height: 70px;
 52 | 
 53 |     h1 {
 54 |         font-size: $baseSize + 10px;
 55 |         font-family: 'Share', cursive;
 56 |         color: $lemoncodeColor;    
 57 |     }
 58 | }
 59 | 
 60 | nav {
 61 |     font-size: $baseSize;
 62 |     font-weight: bold;
 63 |     float: right; 
 64 |     color: $offColor;
 65 | 
 66 |     ul {
 67 |         list-style-type: none;
 68 | 
 69 |         li {
 70 |             float: left;
 71 |             margin: 2px;        
 72 |         }   
 73 | 
 74 |         a {
 75 |             text-decoration: none; 
 76 |             color: $offColor;
 77 | 
 78 |             &:hover {
 79 |                 text-decoration: underline;
 80 |                 color: $lemoncodeColor;            
 81 |             }        
 82 |         } 
 83 |     }
 84 | }
 85 | 
 86 | /* Forms */
 87 | .contact-form {
 88 |     background: #f8f8f8;
 89 |     width: 480px;
 90 |     height: 380px;
 91 |     margin-left: auto;
 92 |     margin-right: auto;
 93 |     border: $mainColor 2px solid;
 94 |     padding: 5px;
 95 | 
 96 |     input[type=text], textarea {
 97 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 98 |         font-size: 18px;
 99 |         background: #e6e6e6;
100 |         width: 350px;
101 |         border: 1px $mainColor solid;
102 |         float: right;    
103 |     }
104 | 
105 |     textarea {
106 |         height: 100px;
107 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
108 |         resize: none;
109 |     }
110 | 
111 |     label {
112 |         width: 150px;
113 |     }
114 | 
115 |     input[type=submit] {
116 |         float: right;
117 |         border: 2px solid $lemoncodeColor; 
118 |         border-radius: 5px;
119 |         -moz-border-radius: 5px;
120 |         -webkit-border-radius: 5px;
121 |         color: $offColor;
122 |         background-color: $mainColor;
123 |     }
124 | }
125 | 
126 | .form-statement {
127 |     padding: 20px;
128 |     display: block;
129 | }
130 | 
131 | .form-submit {
132 |     display: block;
133 |     margin-top: 100px;
134 | }
135 | 
136 | .about {
137 |     background-color: $offColor;
138 |     width: 480px;
139 |     height: 275px;
140 |     margin-top: 1em;
141 |     margin-left: auto;
142 |     margin-right: auto;
143 |     border: $mainColor 2px solid;
144 |     padding: 5px;
145 | 
146 |     img {
147 |         max-width: 50%;
148 |         max-height: 50%;
149 |         padding: 5px;
150 | 
151 |         &:hover {
152 |             -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
153 |             filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);        
154 |         }    
155 |     }
156 | }
157 | 
158 | .about img:hover {
159 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
160 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
161 | }
162 | 
163 | footer {
164 |     font-size: $baseSize - 5px;
165 |     text-align: center;
166 |     color: $offColor;
167 |     
168 |     position: fixed; 
169 |     left: 0px;
170 |     bottom: 0px;
171 |     width: 97%;
172 | 
173 |     padding-left: 30px;
174 |     padding-right: 30px;
175 |     padding-top: 30px;
176 |     min-height: 70px;
177 | 
178 |     border-top: 5px solid $lemoncodeColor;
179 |     background-color: darkgrey;
180 | 
181 |     p:after {
182 |         margin-left: 5px;
183 |         content: '\00A9';    
184 |     }
185 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_import/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent; 
14 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_mixins/colors.scss:
--------------------------------------------------------------------------------
1 | $lemoncodeColor: greenyellow;
2 | $mainColor: black;
3 | $offColor: white;


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_mixins/form.scss:
--------------------------------------------------------------------------------
  1 | // Imports
  2 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  3 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  4 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  5 | // Local imports
  6 | @import "init";
  7 | @import "colors.scss";
  8 | @import "mixins.scss";
  9 | // Variables declaration
 10 | $baseSize: 14px;
 11 | 
 12 | /* Basics */
 13 | html {
 14 |     font-family: 'Raleway', sans-serif;
 15 |     font-size: $baseSize; 
 16 | }
 17 | 
 18 | body {
 19 |     background: $mainColor; 
 20 | }
 21 | 
 22 | h1 {
 23 |     font-size: $baseSize + 10px; 
 24 | }
 25 | 
 26 | h2 {
 27 |     font-size: $baseSize + 4px;
 28 | }
 29 | 
 30 | h3 {
 31 |     font-size: $baseSize + 2px; 
 32 | }
 33 | 
 34 | /* Layout */
 35 | .container {
 36 |     width: 1200px;
 37 |     height: inherit;
 38 |     @include justify-content;
 39 |     background: $offColor;
 40 |     padding: 25px;
 41 |     color: $mainColor; 
 42 | }
 43 | 
 44 | /* Sections */
 45 | header {
 46 |     @include header-footer-box-initialization;
 47 | 
 48 |     h1 {
 49 |         font-size: $baseSize + 10px;
 50 |         font-family: 'Share', cursive;
 51 |         color: $lemoncodeColor;    
 52 |     }
 53 | }
 54 | 
 55 | nav {
 56 |     font-size: $baseSize;
 57 |     font-weight: bold;
 58 |     float: right; 
 59 |     color: $offColor;
 60 | 
 61 |     ul {
 62 |         list-style-type: none;
 63 | 
 64 |         li {
 65 |             float: left;
 66 |             margin: 2px;        
 67 |         }   
 68 | 
 69 |         a {
 70 |             text-decoration: none; 
 71 |             color: $offColor;
 72 | 
 73 |             &:hover {
 74 |                 text-decoration: underline;
 75 |                 color: $lemoncodeColor;            
 76 |             }        
 77 |         } 
 78 |     }
 79 | }
 80 | 
 81 | /* Forms */
 82 | .contact-form {
 83 |     background: #f8f8f8;
 84 |     height: 380px;
 85 |     @include content-sections-initialization;
 86 | 
 87 |     input[type=text], textarea {
 88 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 89 |         font-size: 18px;
 90 |         background: #e6e6e6;
 91 |         width: 350px;
 92 |         border: 1px $mainColor solid;
 93 |         float: right;    
 94 |     }
 95 | 
 96 |     textarea {
 97 |         height: 100px;
 98 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
 99 |         resize: none;
100 |     }
101 | 
102 |     label {
103 |         width: 150px;
104 |     }
105 | 
106 |     input[type=submit] {
107 |         float: right;
108 |         border: 2px solid $lemoncodeColor; 
109 |         @include rounded-corners-all;
110 |         color: $offColor;
111 |         background-color: $mainColor;
112 |     }
113 | }
114 | 
115 | .form-statement {
116 |     padding: 20px;
117 |     display: block;
118 | }
119 | 
120 | .form-submit {
121 |     display: block;
122 |     margin-top: 100px;
123 | }
124 | 
125 | .about {
126 |     background-color: $offColor;
127 |     height: 275px;
128 |     margin-top: 1em;
129 |     @include content-sections-initialization;
130 | 
131 |     img {
132 |         max-width: 50%;
133 |         max-height: 50%;
134 |         padding: 5px;
135 | 
136 |         &:hover {
137 |             @include image-transparent-cover;    
138 |         }    
139 |     }
140 | }
141 | 
142 | footer {
143 |     font-size: $baseSize - 5px;
144 |     text-align: center;
145 |     color: $offColor;
146 |     @include header-footer-box-initialization;
147 |     @include set-footer-position;
148 |     width: 97%;
149 | 
150 |     p:after {
151 |         margin-left: 5px;
152 |         content: '\00A9';    
153 |     }
154 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_mixins/init.scss:
--------------------------------------------------------------------------------
 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 2 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 3 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 4 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 5 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 6 | menu, nav, section, summary, time, mark, audio, video {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     border: 0;
10 |     outline: 0;
11 |     font-size: 100%;
12 |     vertical-align: baseline;
13 |     background: transparent; 
14 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_mixins/mixins.scss:
--------------------------------------------------------------------------------
 1 | @import "colors.scss";
 2 | 
 3 | @mixin rounded-corners-all($size:5px){
 4 |     border-radius: $size;
 5 |     -moz-border-radius: $size; // Deprecated
 6 |     -webkit-border-radius: $size // Deprecated
 7 | }
 8 | 
 9 | @mixin header-footer-box-initialization() {
10 |     padding-left: 30px;
11 |     padding-right: 30px;
12 |     padding-top: 30px;
13 |     min-height: 70px;
14 |     background-color: darkgrey; // Move to colors
15 |     border-top: 5px solid $lemoncodeColor;
16 | }
17 | 
18 | @mixin content-sections-initialization() {
19 |     width: 480px;
20 |     @include justify-content;
21 |     border: $mainColor 2px solid;
22 |     padding: 5px;
23 | }
24 | 
25 | @mixin justify-content() {
26 |     margin-left: auto;
27 |     margin-right: auto;
28 | }
29 | 
30 | @mixin set-footer-position() {
31 |     position: fixed;
32 |     left: 0px;
33 |     bottom: 0px;
34 | }
35 | 
36 | @mixin image-transparent-cover() {
37 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
38 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
39 | }
40 | 


--------------------------------------------------------------------------------
/Demos/src/content/sass/using_rules/form.scss:
--------------------------------------------------------------------------------
  1 | // Variables declaration
  2 | $baseSize: 14px;
  3 | 
  4 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  5 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  6 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  7 | 
  8 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  9 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 10 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 11 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 12 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 13 | menu, nav, section, summary, time, mark, audio, video {
 14 |     margin: 0;
 15 |     padding: 0;
 16 |     border: 0;
 17 |     outline: 0;
 18 |     font-size: 100%;
 19 |     vertical-align: baseline;
 20 |     background: transparent; 
 21 | }
 22 | 
 23 | /* Basics */
 24 | html {
 25 |     font-family: 'Raleway', sans-serif;
 26 |     font-size: $baseSize; 
 27 | }
 28 | 
 29 | body {
 30 |     background: black; 
 31 | }
 32 | 
 33 | h1 {
 34 |     font-size: $baseSize + 10px; 
 35 | }
 36 | 
 37 | h2 {
 38 |     font-size: $baseSize + 4px;
 39 | }
 40 | 
 41 | h3 {
 42 |     font-size: $baseSize + 2px; 
 43 | }
 44 | 
 45 | /* Layout */
 46 | .container {
 47 |     width: 1200px;
 48 |     height: inherit;
 49 |     margin-left: auto;
 50 |     margin-right: auto;
 51 |     background: #FFF;
 52 |     padding: 25px;
 53 |     color: black; 
 54 | }
 55 | 
 56 | /* Sections */
 57 | header {
 58 |     border-bottom: 5px solid greenyellow;
 59 |     background-color: darkgrey;
 60 |     padding-left: 30px;
 61 |     padding-right: 30px;
 62 |     padding-top: 30px;
 63 |     min-height: 70px;
 64 | 
 65 |     h1 {
 66 |         font-size: $baseSize + 10px;
 67 |         font-family: 'Share', cursive;
 68 |         color: yellowgreen;    
 69 |     }
 70 | }
 71 | 
 72 | nav {
 73 |     font-size: $baseSize;
 74 |     font-weight: bold;
 75 |     float: right; 
 76 |     color: white;
 77 | 
 78 |     ul {
 79 |         list-style-type: none;
 80 | 
 81 |         li {
 82 |             float: left;
 83 |             margin: 2px;        
 84 |         }   
 85 | 
 86 |         a {
 87 |             text-decoration: none; 
 88 |             color: white;
 89 | 
 90 |             &:hover {
 91 |                 text-decoration: underline;
 92 |                 color: yellowgreen;            
 93 |             }        
 94 |         } 
 95 |     }
 96 | }
 97 | 
 98 | /* Forms */
 99 | .contact-form {
100 |     background: #f8f8f8;
101 |     width: 480px;
102 |     height: 380px;
103 |     margin-left: auto;
104 |     margin-right: auto;
105 |     border: black 2px solid;
106 |     padding: 5px;
107 | 
108 |     input[type=text], textarea {
109 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
110 |         font-size: 18px;
111 |         background: #e6e6e6;
112 |         width: 350px;
113 |         border: 1px #000 solid;
114 |         float: right;    
115 |     }
116 | 
117 |     textarea {
118 |         height: 100px;
119 |         font-family: "Open Sans", Verdana, Helvetica, sans-serif;
120 |         resize: none;
121 |     }
122 | 
123 |     label {
124 |         width: 150px;
125 |     }
126 | 
127 |     input[type=submit] {
128 |         float: right;
129 |         border: 2px solid yellowgreen; 
130 |         border-radius: 5px;
131 |         -moz-border-radius: 5px;
132 |         -webkit-border-radius: 5px;
133 |         color: white;
134 |         background-color: black;
135 |     }
136 | }
137 | 
138 | .form-statement {
139 |     padding: 20px;
140 |     display: block;
141 | }
142 | 
143 | .form-submit {
144 |     display: block;
145 |     margin-top: 100px;
146 | }
147 | 
148 | .about {
149 |     background-color: white;
150 |     width: 480px;
151 |     height: 275px;
152 |     margin-top: 1em;
153 |     margin-left: auto;
154 |     margin-right: auto;
155 |     border: black 2px solid;
156 |     padding: 5px;
157 | 
158 |     img {
159 |         max-width: 50%;
160 |         max-height: 50%;
161 |         padding: 5px;
162 | 
163 |         &:hover {
164 |             -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
165 |             filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);        
166 |         }    
167 |     }
168 | }
169 | 
170 | .about img:hover {
171 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
172 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
173 | }
174 | 
175 | footer {
176 |     font-size: $baseSize - 5px;
177 |     text-align: center;
178 |     color: white;
179 |     
180 |     position: fixed; 
181 |     left: 0px;
182 |     bottom: 0px;
183 |     width: 97%;
184 | 
185 |     padding-left: 30px;
186 |     padding-right: 30px;
187 |     padding-top: 30px;
188 |     min-height: 70px;
189 | 
190 |     border-top: 5px solid greenyellow;
191 |     background-color: darkgrey;
192 | 
193 |     p:after {
194 |         margin-left: 5px;
195 |         content: '\00A9';    
196 |     }
197 | }


--------------------------------------------------------------------------------
/Demos/src/content/sass/variables_and_functions/form.scss:
--------------------------------------------------------------------------------
  1 | // Variables declaration
  2 | $baseSize: 14px;
  3 | 
  4 | 
  5 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  6 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  7 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  8 | 
  9 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 10 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
 11 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 12 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 13 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 14 | menu, nav, section, summary, time, mark, audio, video {
 15 |     margin: 0;
 16 |     padding: 0;
 17 |     border: 0;
 18 |     outline: 0;
 19 |     font-size: 100%;
 20 |     vertical-align: baseline;
 21 |     background: transparent; 
 22 | }
 23 | 
 24 | /* Basics */
 25 | html {
 26 |     font-family: 'Raleway', sans-serif;
 27 |     font-size: $baseSize; 
 28 | }
 29 | 
 30 | body {
 31 |     background: black; 
 32 | }
 33 | 
 34 | h1 {
 35 |     font-size: $baseSize + 10px; 
 36 | }
 37 | 
 38 | h2 {
 39 |     font-size: $baseSize + 4px;
 40 | }
 41 | 
 42 | h3 {
 43 |     font-size: $baseSize + 2px; 
 44 | }
 45 | 
 46 | /* Layout */
 47 | .container {
 48 |     width: 1200px;
 49 |     height: inherit;
 50 |     margin-left: auto;
 51 |     margin-right: auto;
 52 |     background: #FFF;
 53 |     padding: 25px;
 54 |     color: black; 
 55 | }
 56 | 
 57 | /* Sections */
 58 | header {
 59 |     border-bottom: 5px solid greenyellow;
 60 |     background-color: darkgrey;
 61 |     padding-left: 30px;
 62 |     padding-right: 30px;
 63 |     padding-top: 30px;
 64 |     min-height: 70px;
 65 | }
 66 | 
 67 | header h1 {
 68 |     font-size: $baseSize + 10px;
 69 |     font-family: 'Share', cursive;
 70 |     color: yellowgreen; 
 71 | }
 72 | 
 73 | nav {
 74 |     font-size: $baseSize;
 75 |     font-weight: bold;
 76 |     float: right; 
 77 |     color: white;
 78 | }
 79 | nav ul {
 80 |     list-style-type: none;
 81 | }
 82 | nav ul li {
 83 |     float: left;
 84 |     margin: 2px;
 85 | }
 86 | 
 87 | nav ul a {
 88 |     text-decoration: none; 
 89 |     color: white;
 90 | }
 91 | 
 92 | nav ul a:hover {
 93 |     text-decoration: underline;
 94 |     color: yellowgreen; 
 95 | }
 96 | 
 97 | footer {
 98 |     font-size: $baseSize - 5px;
 99 |     text-align: center;
100 |     color: white;
101 |     
102 |     position: fixed; 
103 |     left: 0px;
104 |     bottom: 0px;
105 |     width: 97%;
106 | 
107 |     padding-left: 30px;
108 |     padding-right: 30px;
109 |     padding-top: 30px;
110 |     min-height: 70px;
111 | 
112 |     border-top: 5px solid greenyellow;
113 |     background-color: darkgrey;
114 | }
115 | 
116 | 
117 | /* Forms */
118 | .contact-form {
119 |     background: #f8f8f8;
120 |     width: 480px;
121 |     height: 380px;
122 |     margin-left: auto;
123 |     margin-right: auto;
124 |     border: black 2px solid;
125 |     padding: 5px;
126 | }
127 | 
128 | .contact-form input[type=text], .contact-form textarea {
129 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
130 |     font-size: 18px;
131 |     background: #e6e6e6;
132 |     width: 350px;
133 |     border: 1px #000 solid;
134 |     float: right;
135 | }
136 | 
137 | .form-statement {
138 |     padding: 20px;
139 |     display: block;
140 | }
141 | 
142 | .contact-form textarea {
143 |     height: 100px;
144 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
145 |     resize: none;
146 | }
147 | .contact-form label {
148 |     width: 150px; 
149 | }
150 | 
151 | .contact-form input[type=submit] {
152 |     float: right;
153 |     border: 2px solid yellowgreen; 
154 |     border-radius: 5px;
155 |     -moz-border-radius: 5px;
156 |     -webkit-border-radius: 5px;
157 |     color: white;
158 |     background-color: black;
159 | }
160 | 
161 | .form-submit {
162 |     display: block;
163 |     margin-top: 100px;
164 | }
165 | 
166 | .about {
167 |     background-color: white;
168 |     width: 480px;
169 |     height: 275px;
170 |     margin-top: 1em;
171 |     margin-left: auto;
172 |     margin-right: auto;
173 |     border: black 2px solid;
174 |     padding: 5px;
175 | }
176 | 
177 | .about img {
178 |     max-width: 50%;
179 |     max-height: 50%;
180 |     padding: 5px;
181 | }
182 | 
183 | .about img:hover {
184 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
185 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
186 | }
187 | 
188 | footer p:after {
189 |     margin-left: 5px;
190 |     content: '\00A9';
191 | }


--------------------------------------------------------------------------------
/Demos/src/content/site.css:
--------------------------------------------------------------------------------
 1 | @import 'https://fonts.googleapis.com/css?family=Raleway';
 2 | 
 3 | * {
 4 |     padding: 0;
 5 |     margin: 0;
 6 | }
 7 | 
 8 | body {
 9 |     font-family: 'Raleway', sans-serif;
10 |     display: flex;
11 |     min-height: 100vh;
12 |     flex-direction: column;
13 | }
14 | 
15 | .site-content {
16 |   flex-grow: 1;
17 | }
18 | 
19 | 
20 | .header-container {
21 |     background-color: black;
22 |     border-bottom: 3px solid yellowgreen;
23 |     height: 5em;
24 | }
25 | 
26 | h1 {
27 |     margin-top: 2%;
28 | }
29 | 
30 | .footer-container {
31 |     height: 5em;
32 |     width: 100%;
33 |     background-color: black;
34 |     border-top: 3px solid yellowgreen;
35 |     margin-top: 10px;
36 | }
37 | 
38 | .main-title {
39 |     text-align: center;
40 | }
41 | 
42 | section {
43 |     float: left;
44 |     width: 30.33%;
45 |     margin-left: 1%;
46 |     margin-top: 1%;
47 | }
48 | 
49 | section h2 {
50 |     text-align: center;
51 | }
52 | 
53 | a {
54 |     text-decoration: none;
55 |     color: black;
56 | }
57 | 
58 | a:hover {
59 |     color: greenyellow;
60 | }
61 | 
62 | ul {
63 |    list-style-type: armenian;
64 |    margin-top: 5%;
65 |    text-align: center;
66 | }
67 | 
68 | ul li {
69 |     list-style-position: inside;
70 |     margin-top: 2%;
71 | }
72 | 
73 | @media screen and (max-width: 1023px) and (min-width: 720px) {
74 |     .footer-container {
75 |         display: none;
76 |     }
77 | }
78 | 
79 | @media screen and (max-width: 719px) {
80 |     section {
81 |         width: 100%;
82 |     }
83 | 
84 |     .footer-container {
85 |         display: none;
86 |     }
87 | 
88 |     .header-container {
89 |       display: none;
90 |     }
91 | }
92 | 


--------------------------------------------------------------------------------
/Demos/src/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | 
  5 |   
  6 |   LEMONCODE 16/17 CSS
  7 |   
  8 |   
  9 | 
 10 | 
 11 | 
 12 |   

 13 |       
 14 |   

 15 |   

 16 |       
Demos Menu

 17 |       

 18 |         
CSS Básico

 19 |         
 43 |         

 44 |         

 45 |             
CSS Posicionamiento de elementos

 46 |             
 63 |         

 64 |         

 65 |             
SASS

 66 |             
110 |         

111 |         

112 |             
Web responsiva

113 |             
127 |         

128 |         

129 |             
Bootstrap 3

130 |             
153 |         

154 |         

155 |             
Materialize

156 |             
170 |         

171 |         

172 |           
Flexbox

173 |           
178 |         

179 |   

180 |   

181 | 
182 | 
183 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/border_margin_padding.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Border Margin Padding
 7 |   
 8 | 
 9 | 
10 |     
24 |     Volver a Menu
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/inheritance_in_action.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Inheritance in Action
 7 |   
 8 | 
 9 | 
10 |     
Heading 1

11 |     
Heading 2

12 |     

13 |         A div
14 |         emphasis
15 |         strong
16 |     

17 |     
A paragraph

18 |     

19 |         

20 |             A paragraph inside a div
21 |             emphasis
22 |             strong
23 |         

24 |     

25 |     Volver a Menu
26 | 
27 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/simple_selectors.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Simple Selectors
 7 |   
 8 | 
 9 | 
10 |     
Heading 1

11 |     
Heading 2

12 |     
A div

13 |     
A paragraph

14 |     

15 |         
A paragraph inside a div

16 |     

17 |     
A paragraph hit by id selector

18 |     
A paragraph hit by class

19 |     Volver a Menu
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/specifity.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Specifity
 7 |   
 8 | 
 9 | 
10 |     

11 |         
I am a lonley <p>

12 |         

13 |             
I am a <p> inside a div

14 |             
I am red?

15 |             
I am a <p> inside a div, but I have an id!

16 |         

17 |     

18 |     Volver a Menu
19 | 
20 | 
21 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/specifying_property_values.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Specifying Properties Values
 7 |   
 8 | 
 9 | 
10 |     
Heading 1

11 |     
Heading 2

12 |     
A div

13 |     

14 |         
A paragraph inside a div

15 |     

16 |     Volver a Menu
17 | 
18 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/using_font_family.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Using the cascade
 7 |   
 8 | 
 9 | 
10 |     
Using FileVersionInfo

11 |     

12 |         

13 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
14 |             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
15 |             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
16 |             esse cillum dolore eu fugiat nulla pariatur
17 |         

18 |         

19 |             I just discover the FileVersionInfo class from System.Diagnostics
20 |         

21 |         
22 |         
23 |             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
24 |             totam rem aperiam,
25 |             eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
26 |         

27 |         
To use the class then, all you need is

28 |         
    
29 |             
  1. Invoke the static GetVersionInfo method
    2. 
30 |             
  2. Start using the properties of the resulting object
    3. 
31 |         

32 |         

33 |             File version is a 64 bit number
34 |             
    
35 |                 
  • The first 16 bit are the major number
    • 
36 |                 
  • The next 16 are the minor number
    • 
37 |                 
  • The third set of 16 bits are the build number
    • 
38 |                 
  • The last 16 bits are the private build number
    • 
39 |             

40 |         

41 |     

42 |     

43 |         Include icon using UTF-8
44 |         Copyright
45 |         ©
46 |     

47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/Demos/src/pages/basic/using_the_cascade.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Using the cascade
 7 |   
 8 | 
 9 | 
10 |     
Heading 1

11 |     
Heading 2

12 |     
A div

13 |     

14 |         
A paragraph inside a div

15 |     

16 |     Volver a Menu
17 | 
18 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/01 BasicColumnsA/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 | 
 7 | 
 8 |   

 9 |     

10 |       
Visor de informes web

11 |     

12 |   

13 | 
14 |   

15 |     

16 |       
Buscar Estudio

17 |     

18 |     

19 |       
Estudios cerrados y pendientes

20 |     

21 | 
22 |   

23 | 
24 |   

25 |     

26 |     Footer
27 |     Home
28 |     

29 |   

30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/02 BasicColumnsB/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 | 
 7 | 
 8 |   

 9 |     

10 |       
Visor de informes web

11 |     

12 |   

13 | 
14 |   

15 |     

16 |       
Login

17 |     

18 | 
19 |   

20 | 
21 |   

22 |     

23 |     Footer
24 |     Home
25 |     

26 |   

27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/03 BasicColumnsC/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 | 
 7 | 
 8 |   

 9 |     

10 |       
Visor de informes web

11 |     

12 |   

13 | 
14 |   

15 |     

16 |       
Login

17 |     

18 | 
19 |   

20 | 
21 |   

22 |     

23 |     Footer
24 |     Home
25 |     

26 |   

27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/04 NestedColumns/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 | 
 7 | 
 8 |   
 9 |   

10 |     

11 |       

12 |         
Visor de informes web

13 |       

14 |     

15 |   

16 | 
17 |   

18 |     

19 |       

20 |         
Cabecera ciudadano

21 |       

22 |     

23 | 
24 |     

25 |       

26 |         
Multas cerradas

27 |       

28 |       

29 |         
Detalle Multas

30 |       

31 |     

32 | 
33 |   

34 | 
35 |   

36 |     

37 |       

38 |         Home
39 |       Footer
40 |       

41 |     

42 |   

43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/05 Forms/assets/css/site.css:
--------------------------------------------------------------------------------
 1 | .jumbo-banner {
 2 |   width:100%;
 3 |   height:350px;
 4 |   background-image:url('../images/archive.png');
 5 |   background-size:cover;
 6 | }
 7 | 
 8 | .footer { 
 9 |   padding-top:5px; 
10 |   padding-bottom:5px; 
11 |   display: table-cell;
12 |   vertical-align: middle;  
13 | }


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/05 Forms/assets/images/archive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/pages/bootstrap3/05 Forms/assets/images/archive.png


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/05 Forms/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/pages/bootstrap3/05 Forms/assets/images/logo.png


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/05 Forms/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 | 
 8 | 
 9 |   
10 |   

11 |     

12 |       

13 |         
my App gestor de infracciones

14 |       

15 |     

16 |   

17 | 
18 |   

19 | 
20 |     
21 |     

22 |       
24 |     

25 |     
26 | 
27 |     
28 |     

29 |         

30 |           
Login

31 |           

32 |               

33 |                 
34 |                 

35 |                   
36 |                 

37 |               

38 | 
39 |               

40 |                 
41 |                 

42 |                   
43 |                   Tiene activo el bloqueo de mayúsculas. Recuerde que la constraseña distingue entre mayúsculas y minúsculas
44 |                 

45 |               

46 | 
47 |               

48 |                 

49 |                  
50 |                 

51 |               

52 |           

53 |         

54 |     

55 |     
56 | 
57 |   

58 | 
59 |   

60 |     

61 |       

62 |         
63 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, diam ultrices condimentum eleifend, urna ligula consectetur elit, non consequat est quam in est.
64 |       

65 |     

66 |   

67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/06 NavBar/assets/css/site.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |   padding-top:5px;
 3 |   padding-bottom:5px;
 4 |   display: table-cell;
 5 |   vertical-align: middle;
 6 | }
 7 | 
 8 | .nav-style {
 9 |   padding-top:5px;
10 | }
11 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/06 NavBar/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/pages/bootstrap3/06 NavBar/assets/images/logo.png


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/06 NavBar/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |   
  6 |   
  7 |   
  8 | 
  9 | 
 10 |   

 11 |     

 12 |         

 13 |           
 16 |           
 21 |         

 22 |         

 23 |           
 34 |         

 35 |     

 36 |   

 37 | 
 38 |   

 39 |     
 40 |     

 41 |       
 42 |       

 43 |          Buscar Infracción
 44 |         
 45 |         

 46 |           

 47 |             

 48 |               

 49 |                 
 50 |                 
 51 |               

 52 |             

 53 | 
 54 |             

 55 |               

 56 |                 
 57 |                 
 58 |               

 59 |             

 60 | 
 61 |             

 62 |               

 63 |                 
 64 |                 
 65 |               

 66 |             

 67 | 
 68 |             

 69 |               

 70 |                 
 71 |                 
 72 |               

 73 |             

 74 | 
 75 |             

 76 |               

 77 |                 
 78 |                 
 79 |               

 80 |             

 81 | 
 82 |             

 83 |               

 84 |                 
 85 |                 
 86 |               

 87 |             

 88 | 
 89 |             

 90 |               

 91 |                 
 92 |                 
 93 |               

 94 |             

 95 | 
 96 |             

 97 |                 
 98 |             

 99 |           

100 |         

101 |       

102 |       
103 |       

104 |          
105 |          
109 |         

110 |           

111 |             
112 |               
113 |                 
114 |                 
115 |                 
116 |               
117 | 
118 |               
119 |                 
120 |                 
121 |                 
122 |               
123 | 
124 |               
125 |                 
126 |                 
127 |                 
128 |               
129 | 
130 |               
131 |                 
132 |                 
133 |                 
134 |               
135 | 
136 |               
137 |                 
138 |                 
139 |                 
140 |               
141 | 
142 |               
143 |                 
144 |                 
145 |                 
146 |               
147 | 
148 |               
149 |                 
150 |                 
151 |                 
152 |               
153 | 
154 |               
155 |                 
156 |                 
157 |                 
158 |               
159 | 
160 |               
161 |                 
162 |                 
163 |                 
164 |               
165 |             
CiudadanoTipoF. Cierre
Perez Gomez, JuanAPARCAMIENTO12/06/2014
Guzman Alegria, Jose ManuelSARE12/06/2014
Muñoz Salas, TeresaVELOCIDAD10/06/2014
España González, JuanVELOCIDAD10/06/2014
Nuñez Navarro, MiguelVELOCIDAD12/06/2014
Navas Iniesta, LionelAPARCAMIENTO12/06/2014
Rumbado Tejón, MariaAPARCAMIENTO10/06/2014
Keylor Torres, DavidAPARCAMIENTO10/06/2014

166 |           

167 | 
168 |           
Pending

169 |         

170 | 
171 |       

172 | 
173 |     

174 |     
175 | 
176 |   

177 |   

178 |     

179 |       

180 |         
181 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, diam ultrices condimentum eleifend, urna ligula consectetur elit, non consequat est quam in est.
182 |       

183 |     

184 |   

185 |   
186 |   
187 | 
188 | 
189 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/07 Tables/assets/css/site.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |   padding-top:5px;
 3 |   padding-bottom:5px;
 4 |   display: table-cell;
 5 |   vertical-align: middle;
 6 | }
 7 | 
 8 | .nav-style {
 9 |   padding-top:5px;
10 | }
11 | 


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/07 Tables/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lemoncode/layout-samples/d4f999089f6bf1351b31546293884aa62e9f47d3/Demos/src/pages/bootstrap3/07 Tables/assets/images/logo.png


--------------------------------------------------------------------------------
/Demos/src/pages/bootstrap3/07 Tables/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |   
  6 |   
  7 |   
  8 |   
  9 |   
 10 |   
 11 | 
 12 | 
 13 |   
 14 |   

 15 |     

 16 |       

 17 |         
my App gestor de infracciones

 18 |       

 19 |     

 20 |   

 21 | 
 22 |   

 23 |     
 24 |     

 25 |       
 26 |       

 27 |          Buscar Infracción
 28 |         
 29 |         

 30 |           

 31 |             

 32 |               

 33 |                 
 34 |                 
 35 |               

 36 |             

 37 | 
 38 |             

 39 |               

 40 |                 
 41 |                 
 42 |               

 43 |             

 44 | 
 45 |             

 46 |               

 47 |                 
 48 |                 
 49 |               

 50 |             

 51 | 
 52 |             

 53 |               

 54 |                 
 55 |                 
 56 |               

 57 |             

 58 | 
 59 |             

 60 |               

 61 |                 
 62 |                 
 63 |               

 64 |             

 65 | 
 66 |             

 67 |               

 68 |                 
 69 |                 
 70 |               

 71 |             

 72 | 
 73 |             

 74 |               

 75 |                 
 76 |                 
 77 |               

 78 |             

 79 | 
 80 |             

 81 |                 
 82 |             

 83 |           

 84 |         

 85 |       

 86 |       
 87 | 
 88 |       

 89 |          
 90 |          
 94 | 
 95 |         

 96 |           

 97 |             
 98 |               
 99 |                 
100 |                 
101 |                 
102 |               
103 | 
104 |               
105 |                 
106 |                 
107 |                 
108 |               
109 | 
110 |               
111 |                 
112 |                 
113 |                 
114 |               
115 | 
116 |               
117 |                 
118 |                 
119 |                 
120 |               
121 | 
122 |               
123 |                 
124 |                 
125 |                 
126 |               
127 | 
128 |               
129 |                 
130 |                 
131 |                 
132 |               
133 | 
134 |               
135 |                 
136 |                 
137 |                 
138 |               
139 | 
140 |               
141 |                 
142 |                 
143 |                 
144 |               
145 | 
146 |               
147 |                 
148 |                 
149 |                 
150 |               
151 |             
CiudadanoTipoF. Cierre
Perez Gomez, JuanAPARCAMIENTO12/06/2014
Guzman Alegria, Jose ManuelSARE12/06/2014
Muñoz Salas, TeresaVELOCIDAD10/06/2014
España González, JuanVELOCIDAD10/06/2014
Nuñez Navarro, MiguelVELOCIDAD12/06/2014
Navas Iniesta, LionelAPARCAMIENTO12/06/2014
Rumbado Tejón, MariaAPARCAMIENTO10/06/2014
Keylor Torres, DavidAPARCAMIENTO10/06/2014

152 |           

153 | 
154 |           
Pending

155 |         

156 | 
157 |       

158 | 
159 |     

160 |     
161 | 
162 |   

163 | 
164 |   

165 |     

166 |       

167 |         
168 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, diam ultrices condimentum eleifend, urna ligula consectetur elit, non consequat est quam in est.
169 |       

170 |     

171 |   

172 | 
173 | 


--------------------------------------------------------------------------------
/Demos/src/pages/flex/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Specifity
 7 |   
 8 | 
 9 | 
10 |     

11 |       
1

12 |       
2

13 |       
3

14 |       
4

15 |       
5

16 |       
6

17 |       
7

18 |     

19 | 
20 | 
21 | 


--------------------------------------------------------------------------------
/Demos/src/pages/materialize/01 Hello materialize/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Hello Materialize
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 | 
11 | 
12 |   

13 |     
23 |   

24 |   

25 |     
Content goes here!

26 |   

27 |   
28 |   

29 |     

30 |     

31 |     

32 |       

33 |         © Lemoncode
34 |       

35 |     

36 |   

37 |   
38 |   
39 | 
40 | 


--------------------------------------------------------------------------------
/Demos/src/pages/materialize/02 BasicGrid/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Basic Grid
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 | 
11 | 
12 |   

13 |     
23 |   

24 |   

25 |     

26 |       
Ancho 6 columnas

27 |       
Ancho 6 columnas

28 |       
Ancho 4 columnas

29 |       
Ancho 8 columnas

30 |       
Ancho 3 columnas

31 |       
Ancho 3 columnas

32 |       
Ancho 3 columnas

33 |       
Ancho 3 columnas

34 |       
Ancho 2 columnas

35 |       
Ancho 2 columnas

36 |       
Ancho 2 columnas

37 |       
Ancho 2 columnas

38 |       
Ancho 2 columnas

39 |       
Ancho 2 columnas

40 |     

41 |     
42 |     

43 |       
Ancho 6 columnas

44 |       
Ancho 6 columnas

45 |     

46 |     

47 |       
Ancho 4 columnas

48 |       
Ancho 8 columnas

49 |     

50 |     

51 |       
Ancho 3 columnas

52 |       
Ancho 3 columnas

53 |       
Ancho 3 columnas

54 |       
Ancho 3 columnas

55 |     

56 |     

57 |       
Ancho 2 columnas

58 |       
Ancho 2 columnas

59 |       
Ancho 2 columnas

60 |       
Ancho 2 columnas

61 |       
Ancho 2 columnas

62 |       
Ancho 2 columnas

63 |     

64 |   

65 |   
66 |   

67 |     

68 |     

69 |     

70 |       

71 |         © Lemoncode
72 |       

73 |     

74 |   

75 |   
76 |   
77 | 
78 | 


--------------------------------------------------------------------------------
/Demos/src/pages/materialize/03 ResponsiveGrid/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Basic Grid
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 | 
11 | 
12 |   

13 |     
23 |   

24 |   

25 |     

26 |       

27 |         
    
28 |           
  • 
29 |             
    Acciones
    
30 |           
    • 
31 |           
  • 
32 |             add
33 |             Añadir
34 |             
    Nuevo elemento para insertar
    
35 |           
    • 
36 |           
  • 
37 |             folder
38 |             Ficheros
39 |             
    Añadir documentación correspondiente
    
40 |           
    • 
41 |           
  • 
42 |             close
43 |             Cerrar
44 |             
    Cerrar opciones
    
45 |           
    • 
46 |         

47 |       

48 |       

49 |         

50 |           
Temas de actualidad

51 |           

52 |             

53 |               

54 |                 Estrofa
55 |                 

56 |                   Tremble for yourself, my man,
57 |                   You know that you have seen this all before
58 |                   Tremble, little lion man.
59 |                 

60 |               

61 |               

62 |                 Enlace
63 |               

64 |             

65 |             
66 |           

67 |           

68 |             

69 |               

70 |                 Estrofa
71 |                 

72 |                   Weep for yourself, my man,You'll never be what is in your heartWeep,
73 |                   little lion man,
74 |                   You're not as brave as you were at the start
75 |                   Rate yourself and rake yourself
76 |                   Take all the courage you have left
77 |                   And waste it on fixing all the problems that you made in your own head
78 |                 

79 |               

80 |               

81 |                 Enlace
82 |               

83 |             

84 |           

85 |         

86 |       

87 |     

88 |     
89 |   

90 |   
91 |   
92 | 
93 | 


--------------------------------------------------------------------------------
/Demos/src/pages/materialize/04 Forms/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Basic Grid
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 | 
11 | 
12 |   

13 |     
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 |         

49 |         

50 |           

51 |             
52 |             
53 |           

54 |         

55 |       

56 |     

57 |     

58 |       

59 |         
60 |           mode_edit
61 |         
62 |       

63 |       

64 |         
65 |           send
66 |         
67 |       

68 |     

69 |   

70 |   
71 |   
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/Demos/src/pages/positioning/absolute.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |     
 4 |         CSS Posicionamiento
 5 |         
 6 |         
 7 |     
 8 |     
 9 |         

10 |             

11 |         

12 |         

13 |         
Comprendiendo CSS Positioning

14 |         

15 |             Posicionamiento Absoluto
16 |         

17 |         
18 |             coge un elemnto y lo saca fuera del flujo del documento, esto 
19 |             significa que el browser actua como si el elemento no tuviera
20 |             'width' ni 'height', y los demas elementos en la página, se
21 |             mueven hacia arriba como si nunca hubiera estado ahí. La 
22 |             posición del elemento es fijada relativa de más alto nivel,
23 |             o al ancestro más cercano con un posicionamiento establecido.
24 |         

25 |     
26 | 


--------------------------------------------------------------------------------
/Demos/src/pages/positioning/fixed.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |     
 4 |         CSS Posicionamiento
 5 |         
 6 |         
 7 |     
 8 |     
 9 |         

10 |         

11 |         
Comprendiendo CSS Positioning

12 |         

13 |             Posicionamiento Fijo 'fija' la posición de un elemento relativo a la ventana del navegador.
14 |             El elemento siempre permanece fijo en el mismo lugar incluso, cuando hacemos scroll sobre la pantalla.
15 |         

16 |     
17 | 
18 | 


--------------------------------------------------------------------------------
/Demos/src/pages/positioning/float.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |     
 4 |         CSS Posicionamiento
 5 |         
 6 |         
 7 |     
 8 |     
 9 |         

10 |         

11 |         
Comprendiendo CSS Positioning

12 |         

13 |             Floating left elimina un elemento del flujo normal del documento. Se toma despúes el
14 |             elemento y se empuja hacia la izquierda lo máximo posible. Los otros elementos se moveran hacia
15 |             arriba tanto como les sea posible para 'flotar' alrededor del elemento y tomar su espacio
16 |             original.
17 |         

18 |         

19 |             Floating right elimina un elemento del flujo normal del documento. Se toma después el
20 |             elemento y se empuja hacia la derecha lo máximo posible. Los otros elementos se moveran hacia
21 |             arriba tanto como les sea posible para 'flotar' alrededor del elemento y tomar su espacio
22 |             original.
23 |         

24 |     
25 | 
26 | 


--------------------------------------------------------------------------------
/Demos/src/pages/positioning/relative.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |     
 4 |         CSS Posicionamiento
 5 |         
 6 |         
 7 |     
 8 |     
 9 |         

10 |             

11 |         

12 |         

13 |         
Comprendiendo CSS Positioning

14 |         

15 |             Posicionamiento Relativo
16 |         

17 |         
18 |         Establece la posición de un elemento relativo a su posición original. El ancho
19 |         y alto del elemento es retenido en el flujo del documento y los otros elementos
20 |         se comportan como si estuviera en su posición original.
21 |         

22 |     
23 | 
24 | 


--------------------------------------------------------------------------------
/Demos/src/pages/positioning/static_inherit_z_index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |     
 4 |         CSS Posicionamiento
 5 |         
 6 |         
 7 |     
 8 |     
 9 |         

10 |             

11 |         

12 |         

13 |         
Comprendiendo CSS Positioning

14 |         

15 |             Static Positioning es el comportamiento por defecto en los elementos 
16 |             Inherited positioning Le dice a un elemento que herede su posicionamiento de su padre.
17 |             Z-index controla el orden apilamiento vertical de los elementos. Los elemento deben 
18 |             tener establecido un valor para el z-index para que funcione.
19 |         

20 |     
21 | 


--------------------------------------------------------------------------------
/Demos/src/pages/rwd/basic-transform.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     Basic
 5 | 
 6 |     
34 |   
35 | 
36 |   
37 |     

38 |       
Spanning three columns.

39 |     

40 | 
41 |     

42 |       
Spanning one column.

43 |     

44 | 
45 |     

46 |       
Spanning two columns.

47 |     

48 | 
49 |     

50 |       
Spanning one column.

51 |     

52 | 
53 |     

54 |       
Spanning one column.

55 |     

56 | 
57 |     

58 |       
Spanning one column.

59 |     

60 | 
61 |   
62 | 
63 | 


--------------------------------------------------------------------------------
/Demos/src/pages/rwd/media-queries-print.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Basic
 6 |     
45 |   
46 |   
47 |     
48 |       
49 |         
50 |         
51 |         
52 |       
53 |       
54 |         
55 |         
56 |         
57 |       
58 |     
ArtistAlbumSales
Joe DoeFoo is back1

59 | 
60 |     
61 |     
88 |   
89 | 
90 | 


--------------------------------------------------------------------------------
/Demos/src/pages/rwd/media-queries.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     Basic
  5 |     
  6 |     
 85 |   
 86 | 
 87 |   
 88 |     

 89 |       
Spanning three columns.

 90 |     

 91 | 
 92 |     

 93 |       
Spanning one column.

 94 |     

 95 | 
 96 |     

 97 |       
Spanning two columns.

 98 |     

 99 | 
100 |     

101 |       
Spanning one column.

102 |     

103 | 
104 |     

105 |       
Spanning one column.

106 |     

107 | 
108 |     

109 |       
Spanning one column.

110 |     

111 | 
112 |   
113 | 
114 | 


--------------------------------------------------------------------------------
/Demos/src/pages/rwd/transform-with-image.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     Poggy image
 5 | 
 6 |     
52 |   
53 | 
54 |   
55 |     

56 |       
The Piggy Poem.

57 |       
a lovely pig
58 |         In England once there lived a big
59 |         And wonderfully clever pig.
60 |         To everybody it was plain
61 |         That Piggy had a massive brain.
62 |       

63 |     

64 | 
65 |     

66 |       
Spanning one column.

67 |     

68 | 
69 |     

70 |       
Spanning two columns.

71 |     

72 | 
73 |     

74 |       
Spanning one column.

75 |     

76 | 
77 |     

78 |       
Spanning one column.

79 |     

80 | 
81 |     

82 |       
Spanning one column.

83 |     

84 | 
85 |   
86 | 
87 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/bem/bem.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 |     
 7 |     
 8 | 
 9 | 
10 |   
11 |   
BEM HTML

12 |   

13 |     
    
14 |       
  • Item 1
    • 
15 |       
  • Item 2
    • 
16 |       
  • Item 3
    • 
17 |       
  • Item 4
    • 
18 |     

19 |     

20 |     
21 |       Incluir en mis favoritos.
22 |     
23 |   

24 |   
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/bem/no-bem.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 |     
 7 |     
 8 | 
 9 | 
10 |   
11 |   
No BEM HTML

12 |   

13 |     
    
14 |       
  • Item 1
    • 
15 |       
  • Item 2
    • 
16 |       
  • Item 3
    • 
17 |       
  • Item 4
    • 
18 |     

19 |     

20 |     
21 |       Incluir en mis favoritos.
22 |     
23 |   

24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/bem/sass-bem.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 |     
 7 |     
 8 | 
 9 | 
10 |   
11 |   
BEM HTML

12 |   

13 |     
    
14 |       
  • Item 1
    • 
15 |       
  • Item 2
    • 
16 |       
  • Item 3
    • 
17 |       
  • Item 4
    • 
18 |     

19 |     

20 |     
21 |       Incluir en mis favoritos.
22 |     
23 |   

24 |   
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/custom_bootstrap/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 |     
 7 |     
 8 | 
 9 | 
10 |     

11 |         
49 |     

50 |     

51 |         
El Cuento de los tres Cerditos

52 |         

53 |             

54 |                 girl
55 |             

56 |             

57 |                 

58 |                     Al lado de sus padres , tres cerditos habian crecido alegres en una cabaña del bosque. 
59 |                     Y como ya eran mayores, sus papas decidieron que era hora de que construyeran , cada uno, 
60 |                     su propia casa. Los tres cerditos se despidieron de sus papas, y fueron a ver como era el 
61 |                     mundo.
62 |                 

63 |                 

64 |                     El primer cerdito, el perezoso de la familia , decidio hacer una casa de paja. 
65 |                     En un minuto la choza estaba ya hecha. Y entonces se fue a dormir.
66 |                 

67 |                 

68 |                     El segundo cerdito , un gloton , prefirio hacer la cabaña de madera. No tardo mucho en construirla. 
69 |                     Y luego se fue a comer manzanas.
70 |                 

71 |             

72 |         

73 |     

74 |     
75 |     
76 | 
77 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/plain/form.css:
--------------------------------------------------------------------------------
  1 | @import 'https://fonts.googleapis.com/css?family=Raleway';
  2 | @import 'http://fonts.googleapis.com/css?family=Share:400,700';
  3 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700s';
  4 | 
  5 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  7 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
  9 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
 10 | menu, nav, section, summary, time, mark, audio, video {
 11 |     margin: 0;
 12 |     padding: 0;
 13 |     border: 0;
 14 |     outline: 0;
 15 |     font-size: 100%;
 16 |     vertical-align: baseline;
 17 |     background: transparent; 
 18 | }
 19 | 
 20 | /* Basics */
 21 | html {
 22 |     font-family: 'Raleway', sans-serif;
 23 |     font-size: 14px; 
 24 | }
 25 | 
 26 | body {
 27 |     background: black; 
 28 | }
 29 | 
 30 | h1 {
 31 |     font-size: 24px; 
 32 | }
 33 | 
 34 | h2 {
 35 |     font-size: 18px;
 36 | }
 37 | 
 38 | h3 {
 39 |     font-size: 16px; 
 40 | }
 41 | 
 42 | /* Layout */
 43 | .container {
 44 |     width: 1200px;
 45 |     height: inherit;
 46 |     margin-left: auto;
 47 |     margin-right: auto;
 48 |     background: #FFF;
 49 |     padding: 25px;
 50 |     color: black; 
 51 | }
 52 | 
 53 | /* Sections */
 54 | header {
 55 |     border-bottom: 5px solid greenyellow;
 56 |     background-color: darkgrey;
 57 |     padding-left: 30px;
 58 |     padding-right: 30px;
 59 |     padding-top: 30px;
 60 |     min-height: 70px;
 61 | }
 62 | 
 63 | header h1 {
 64 |     font-size: 24px;
 65 |     font-family: 'Share', cursive;
 66 |     color: yellowgreen; 
 67 | }
 68 | 
 69 | nav {
 70 |     font-size: 14px;
 71 |     font-weight: bold;
 72 |     float: right; 
 73 |     color: white;
 74 | }
 75 | nav ul {
 76 |     list-style-type: none;
 77 | }
 78 | nav ul li {
 79 |     float: left;
 80 |     margin: 2px;
 81 | }
 82 | 
 83 | nav ul a {
 84 |     text-decoration: none; 
 85 |     color: white;
 86 | }
 87 | 
 88 | nav ul a:hover {
 89 |     text-decoration: underline;
 90 |     color: yellowgreen; 
 91 | }
 92 | 
 93 | footer {
 94 |     font-size: 9px;
 95 |     text-align: center;
 96 |     color: white;
 97 |     
 98 |     position: fixed; 
 99 |     left: 0px;
100 |     bottom: 0px;
101 |     width: 97%;
102 | 
103 |     padding-left: 30px;
104 |     padding-right: 30px;
105 |     padding-top: 30px;
106 |     min-height: 70px;
107 | 
108 |     border-top: 5px solid greenyellow;
109 |     background-color: darkgrey;
110 | }
111 | 
112 | 
113 | /* Forms */
114 | .contact-form {
115 |     background: #f8f8f8;
116 |     width: 480px;
117 |     height: 380px;
118 |     margin-left: auto;
119 |     margin-right: auto;
120 |     border: black 2px solid;
121 |     padding: 5px;
122 | }
123 | 
124 | .contact-form input[type=text], .contact-form textarea {
125 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
126 |     font-size: 18px;
127 |     background: #e6e6e6;
128 |     width: 350px;
129 |     border: 1px #000 solid;
130 |     float: right;
131 | }
132 | 
133 | .form-statement {
134 |     padding: 20px;
135 |     display: block;
136 | }
137 | 
138 | .contact-form textarea {
139 |     height: 100px;
140 |     font-family: "Open Sans", Verdana, Helvetica, sans-serif;
141 |     resize: none;
142 | }
143 | .contact-form label {
144 |     width: 150px; 
145 | }
146 | 
147 | .contact-form input[type=submit] {
148 |     float: right;
149 |     border: 2px solid yellowgreen; 
150 |     border-radius: 5px;
151 |     -moz-border-radius: 5px;
152 |     -webkit-border-radius: 5px;
153 |     color: white;
154 |     background-color: black;
155 | }
156 | 
157 | .form-submit {
158 |     display: block;
159 |     margin-top: 100px;
160 | }
161 | 
162 | .about {
163 |     background-color: white;
164 |     width: 480px;
165 |     height: 275px;
166 |     margin-top: 1em;
167 |     margin-left: auto;
168 |     margin-right: auto;
169 |     border: black 2px solid;
170 |     padding: 5px;
171 | }
172 | 
173 | .about img {
174 |     max-width: 50%;
175 |     max-height: 50%;
176 |     padding: 5px;
177 | }
178 | 
179 | .about img:hover {
180 |     -webkit-filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
181 |     filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
182 | }
183 | 
184 | footer p:after {
185 |     margin-left: 5px;
186 |     content: '\00A9';
187 | }


--------------------------------------------------------------------------------
/Demos/src/pages/sass/plain/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/playground/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 | 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 | 
41 |                 

42 |                     
45 |                     
46 |                 

47 | 
48 |                 

49 |                     
52 |                     
53 |                 

54 | 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 
80 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/test/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 | 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 | 
41 |                 

42 |                     
45 |                     
46 |                 

47 | 
48 |                 

49 |                     
52 |                     
53 |                 

54 | 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 
80 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_control_directives/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 |     
 7 | 
 8 | 
 9 |     

10 |         
17 |         

18 |             Using control directives
19 |         

20 |     

21 |     

22 |       

23 |       

24 |       

25 |       

26 |       

27 |     

28 |     

29 |         
Lemoncode©

30 |         
37 |     

38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_extend/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_function/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_import/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_mixins/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/using_rules/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     

69 |         
Lemoncode

70 |         
77 |     

78 | 
79 | 


--------------------------------------------------------------------------------
/Demos/src/pages/sass/variables_and_functions/form.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Lemoncode Contact Page
 5 |     
 6 | 
 7 | 
 8 |     

 9 |         
16 |         

17 |             Start Page
18 |         

19 |     

20 |     

21 |         

22 |             

23 |                 Contacto
24 |             

25 |             

26 |                 
27 |                 

28 |                     
31 |                     
32 |                 

33 | 
34 |                 

35 |                     
38 |                     
39 |                 

40 |                 
41 |                 

42 |                     
45 |                     
46 |                 

47 |                 
48 |                 

49 |                     
52 |                     
53 |                 

54 |                 
55 |                 

56 |                     
57 |                 

58 |             

59 |         

60 |         

61 |             
Acerca de nostros

62 |             
63 |             
64 |             
Mira tu un par de limones...

65 |         

66 |     

67 | 
68 |     
78 | 
79 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Lemoncode
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


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