mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Deplacing scratch-css
This commit is contained in:
Marc Ducobu
parent
2da4e6c773
commit
9e8513087f
11
Resources/assets/scratch-css/.gitignore
vendored
11
Resources/assets/scratch-css/.gitignore
vendored
@ -1,11 +0,0 @@
|
|||||||
# MacOS
|
|
||||||
.DS_Store
|
|
||||||
|
|
||||||
.sass-cache/
|
|
||||||
bower_components/
|
|
||||||
fonts/
|
|
||||||
node_modules/
|
|
||||||
|
|
||||||
stylesheets/sass/contrib/
|
|
||||||
stylesheets/scratch.css
|
|
||||||
stylesheets/scratch.css.map
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
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']);
|
|
||||||
};
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
ScratchCSS
|
|
||||||
==========
|
|
||||||
|
|
||||||
Installation
|
|
||||||
------------
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
grunt
|
|
||||||
```
|
|
||||||
|
|
||||||
Developpement : autoupdate
|
|
||||||
--------------------------
|
|
||||||
|
|
||||||
```bash
|
|
||||||
grunt watch
|
|
||||||
```
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Scratch CSS Design",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"authors": [
|
|
||||||
"Marc Ducobu <marc@champs-libres.coop>",
|
|
||||||
"Julien Fastré <julien@champs-libres.coop>"
|
|
||||||
],
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,249 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<!-- <link rel="stylesheet" type="text/css" href="bower_components/Ink/dist/css/ink.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="bower_components/Ink/dist/css/ink-flex.css">
|
|
||||||
<script type="text/javascript" src="bower_components/Ink/dist/js/ink-all.js"></script> -->
|
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheets/scratch.css">
|
|
||||||
<title>Scratch</title>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header class="navigation container">
|
|
||||||
<div class="nav grid-2">
|
|
||||||
<ul id="navigation-menu">
|
|
||||||
<li class="nav-link title"><a href="javascript:void(0)">Scratch</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-4 navigation-search">
|
|
||||||
<!-- <div class="navigation-tools">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-and-submit"> -->
|
|
||||||
<input type="search" placeholder="Enter Search" />
|
|
||||||
<button class="button white border"><i class="fa fa-search"></i></button>
|
|
||||||
<!-- </div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav grid-6 text-right">
|
|
||||||
<ul id="navigation-menu">
|
|
||||||
<li class="nav-link more"><a href="javascript:void(0)">Sections</a>
|
|
||||||
<ul class="submenu">
|
|
||||||
<li><a href="javascript:void(0)">Person</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Report</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Admin</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Export</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-link more"><a href="javascript:void(0)">Marc Ducobu</a>
|
|
||||||
<ul class="submenu">
|
|
||||||
<li><a href="javascript:void(0)">Mon profil</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Se déconnecter Blop blop</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Aide</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-link more"><a href="javascript:void(0)">FR</a>
|
|
||||||
<ul class="submenu">
|
|
||||||
<li><a href="javascript:void(0)">FR</a></li>
|
|
||||||
<li><a href="javascript:void(0)">NL</a></li>
|
|
||||||
<li><a href="javascript:void(0)">EN</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<form action="" class="grid-6 centered">
|
|
||||||
<fieldset>
|
|
||||||
<div class="required">
|
|
||||||
<label for="first-name" class="grid-4">Name</label>
|
|
||||||
<div class="grid-4">
|
|
||||||
<input type="text" id="first-name">
|
|
||||||
<p class="tip">First Name</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid-4">
|
|
||||||
<input type="text" id="last-name">
|
|
||||||
<p class="tip">Last Name</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="email" class="grid-4">Email</label>
|
|
||||||
<div class="grid-8">
|
|
||||||
<input type="text" id="email">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<label for="area" class="grid-4">Description</label>
|
|
||||||
<div class="grid-8">
|
|
||||||
<textarea id="area"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="file-input" class="grid-4">File input</label>
|
|
||||||
<div class="grid-8">
|
|
||||||
<input type="file" name="" id="file-input">
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container" >
|
|
||||||
<form action="#">
|
|
||||||
<fieldset class="grid-4">
|
|
||||||
<legend>Fieldset title</legend>
|
|
||||||
|
|
||||||
<label for="name2">Name</label>
|
|
||||||
<input type="text" id="name2">
|
|
||||||
|
|
||||||
<label for="phone2">Phone</label>
|
|
||||||
<input type="text" id="phone2">
|
|
||||||
|
|
||||||
<label for="email2">Email</label>
|
|
||||||
<input type="text" id="email2">
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="grid-4">
|
|
||||||
<legend>Rock Bands</legend>
|
|
||||||
|
|
||||||
<p class="label">Please select one or more options</p>
|
|
||||||
|
|
||||||
<ul class="control unstyled">
|
|
||||||
<li><input type="checkbox" id="cb1" name="cb1" value=""><label for="cb1">Chimaira</label></li>
|
|
||||||
<li><input type="checkbox" id="cb2" name="cb2" value=""><label for="cb2">Metallica</label></li>
|
|
||||||
<li><input type="checkbox" id="cb3" name="cb3" value=""><label for="cb3">Motörhead</label></li>
|
|
||||||
<li><input type="checkbox" id="cb4" name="cb4" value=""><label for="cb4">Pantera</label></li>
|
|
||||||
<li><input type="checkbox" id="cb5" name="cb5" value=""><label for="cb5">Slayer</label></li>
|
|
||||||
<li><input type="checkbox" id="cb6" name="cb6" value=""><label for="cb6">Switchtense</label></li>
|
|
||||||
</ul>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="grid-4">
|
|
||||||
<legend>Pick a card</legend>
|
|
||||||
<p class="label">Please select one of these options</p>
|
|
||||||
<ul class="control unstyled">
|
|
||||||
<li><input type="radio" id="rb1" name="rb" value=""><label for="rb1">Ace of Spades</label></li>
|
|
||||||
<li><input type="radio" id="rb2" name="rb" value=""><label for="rb2">Queen of Diamonds</label></li>
|
|
||||||
<li><input type="radio" id="rb3" name="rb" value=""><label for="rb3">Queen of Spades</label></li>
|
|
||||||
<li><input type="radio" id="rb4" name="rb" value=""><label for="rb4">Jack of Hearts</label></li>
|
|
||||||
<li><input type="radio" id="rb5" name="rb" value=""><label for="rb5">King of Clubs</label></li>
|
|
||||||
<li><input type="radio" id="rb6" name="rb" value=""><label for="rb6">King of Diamonds</label></li>
|
|
||||||
</ul>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="grid-8 centered">
|
|
||||||
<input name="person" type="text" placeholder="Rechercher une personne">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-8 centered success">
|
|
||||||
<span>
|
|
||||||
This is a success message <a href="#">with a link</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-8 centered error">
|
|
||||||
<span>
|
|
||||||
This is a error message <a href="#">with a link</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-8 centered notice">
|
|
||||||
<span>
|
|
||||||
This is a notice message <a href="#">with a link</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-8 centered alert">
|
|
||||||
<span>
|
|
||||||
This is a alert message <a href="#">with a link</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="prefix-2 grid-1">
|
|
||||||
<a class="button" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button blue" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button green" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button orange" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button red" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button black" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<a class="button white" href="#">Button</a>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1 suffix-2">
|
|
||||||
<a class="button white" href="#"><i class="fa fa-futbol-o"></i> Button</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="prefix-2 grid-1">
|
|
||||||
<button class="button" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button blue" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button green" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button orange" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button red" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button black" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1">
|
|
||||||
<button class="button white" disabled="">Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid-1 suffix-2">
|
|
||||||
<button class="button white" disabled=""><i class="fa fa-camera-retro"></i> Button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="footer-links">
|
|
||||||
<ul>
|
|
||||||
<li><h3>Content</h3></li>
|
|
||||||
<li><a href="javascript:void(0)">About</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Contact</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Products</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h3>Follow Us</h3></li>
|
|
||||||
<li><a href="javascript:void(0)">Facebook</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Twitter</a></li>
|
|
||||||
<li><a href="javascript:void(0)">YouTube</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h3>Legal</h3></li>
|
|
||||||
<li><a href="javascript:void(0)">Terms and Conditions</a></li>
|
|
||||||
<li><a href="javascript:void(0)">Privacy Policy</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>License XXX</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"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": {}
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
// 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;
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
// 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;
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
// 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;
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
@mixin alert($color) {
|
|
||||||
background: transparentize($color,0.8);
|
|
||||||
color: $color;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.75em;
|
|
||||||
padding: 0.75em;
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
.success {
|
|
||||||
@include alert($green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
@include alert($red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
@include alert($orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.notice {
|
|
||||||
@include alert($blue);
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
.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); }
|
|
||||||
}
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,492 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
ul {
|
|
||||||
&.unstyled {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0em;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style:disc outside;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
@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";
|
|
||||||
Loading…
x
Reference in New Issue
Block a user