diff --git a/Resources/assets/scratch-css/.gitignore b/Resources/assets/scratch-css/.gitignore new file mode 100644 index 000000000..70fdc51cc --- /dev/null +++ b/Resources/assets/scratch-css/.gitignore @@ -0,0 +1,11 @@ +# MacOS +.DS_Store + +.sass-cache/ +bower_components/ +fonts/ +node_modules/ + +stylesheets/sass/contrib/ +stylesheets/scratch.css +stylesheets/scratch.css.map diff --git a/Resources/assets/scratch-css/Gruntfile.js b/Resources/assets/scratch-css/Gruntfile.js new file mode 100644 index 000000000..1adfc9a8b --- /dev/null +++ b/Resources/assets/scratch-css/Gruntfile.js @@ -0,0 +1,105 @@ +module.exports = function(grunt) { + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + scratch: { + folders: { + fonts: './fonts', + bower: './bower_components/', + css: { + dist: './stylesheets/', + }, + sass: { + src: './stylesheets/sass/', + contrib: './stylesheets/sass/contrib', + } + } + }, + bower: { + install: { + options: { + targetDir: '<%= scratch.folders.bower %>', + install: true, + copy: false + } + } + }, + copy: { + gridle: { + files: [{ + cwd: '<%= scratch.folders.bower %>gridle/sass/', + src: '**', + dest: 'stylesheets/sass/contrib/gridle/', + expand: true, + }] + }, + normalize: { + src: '<%= scratch.folders.bower %>/normalize.css/normalize.css', + dest: '<%= scratch.folders.sass.contrib %>/normalize/_normalize.scss' + }, + fontawesome: { + files: [ + { + cwd: '<%= scratch.folders.bower %>/fontawesome/scss/', + src: '*', + dest: '<%= scratch.folders.sass.contrib %>/fontawesome', + expand: true, + }, + { + cwd: '<%= scratch.folders.bower %>/fontawesome/fonts/', + src: '*', + dest: '<%= scratch.folders.fonts %>', + expand: true, + } + ] + }, + bourbon: { + files: [{ + cwd: '<%= scratch.folders.bower %>bourbon/dist/', + src: '**', + dest: '<%= scratch.folders.sass.contrib %>/bourbon/', + expand: true, + }] + }, + }, + sass: { + dist: { + files: [{ + expand: true, + cwd: '<%= scratch.folders.sass.src %>', + src: ['*.scss'], + dest: '<%= scratch.folders.css.dist %>', + ext: '.css' + }] + } + }, + watch: { + css: { + files: [ '<%= scratch.folders.sass.src %>/**/*.scss' ], + tasks: ['css'], + /* + options: { + spawn: false, + interrupt: true, + } + */ + } + }, + clean: { + css: ['<%= scratch.folders.css.dist %>/*.css'], + sasscontrib: [ '<%= scratch.folders.sass.contrib %>' ] + } + }); + + grunt.loadNpmTasks('grunt-bower-task'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-clean'); + + grunt.registerTask('css', ['clean:css', 'sass']) + grunt.registerTask('dependencies', ['bower', 'clean:sasscontrib', 'copy']) + //The default task + grunt.registerTask('default', ['dependencies', 'css']); +}; \ No newline at end of file diff --git a/Resources/assets/scratch-css/README.md b/Resources/assets/scratch-css/README.md new file mode 100644 index 000000000..6cbd86ee6 --- /dev/null +++ b/Resources/assets/scratch-css/README.md @@ -0,0 +1,17 @@ +ScratchCSS +========== + +Installation +------------ + +```bash +npm install +grunt +``` + +Developpement : autoupdate +-------------------------- + +```bash +grunt watch +``` \ No newline at end of file diff --git a/Resources/assets/scratch-css/bower.json b/Resources/assets/scratch-css/bower.json new file mode 100644 index 000000000..875e93a81 --- /dev/null +++ b/Resources/assets/scratch-css/bower.json @@ -0,0 +1,24 @@ +{ + "name": "Scratch CSS Design", + "version": "0.0.0", + "authors": [ + "Marc Ducobu ", + "Julien Fastré " + ], + "description": "Scratch CSS Design", + "license": "", + "private": true, + "ignore": [ + "**/.*", + "bower_components", + "test", + "tests" + ], + "dependencies": {}, + "devDependencies": { + "normalize.css": "~3.0.2", + "gridle": "~1.3.33", + "fontawesome": "~4.2.0", + "bourbon": "~4.0.2" + } +} diff --git a/Resources/assets/scratch-css/index.html b/Resources/assets/scratch-css/index.html new file mode 100644 index 000000000..2fa7af0cd --- /dev/null +++ b/Resources/assets/scratch-css/index.html @@ -0,0 +1,249 @@ + + + + + + + Scratch + + + + +
+
+ +
+ +
+ + + + +
+ +
+ +
+
+ +
+
+
+
+ +
+ +

First Name

+
+
+ +

Last Name

+
+
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+
+
+
+ +
+
+
+ Fieldset title + + + + + + + + + +
+ +
+ Rock Bands + +

Please select one or more options

+ +
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+ +
+ Pick a card +

Please select one of these options

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
+ +
+
+ +
+ +
+ + This is a success message with a link + +
+ +
+ + This is a error message with a link + +
+ +
+ + This is a notice message with a link + +
+ +
+ + This is a alert message with a link + +
+ +
+ Button +
+
+ Button +
+
+ Button +
+
+ Button +
+
+ Button +
+
+ Button +
+
+ Button +
+
+ Button +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/Resources/assets/scratch-css/package.json b/Resources/assets/scratch-css/package.json new file mode 100644 index 000000000..1483074fe --- /dev/null +++ b/Resources/assets/scratch-css/package.json @@ -0,0 +1,21 @@ +{ + "name": "scratch-css-design", + "version": "0.0.0", + "description": "Scratch CSS Design", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Champs-Libres.coop", + "license": "GNU AGPL", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-bower-task": "^0.4.0", + "grunt-contrib-copy": "^0.7.0", + "grunt-contrib-sass": "^0.8.1", + "jit-grunt": "^0.9.0", + "grunt-contrib-watch": "^0.6.1", + "grunt-contrib-clean": "^0.6.0" + }, + "dependencies": {} +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/config/_buttons.scss b/Resources/assets/scratch-css/stylesheets/sass/config/_buttons.scss new file mode 100644 index 000000000..00b61968c --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/config/_buttons.scss @@ -0,0 +1,7 @@ +// Buttons +$button-font-size : 15px !default; +$button-text-color : #000 !default; +$button-text-weight : 300 !default; +$button-padding : 8px 12px !default; +$button-background : #eee !default; +$button-margin : 5px !default; \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/config/_colors.scss b/Resources/assets/scratch-css/stylesheets/sass/config/_colors.scss new file mode 100644 index 000000000..fb5371de8 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/config/_colors.scss @@ -0,0 +1,49 @@ +// BODY +$body-background : #fff !default; + +// PLAIN TEXT +$text-color : #555 !default; + +// HEADINGS +$headings-color : #404040 !default; + +// LINKS +$link-color : #6998C9 !default; +$link-visited-color : #808080 !default; +$link-active-color : shade(red,5%) !default; +$link-hover-color : #007ED5 !default; +$link-focus-color : $link-color !default; + +$white : #fff !default; +$black : #000 !default; +$orange : #ff9c00 !default; +$red : #c91111 !default; +$green : #4a9b17 !default; +$blue : #0f75da !default; +$yellow : #ffd500 !default; + +$warning-bg : $orange !default; +$caution-bg : $red !default; +$error-bg : $red !default; +$success-bg : $green !default; +$info-bg : $blue !default; + +$grey-95 : lighten($black, 5%) !default; +$grey-90 : lighten($black, 10%) !default; +$grey-85 : lighten($black, 15%) !default; +$grey-80 : lighten($black, 20%) !default; +$grey-75 : lighten($black, 25%) !default; +$grey-70 : lighten($black, 30%) !default; +$grey-65 : lighten($black, 35%) !default; +$grey-60 : lighten($black, 40%) !default; +$grey-55 : lighten($black, 45%) !default; +$grey-50 : lighten($black, 50%) !default; +$grey-45 : lighten($black, 55%) !default; +$grey-40 : lighten($black, 60%) !default; +$grey-35 : lighten($black, 65%) !default; +$grey-30 : lighten($black, 70%) !default; +$grey-25 : lighten($black, 75%) !default; +$grey-20 : lighten($black, 80%) !default; +$grey-15 : lighten($black, 85%) !default; +$grey-10 : lighten($black, 90%) !default; +$grey-5 : lighten($black, 95%) !default; diff --git a/Resources/assets/scratch-css/stylesheets/sass/config/_variables.scss b/Resources/assets/scratch-css/stylesheets/sass/config/_variables.scss new file mode 100644 index 000000000..e94e7fe71 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/config/_variables.scss @@ -0,0 +1,65 @@ +// Typography +//$sans-serif: $helvetica; +//$serif: $georgia; +//$base-font-family: $sans-serif; +//$header-font-family: $base-font-family; + +// Font Sizes +$base-font-size: 1em; +$h1-font-size: $base-font-size * 2.25; +$h2-font-size: $base-font-size * 2; +$h3-font-size: $base-font-size * 1.75; +$h4-font-size: $base-font-size * 1.5; +$h5-font-size: $base-font-size * 1.25; +$h6-font-size: $base-font-size; + +// Line height +$base-line-height: 1.5; +$header-line-height: 1.25; + +// Other Sizes +$base-border-radius: 3px; +$base-spacing: $base-line-height * 1em; +$base-z-index: 0; + +// Colors +$blue: #477DCA; +$dark-gray: #333; +$medium-gray: #999; +$light-gray: #DDD; +$light-red: #FBE3E4; +$light-yellow: #FFF6BF; +$light-green: #E6EFC2; + +// Background Color +$base-background-color: white; + +// Font Colors +$base-font-color: $dark-gray; +$base-accent-color: $blue; + +// Link Colors +$base-link-color: $base-accent-color; +$hover-link-color: darken($base-accent-color, 15); +$base-button-color: $base-link-color; +$hover-button-color: $hover-link-color; + +// Flash Colors +$alert-color: $light-yellow; +$error-color: $light-red; +$notice-color: lighten($base-accent-color, 40); +$success-color: $light-green; + +// Border color +$base-border-color: $light-gray; +$base-border: 1px solid $base-border-color; + +// Forms +$form-border-color: $base-border-color; +$form-border-color-hover: darken($base-border-color, 10); +$form-border-color-focus: $base-accent-color; +$form-border-radius: $base-border-radius; +$form-box-shadow: inset 0 1px 3px rgba(black,0.06); +$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7); +$form-font-size: $base-font-size; +//$form-font-family: $base-font-family; \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/mixins/_alerts.scss b/Resources/assets/scratch-css/stylesheets/sass/mixins/_alerts.scss new file mode 100644 index 000000000..d7d4d62ab --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/mixins/_alerts.scss @@ -0,0 +1,7 @@ +@mixin alert($color) { + background: transparentize($color,0.8); + color: $color; + font-weight: bold; + margin-bottom: 0.75em; + padding: 0.75em; +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/mixins/_buttons.scss b/Resources/assets/scratch-css/stylesheets/sass/mixins/_buttons.scss new file mode 100644 index 000000000..7829dfa7f --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/mixins/_buttons.scss @@ -0,0 +1,33 @@ +@mixin button($button-background-color, $button-text-color) { + color: $button-text-color; + background: $button-background-color; + border: medium none; + box-shadow: none; + padding: $button-padding; + text-decoration: none; + text-align: center; + display: inline-block; + vertical-align: middle; + white-space: nowrap; + line-height: normal; + border-radius: 2px; + + &:hover, + &:active { + background: darken($button-background-color, 5%); + color: $button-text-color; // force text color for anchor tags + text-decoration: none; // remove underline on anchor tags + } + + &:focus { + background: darken($button-background-color, 5%); + } + + &[disabled] { + background: transparentize($button-background-color,0.4); + color: darken($button-background-color, 10%); + &:hover { + box-shadow: none; + } + } +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_alerts.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_alerts.scss new file mode 100644 index 000000000..03ed6b5cd --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_alerts.scss @@ -0,0 +1,15 @@ +.success { + @include alert($green); +} + +.error { + @include alert($red); +} + +.alert { + @include alert($orange); +} + +.notice { + @include alert($blue); +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_buttons.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_buttons.scss new file mode 100644 index 000000000..7c021f5e9 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_buttons.scss @@ -0,0 +1,10 @@ +.button { + @include button($grey-15, $button-text-color); + + &.blue { @include button($blue, $white); } + &.green { @include button($green, $white); } + &.orange { @include button($orange, $white); } + &.red { @include button($red, $white); } + &.black { @include button($grey-90, $white); } + &.white { @include button($white, $text-color); } +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_footer.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_footer.scss new file mode 100644 index 000000000..be1755125 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_footer.scss @@ -0,0 +1,69 @@ +.footer { + $footer-background: desaturate(darken($base-accent-color, 20), 30); + $footer-color: white; + $footer-link-color: transparentize($footer-color, .6); + $footer-disclaimer-color: transparentize($footer-color, .6); + + background: $footer-background; + //padding: $base-spacing*2 $gutter; + width: 100%; + + .footer-logo { + text-align: center; + margin-bottom: 2em; + + img { + height: 3em; + } + } + + .footer-links { + @include gridle_clear(both); + + margin-bottom: $base-spacing; + @include gridle(8); + @include gridle_centered(); + } + + ul { + margin-bottom: $base-spacing*2; + @include gridle (4); + list-style-type: none; + } + + li { + text-align: center; + } + + li a { + color: $footer-link-color; + + &:hover { + color: transparentize($footer-color, 0); + } + } + + li h3 { + color: $footer-color; + font-size: 1em; + font-weight: 800; + margin-bottom: .4em; + } + + hr { + @include gridle_clear(both); + border: 1px solid transparentize($footer-disclaimer-color, .3); + margin: 0 auto $base-spacing; + width: 12em; + } + + p { + @include gridle_clear(both); + color: $footer-disclaimer-color; + font-size: .9em; + line-height: 1.5em; + margin: auto; + max-width: 35em; + text-align: center; + } +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_forms.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_forms.scss new file mode 100644 index 000000000..cdfb7b0ae --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_forms.scss @@ -0,0 +1,122 @@ +fieldset { + border: none; + margin: 0 0 ($base-spacing / 2) 0; + padding: $base-spacing; +} + +input,label, select { + display: block; + /* font-family: $form-font-family; + font-size: $form-font-size; */ +} + +label { + font-weight: bold; + margin-bottom: $base-spacing / 4; + + &.required:after { + content: "*"; + } + + abbr { + display: none; + } +} + +textarea, +//input, +#{$all-text-inputs}, +select[multiple=multiple] { + //@include box-sizing(border-box); + //@include transition(border-color); + background-color: white; + border-radius: $form-border-radius; + border: 1px solid $form-border-color; + box-shadow: none; + //box-shadow: $form-box-shadow; + /*font-family: $form-font-family; + font-size: $form-font-size; */ + margin-bottom: $base-spacing / 2; + padding: ($base-spacing / 3) ($base-spacing / 3); + width: 100%; + + &:hover { + border-color: $form-border-color-hover; + } + + &:focus { + border-color: $form-border-color-focus; + box-shadow: $form-box-shadow-focus; + outline: none; + } +} + +textarea { + resize: vertical; +} + +input[type="search"] { + //@include appearance(none); +} + +input[type="checkbox"], +input[type="radio"] { + display: inline; + margin-right: $base-spacing / 4; +} + +input[type="file"] { + padding-bottom: $base-spacing / 2; + width: 100%; +} + +select { + margin-bottom: $base-spacing; + max-width: 100%; + width: auto; +} + +form { + p { + &.tip { + font-size: .875em; + position: relative; + text-align: center; + margin-top: -.3em; + } + + &.label { + padding: 0; + //margin: 0; + //color: $text-color; + white-space: normal; + } + } + + fieldset { + border: none; + margin-bottom: 1.5em; + padding: 0; + margin: 0; + + legend { + font-size: 1.438em; + font-weight: 700; + width: 100%; + border-bottom:1px solid #ddd; + + & + * { + -webkit-margin-top-collapse: separate; // webkit hack that makes the legend margins work like they should + margin: 2em 0; + } + } + } + + li { + label { + display: inline-block; + font-weight: normal; + } + } +} + diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_navigation.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_navigation.scss new file mode 100644 index 000000000..67d78ab74 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_navigation.scss @@ -0,0 +1,492 @@ +header.navigation { + $navigation-padding: 1em; + $navigation-background: $dark-gray; + $navigation-color: transparentize(white, 0.3); + $navigation-color-hover: white; + $navigation-height: 60px; + //$navigation-nav-button-background: $base-accent-color; + //$navigation-nav-button-background-hover: lighten($navigation-background, 10); + //$navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20); + //$navigation-search-background: lighten($navigation-background, 5); + //$navigation-search-border: 1px solid darken($navigation-background, 5); + $navigation-active-link-color: transparentize(white, 0.5); + $navigation-submenu-padding: 1em; + $navigation-submenu-width: 12em; + //$horizontal-bar-mode: $large-screen; + + background-color: $navigation-background; + border-bottom: 1px solid darken($navigation-background, 10); + height: $navigation-height; + //width: 100%; + z-index: 999; + + // Nav menu + + .nav { + z-index: 9999999; + //float: none; + } + + ul#navigation-menu { + -webkit-transform-style: preserve-3d; // stop webkit flicker + clear: both; + display: none; + margin: 0 auto; + overflow: visible; + padding: 0; + width: 100%; + z-index: 9999; + + + //@include media ($horizontal-bar-mode) { + display: inline; + margin: 0; + padding: 0; + //} + } + + // The nav items + + ul li.nav-link { + background: $navigation-background; + display: block; + line-height: $navigation-height; + overflow: hidden; + padding-right: .8em; + text-align: right; + width: 100%; + z-index: 9999; + + // @include media ($horizontal-bar-mode) { + background: transparent; + display: inline; + line-height: $navigation-height; + text-decoration: none; + width: auto; + // } + + a { + color: $navigation-color; + display: inline-block; + font-weight: 400; + + //@include media ($horizontal-bar-mode) { + padding-right: 1em; + //} + + &:hover { + color: $navigation-color-hover; + } + } + } + + .active-nav-item a { + border-bottom: 1px solid $navigation-active-link-color; + padding-bottom: 3px; + } + + // Sub menus + + li.more.nav-link { + padding-right: 0; + + // @include media($large-screen) { + padding-right: $navigation-submenu-padding; + // } + + > ul > li:first-child a { + padding-top: 1em; + } + + a { + margin-right: $navigation-submenu-padding; + } + + > a { + padding-right: 0.6em; + } + + > a:after { + @include position(absolute, auto -.4em auto auto); + content: '\25BE'; + color: $navigation-color; + } + } + + li.more { + overflow: visible; + padding-right: 0; + + a { + padding-right: .8em; + } + + > a { + padding-right: 1.6em; + position: relative; + + //@include media($large-screen) { + margin-right: $navigation-submenu-padding; + //} + + &:after { + content: '›'; + font-size: 1.2em; + position: absolute; + right: $navigation-submenu-padding / 2; + } + } + + &:hover > .submenu { + display: block; + } + + //@include media($horizontal-bar-mode) { + padding-right: .8em; + position: relative; + //} + } + + ul.submenu { + display: none; + padding-left: 0; + + //@include media($horizontal-bar-mode) { + left: -$navigation-submenu-padding; + position: absolute; + top: 1.5em; + //} + + .submenu { + //@include media($horizontal-bar-mode) { + left: $navigation-submenu-width - .2em; + top: 0; + //} + } + + li { + display: block; + padding-right: 0; + + //@include media($horizontal-bar-mode) { + line-height: $navigation-height / 1.3; + + &:first-child > a { + border-top-left-radius: $base-border-radius; + border-top-right-radius: $base-border-radius; + } + + &:last-child > a { + border-bottom-left-radius: $base-border-radius; + border-bottom-right-radius: $base-border-radius; + padding-bottom: .7em; + } + //} + + a { + background-color: darken($navigation-background, 3); + display: inline-block; + text-align: right; + width: 100%; + + //@include media($horizontal-bar-mode) { + background-color: $navigation-background; + padding-left: $navigation-submenu-padding; + text-align: left; + //width: $navigation-submenu-width; + //} + } + } + } + + // Elements on the far right + + .navigation-search { + padding: .85em .6em; + position: relative; + + input[type=search] { + //background: $navigation-search-background; + //border: $navigation-search-border; + padding: .6em .8em; + padding-right: 3.5em; + width: calc(100% - 4.5em); + //padding: .6em .8em; + //padding: 0 30px 0 10px; + font-size: .9em; + font-style: italic; + //color: $navigation-color; + //border-radius: $base-border-radius * 2; + margin: 0; + } + + button { + padding: 7px 12px; + position: absolute; + top: .9em; + right: 1em; + } + } +} +/* + + a.sign-up { + margin-top: 1.2em; + float: right; + @include transition (all 0.2s ease-in-out); + display: inline; + background: $navigation-nav-button-background; + border-radius: $base-border-radius; + color: white; + font-size: .8em; + font-weight: 800; + text-transform: uppercase; + padding: .4em .5em; + + @include media($large-screen) { + padding: .5em 1em; + } + + &:hover { + background: lighten($navigation-nav-button-background, 10); + } + } + + // Search bar + + .search-bar { + $search-bar-border-color: $base-border-color; + $search-bar-border: 1px solid $search-bar-border-color; + $search-bar-background: lighten($search-bar-border-color, 10); + + padding: .85em .6em; + float: left; + .search-and-submit { + position: relative; + + input[type=search] { + background: $navigation-search-background; + border: $navigation-search-border; + padding: .6em .8em; + font-size: .9em; + font-style: italic; + color: $navigation-color; + border-radius: $base-border-radius * 2; + margin: 0; + + @include media($large-screen) { + width: 100%; + } + } + + button[type=submit] { + @include button(simple, lighten($navigation-search-background, 10)); + position: absolute; + top: 0.3em; + right: 0.3em; + bottom: 0.3em; + left: auto; + outline: none; + padding: 0 15px; + + img { + height: 12px; + opacity: .7; + } + } + } + + @include media($horizontal-bar-mode) { + width: 16em; + position: relative; + display: inline-block; + + input { + @include box-sizing(border-box); + display: block; + } + } + } +} + + + + + + + + + $base-border-radius: 3px; + background-color: $navigation-background; + + .nav { + background-color: $navigation-background; + z-index: 9999999; + } + + ul#navigation-menu { + clear: both; + overflow: visible; + width: 100%; + z-index: 9999; + margin: 0; + padding: 0; + padding-left: 1em; + padding-right: 1em; + + display: inline; + } + + ul li.nav-link { + background: $navigation-background; + display: block; + line-height: $navigation-height; + overflow: hidden; + padding-right: .8em; + text-align: right; + width: 100%; + z-index: 9999; + background: transparent; + display: inline; + line-height: $navigation-height; + text-decoration: none; + + a { + color: $navigation-color; + display: inline-block; + font-weight: 400; + padding-right: 1em; + + &:hover { + color: $navigation-color-hover; + } + } + } + + + // Sub menus + + li.more.nav-link { + padding-right: 0; + padding-right: $navigation-submenu-padding; + + > ul > li:first-child a { + padding-top: 1em; + } + + a { + margin-right: $navigation-submenu-padding; + } + + > a { + padding-right: 0.6em; + } + + > a:after { + @include position(absolute, auto -.4em auto auto); + content: '\25BE'; + color: $navigation-color; + } + } + + li.more { + overflow: visible; + padding-right: 0; + + a { + padding-right: .8em; + } + + > a { + margin-right: $navigation-submenu-padding; + position: relative; + + + &:after { + content: '›'; + font-size: 1.2em; + position: absolute; + right: $navigation-submenu-padding / 2; + } + } + + &:hover > .submenu { + display: block; + } + + padding-right: .8em; + position: relative; + } + + ul.submenu { + display: none; + padding-left: 0; + right: 0em; + //left: -$navigation-submenu-padding; + position: absolute; + top: 1.5em; + //background-color: $navigation-background; + background-color: #111; + + li { + display: block; + padding-right: 0; + line-height: $navigation-height / 1.5; + + &:first-child > a { + border-top-left-radius: $base-border-radius; + border-top-right-radius: $base-border-radius; + } + + &:last-child > a { + border-bottom-left-radius: $base-border-radius; + border-bottom-right-radius: $base-border-radius; + padding-bottom: .7em; + } + + a { + //margin-left: 2em; + box-sizing: content-box; + display: inline-block; + //max-width: 100% + width: 100%; + //background-color: $navigation-background; + background-color: #111; + //padding-left: $navigation-submenu-padding; + text-align: left; + //width: $navigation-submenu-width; + } + + a:hover { + background-color: #222; + } + } + } + + .navigation-search { + padding: .85em .6em; + position: relative; + + input[type=search] { + //background: $navigation-search-background; + //border: $navigation-search-border; + padding: .6em .8em; + padding-right: 3.5em; + width: calc(100% - 4.5em); + //padding: .6em .8em; + //padding: 0 30px 0 10px; + font-size: .9em; + font-style: italic; + //color: $navigation-color; + //border-radius: $base-border-radius * 2; + margin: 0; + } + + button { + padding: 7px 12px; + position: absolute; + top: .9em; + right: 1em; + } + } +}*/ \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/modules/_typography.scss b/Resources/assets/scratch-css/stylesheets/sass/modules/_typography.scss new file mode 100644 index 000000000..8d70b18d3 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/modules/_typography.scss @@ -0,0 +1,10 @@ +ul { + &.unstyled { + list-style: none; + padding-left: 0em; + + ul { + list-style:disc outside; + } + } +} \ No newline at end of file diff --git a/Resources/assets/scratch-css/stylesheets/sass/scratch.scss b/Resources/assets/scratch-css/stylesheets/sass/scratch.scss new file mode 100644 index 000000000..0121af843 --- /dev/null +++ b/Resources/assets/scratch-css/stylesheets/sass/scratch.scss @@ -0,0 +1,46 @@ +@import "contrib/normalize/normalize"; +@import "contrib/fontawesome/font-awesome"; +@import "contrib/bourbon/bourbon"; + +@import "config/variables"; +@import "config/colors"; +@import "config/buttons"; + +/* etrange pour les forms */ + +*, *:before, *:after { + box-sizing: inherit; +} + +@import "mixins/buttons"; +@import "mixins/alerts"; + +@import "contrib/gridle/gridle/gridle"; + +@include gridle_setup( ( + context : 12, + gutter-width : 20px, + //direction: ltr, + /* + direction : rtl, + // etc... + */ +) ); + +@include gridle_generate_classes(); + +@import "modules/typography"; +@import "modules/navigation"; + +a { + text-decoration: none; +} + +.text-right { + text-align: right; +} + +@import "modules/footer"; +@import "modules/alerts"; +@import "modules/forms"; +@import "modules/buttons"; \ No newline at end of file