mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
style: create layout - intermediate stage
This commit is contained in:
parent
ca1160bb87
commit
a5afdc6400
@ -12,7 +12,7 @@ Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{exten
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
css_dir = "./../../public/css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "img"
|
||||
|
||||
|
||||
@ -1 +1,16 @@
|
||||
// Your custom SCSS should be written here...
|
||||
$font-family-title: "Merriweather Sans";
|
||||
$font-weight-title: $font-weight-semibold;
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: $font-family-title;
|
||||
font-weight: $font-weight-title;
|
||||
}
|
||||
|
||||
//correct entypo
|
||||
@font-face { font-family: "entypo"; font-style: normal; font-weight: 400;
|
||||
src: url('./../../fonts/icons/entypo.eot');
|
||||
src: url("../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"),
|
||||
url("./../../fonts/icons/entypo.woff") format("woff"),
|
||||
url("./../../fonts/icons/entypo.ttf") format("truetype");
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
/* Fonts */
|
||||
|
||||
// Import Google Web Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
|
||||
//@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
|
||||
|
||||
|
||||
// Set local icon font
|
||||
|
||||
6
Resources/assets/gumpy/sass/_nav.scss
Normal file
6
Resources/assets/gumpy/sass/_nav.scss
Normal file
@ -0,0 +1,6 @@
|
||||
nav.inline-nav {
|
||||
ul, ol {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
3
Resources/assets/gumpy/sass/chillmain.scss
Normal file
3
Resources/assets/gumpy/sass/chillmain.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "_nav.scss";
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ $max-device-width: 2880px; // Max Document Size
|
||||
$nav-distance: 0; // Navigation distance from the top of the viewport
|
||||
|
||||
// Typography
|
||||
$font-family: "Open Sans";
|
||||
$font-family: "Oxygen";
|
||||
$font-style-italic: italic;
|
||||
$icons: entypo;
|
||||
$font-smoothing: antialiased;
|
||||
|
||||
1
Resources/public/css/chillmain.css
Normal file
1
Resources/public/css/chillmain.css
Normal file
@ -0,0 +1 @@
|
||||
nav.inline-nav ul, nav.inline-nav ol { display: inline-block; list-style-type: none; }
|
||||
@ -1,5 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
|
||||
/**
|
||||
* Gumby Framework
|
||||
* ---------------
|
||||
@ -44,7 +43,7 @@ html { font-size: 16px; line-height: 1.625em; }
|
||||
|
||||
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
|
||||
body { background: white; font-family: "Open Sans"; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; }
|
||||
body { background: white; font-family: "Oxygen"; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; }
|
||||
@media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; } }
|
||||
|
||||
html, body { height: 100%; }
|
||||
@ -1204,7 +1203,7 @@ i.icon-logo-db:before { content: "\f603"; height: inherit; }
|
||||
/* Fonts */
|
||||
@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; }
|
||||
h1, h2, h3, h4, h5, h6 { font-family: "Oxygen"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #d04526; }
|
||||
|
||||
@media only screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { word-wrap: break-word; } }
|
||||
@ -1228,7 +1227,7 @@ h6 { font-size: 16px; font-size: 1rem; }
|
||||
.subhead { color: #777; font-weight: normal; margin-bottom: 20px; }
|
||||
|
||||
/*===================================================== Links & Paragraph styles ======================================================*/
|
||||
p { font-family: "Open Sans"; font-weight: 400; font-size: 16px; font-size: 1rem; margin-bottom: 13px; line-height: 1.625em; }
|
||||
p { font-family: "Oxygen"; font-weight: 400; font-size: 16px; font-size: 1rem; margin-bottom: 13px; line-height: 1.625em; }
|
||||
p.lead { font-size: 20px; font-size: 1.25rem; margin-bottom: 18px; }
|
||||
@media only screen and (max-width: 768px) { p { font-size: 17.6px; font-size: 1.1rem; line-height: 1.625em; } }
|
||||
|
||||
@ -2263,7 +2262,7 @@ img { -ms-interpolation-mode: bicubic; }
|
||||
.subnav li.active a, .subnav dd.active a { background: #4a4d50; padding: 5px 9px; text-shadow: 0 1px 1px #4a4d50; }
|
||||
|
||||
/* Buttons */
|
||||
.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 600; padding: 0 !important; text-align: center; }
|
||||
.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Oxygen"; font-weight: 600; padding: 0 !important; text-align: center; }
|
||||
.btn > a, .btn input, .btn button, .skiplink > a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: white; height: 100%; }
|
||||
.btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; width: 100%; font-size: 100%; cursor: pointer; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
|
||||
|
||||
@ -2372,7 +2371,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
|
||||
.field { position: relative; max-width: 100%; margin-bottom: 10px; vertical-align: middle; font-size: 16px; overflow: hidden; /* remove inline-block white-space — A 0px font-size = 0px of white space */ }
|
||||
.field.metro, .field .metro { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
|
||||
.field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Oxygen"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.field .input { position: relative; padding: 0 10px; background: #fff; border: 1px solid #d8d8d8; height: 36px; line-height: 34px; font-size: 16px; font-size: 1rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
|
||||
.field .input.search { height: 36px; line-height: 34px; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; padding-right: 0; }
|
||||
.field .input.textarea { height: auto; }
|
||||
@ -2397,7 +2396,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
.field.prepend.append input:last-child { margin-left: -1px; -webkit-border-radius: 0px 4px 4px 0; -moz-border-radius: 0px 4px 4px 0; -ms-border-radius: 0px 4px 4px 0; -o-border-radius: 0px 4px 4px 0; border-radius: 0px 4px 4px 0; }
|
||||
.field.prepend .adjoined, .field.append .adjoined, .field.prepend .btn, .field.append .btn { position: relative; display: inline-block; margin-bottom: 0; z-index: 99; }
|
||||
.field.prepend .btn a, .field.prepend .btn input, .field.prepend .btn button, .field.append .btn a, .field.append .btn input, .field.append .btn button { padding: 0 12px; }
|
||||
.field.prepend .adjoined, .field.append .adjoined { padding: 0 10px 0 10px; background: #f2f2f2; border: 1px solid #d8d8d8; font-family: "Open Sans"; font-weight: 600; color: #555555; font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; }
|
||||
.field.prepend .adjoined, .field.append .adjoined { padding: 0 10px 0 10px; background: #f2f2f2; border: 1px solid #d8d8d8; font-family: "Oxygen"; font-weight: 600; color: #555555; font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; }
|
||||
.field.prepend *:first-child { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -ms-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; }
|
||||
.field.prepend input:first-child { margin-right: 0; }
|
||||
.field.prepend .adjoined, .field.prepend .btn { margin-right: -1px; }
|
||||
@ -2459,7 +2458,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
.field .text input[type="search"] { -webkit-appearance: textfield; }
|
||||
|
||||
/* Form Picker Element (<select>) */
|
||||
.picker { position: relative; width: auto; display: inline-block; margin: 0 0 2px 1.2%; overflow: hidden; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-family: "Open Sans"; font-weight: 600; height: auto; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background-image: -webkit-linear-gradient(#ffffff, #f2f2f2); background-image: -moz-linear-gradient(#ffffff, #f2f2f2); background-image: -o-linear-gradient(#ffffff, #f2f2f2); background-image: linear-gradient(#ffffff, #f2f2f2); }
|
||||
.picker { position: relative; width: auto; display: inline-block; margin: 0 0 2px 1.2%; overflow: hidden; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-family: "Oxygen"; font-weight: 600; height: auto; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background-image: -webkit-linear-gradient(#ffffff, #f2f2f2); background-image: -moz-linear-gradient(#ffffff, #f2f2f2); background-image: -o-linear-gradient(#ffffff, #f2f2f2); background-image: linear-gradient(#ffffff, #f2f2f2); }
|
||||
.picker:after { content: "\25BE"; font-family: entypo; z-index: 0; position: absolute; right: 8%; top: 50%; margin-top: -12px; color: #555555; }
|
||||
.picker:first-child { margin-left: 0; }
|
||||
.picker select { position: relative; display: block; min-width: 100%; width: 135%; height: 34px; padding: 6px 45px 6px 15px; color: #555555; border: none; background: transparent; outline: none; -webkit-appearance: none; z-index: 99; cursor: pointer; font-size: 16px; font-size: 1rem; }
|
||||
@ -2486,7 +2485,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
|
||||
.label { padding: 0 10px; font-size: 12px; font-size: 0.75rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
|
||||
|
||||
.alert { padding: 0 10px; font-family: "Open Sans"; font-weight: 600; list-style-type: none; word-wrap: break-word; margin-bottom: 8px; font-size: 14px; font-size: 0.875rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
|
||||
.alert { padding: 0 10px; font-family: "Oxygen"; font-weight: 600; list-style-type: none; word-wrap: break-word; margin-bottom: 8px; font-size: 14px; font-size: 0.875rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
|
||||
.alert.primary { background: #85b7e7; border: 1px solid #3085d6; color: #1a5186; }
|
||||
.alert.secondary { background: #80cb92; border: 1px solid #42a35a; color: #255a32; }
|
||||
.alert.default { background: white; border: 1px solid #f2f2f2; color: #bfbfbf; color: #555555; border: 1px solid #f2f2f2; }
|
||||
@ -2501,7 +2500,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
.tab-nav { margin: 0; padding: 0; border-bottom: 1px solid #e5e5e5; }
|
||||
.tab-nav > li { display: inline-block; width: auto; padding: 0; margin: 0 2.12766% 0 0; cursor: default; top: 1px; -webkit-box-shadow: 0 1px 0 white; -moz-box-shadow: 0 1px 0 white; box-shadow: 0 1px 0 white; }
|
||||
.tab-nav > li > li { display: inline-block; width: auto; padding: 0; margin: 0 2.12766% 0 0; cursor: default; top: 1px; -webkit-box-shadow: 0 1px 0 white; -moz-box-shadow: 0 1px 0 white; box-shadow: 0 1px 0 white; }
|
||||
.tab-nav > li > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Open Sans"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
|
||||
.tab-nav > li > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Oxygen"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
|
||||
.tab-nav > li > li > a:hover { text-decoration: none; background: whitesmoke; }
|
||||
.tab-nav > li > li > a:active { background: #ededed; }
|
||||
.tab-nav > li > li.active > a { height: 43px; line-height: 41px; background: white; cursor: default; }
|
||||
@ -2509,7 +2508,7 @@ form fieldset legend { padding: 5px 10px; }
|
||||
|
||||
.tab-nav > li:last-child { margin-right: 0; }
|
||||
|
||||
.tab-nav > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Open Sans"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
|
||||
.tab-nav > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Oxygen"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
|
||||
.tab-nav > li > a:hover { text-decoration: none; background: whitesmoke; }
|
||||
.tab-nav > li > a:active { background: #ededed; }
|
||||
|
||||
@ -2584,3 +2583,7 @@ table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr
|
||||
.ie8 .ttip:hover:before, .ie8 .ttip:hover:after { display: block; }
|
||||
|
||||
.ie9 .radio.checked i, .ie9 .checkbox.checked i { top: 0; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-family: "Merriweather Sans"; font-weight: 600; }
|
||||
|
||||
@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url("./../../fonts/icons/entypo.eot"); src: url("../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("./../../fonts/icons/entypo.woff") format("woff"), url("./../../fonts/icons/entypo.ttf") format("truetype"); }
|
||||
BIN
Resources/public/fonts/icons/entypo.eot
Normal file
BIN
Resources/public/fonts/icons/entypo.eot
Normal file
Binary file not shown.
BIN
Resources/public/fonts/icons/entypo.ttf
Normal file
BIN
Resources/public/fonts/icons/entypo.ttf
Normal file
Binary file not shown.
BIN
Resources/public/fonts/icons/entypo.woff
Normal file
BIN
Resources/public/fonts/icons/entypo.woff
Normal file
Binary file not shown.
@ -1,8 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
{% stylesheets output="css/all.css"
|
||||
"@CLChillMainBundle/Resources/assets/gumpy/css/gumby.css" %}
|
||||
{% stylesheets output="css/all.css" filter="cssrewrite"
|
||||
"bundles/clchillmain/css/gumby.css"
|
||||
"bundles/clchillmain/css/chillmain.css" %}
|
||||
<link rel="stylesheet" href="{{ asset_url }}"/>
|
||||
{% endstylesheets %}
|
||||
|
||||
@ -10,10 +11,53 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{# class for multicolumn in gumpy #}
|
||||
<div class="row">
|
||||
<div class="twelve columns" >
|
||||
|
||||
<div id="header">
|
||||
<div id="header_nav_box" class="push_seven seven columns">
|
||||
<nav class="inline-nav">
|
||||
<ul>
|
||||
<li><i class="icon-users"></i></li>
|
||||
<li><i class="icon-export"></i></li>
|
||||
<li><i class="icon-gauge"></i></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
Bonjour {julien} - <a href="#">Se déconnecter <i class="icon-logout"></i></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="useful_bar">
|
||||
|
||||
<div class="six columns">
|
||||
<i class="user-add"></i>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="search">
|
||||
|
||||
<input type="search" name="person-search"
|
||||
class="xwide search input">
|
||||
<span class="adjoined ">s</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p> Hello ! </p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p> Hello ! </p>
|
||||
|
||||
<div class="medium primary btn">
|
||||
<a href="#">Primary</a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user