[enh] Move artichaut framework into ynh-style.css file.

This commit is contained in:
opi 2014-11-13 17:43:04 +01:00
parent 7d0c71ef80
commit af65559ef1
6 changed files with 197 additions and 482 deletions

View file

@ -1,83 +0,0 @@
/* ==========================================================================
Sommaire
1 = Default button
2 = Important button
3 = Validate button
4 = Warning button
5 = Classic button
========================================================================== */
/* ==========================================================================
1 = Default button
========================================================================== */
.btn {
background: #999;
display: inline-block;
padding: 0.5em 1em;
line-height: normal;
text-decoration: none;
color: #FFF;
}
.large-btn {
padding: 0.8em 1.5em;
font-size: 1.1em;
}
button.btn,
input.btn {
border:0;
cursor:pointer;
}
.btn:hover,
.btn:focus {
background: #AAA;
}
/* ==========================================================================
2 = Important button
========================================================================== */
.important-btn { background: #c0392b;
}
.important-btn:hover,
.important-btn:focus {
background: #e74c3c;
}
/* ==========================================================================
3 = Validate button
========================================================================== */
.validate-btn { background: #27ae60;
}
.validate-btn:hover,
.validate-btn:focus {
background: #2ecc71;
}
/* ==========================================================================
3 = Warning button
========================================================================== */
.warning-btn { background: #e67e22;
}
.warning-btn:hover,
.warning-btn:focus {
background: #f39c12;
}
/* ==========================================================================
5 = Classic button
========================================================================== */
.classic-btn { background: #2980b9;
}
.classic-btn:hover,
.classic-btn:focus {
background: #3498db;
}

View file

@ -1,87 +0,0 @@
/* ==========================================================================
Sommaire
1 = col
2 = Sidebar Left
3 = Sidebar Right
4 = Col 2
5 = Col 3
6 = Col 4
========================================================================== */
.col {
letter-spacing: -5px; /*fix bug ff PC*/
}
.col > * {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.colMarge > * {
margin-left: 1%;
}
.colNomarge > * {
margin-left: 0;
}
/* ==========================================================================
2 = Sidebar left
========================================================================== */
.colSidebarLeft > *:first-child {
width:31%;
margin-left:0;
}
.colSidebarLeft > *:first-child + * { width:68%; }
/* ==========================================================================
3 = Sidebar right
========================================================================== */
.colSidebarRight > *:first-child {
width:68%;
margin-left:0;
}
.colSidebarRight > *:first-child + * { width:31%; }
/* ==========================================================================
4 = col 2
========================================================================== */
.col2 > * {
width: 49.5%!important;
margin-bottom: 1%;
}
.col2 > *:nth-child(2n+1) {
margin-left: 0;
}
/* ==========================================================================
5 = col 3
========================================================================== */
.col3 > * {
width: 32.65%;
margin-bottom: 1%;
}
.col3 > *:nth-child(3n+1) {
margin-left: 0;
}
/* ==========================================================================
6 = col 4
========================================================================== */
.col4 > * {
width: 24.25%;
margin-bottom: 1%;
}
.col4 > *:nth-child(4n+1) {
margin-left: 0;
}

View file

@ -1,15 +0,0 @@
/* ==========================================================================
Sommaire
1 = Messages
========================================================================== */
.messages {
color: #FFF;
margin-bottom: 1em;
}
.danger { background: #c0392b; }
.warning { background: #e67e22; }
.success { background: #27ae60; }
.info { background: #2980b9; }

View file

@ -1,265 +0,0 @@
/*
Ratatouille mini Framework css by Thomas LEBEAU
Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
and normalize.css
*/
/* ==========================================================================
Sommaire
1 = Mise en Forme
2 = Mise en Page
3 = Internet Explorer
========================================================================== */
/* ==========================================================================
1 = Mise en forme
========================================================================== */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
font-size: 1em;
line-height:1.5;
margin: 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child{
margin-top: 0;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
}
pre {
white-space: pre-wrap;
}
.upper {
text-transform: uppercase;
}
.bold {
font-weight: bold;
}
.inner {
margin: 0 auto;
max-width: 61.25em;/*980px*/
}
table, img {
max-width: 100%;
height :auto;
}
iframe {
max-width: 100%;
}
.fl {
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
}
figure {
margin: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
select{
-webkit-appearance: none;
border-radius: 0;
}
}
/* ==========================================================================
2 = Mise en page
========================================================================== */
.ul-reset {
margin: 0;
padding: 0;
}
.ul-reset li {
list-style: none;
}
.dib {
display: inline-block;
vertical-align: middle;
}
.dblock { display: block; }
.dnone { display: none; }
.dtable { display:table }
.dtable > * { display:table-row; }
.dtable > * > * { display:table-cell; }
.element-invisible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.x-text-small { font-size:x-small; }
.text-small { font-size:small; }
.text-large { font-size:large; }
.x-text-large { font-size:x-large; }
/*Width*/
.w100 { width:100%; }
.w90 { width:90%; }
.w80 { width:80%; }
.w70 { width:70%; }
.w60 { width:60%; }
.w50 { width:50%; }
.w40 { width:40%; }
.w30 { width:30%; }
.w20 { width:20%; }
.w10 { width:10%; }
h1,
.h1 {
font-size: 2.5em;
}
h2,
.h2 {
font-size: 1.8em;
}
h3,
.h3 {
font-size: 1.4em;
}
h4,
.h4 {
font-size: 1.2em;
}
h5,
.h5 {
font-size: 1em;
}
h6,
.h6 {
font-size: 0.8em;
}
/*Table*/
table {
color: #999;
min-width: 100%;
text-align: left;
}
table thead {
background: #CCC;
}
table td, table th {
padding: 0.5em;
color: #333;
border-color: #999;
}
.box {
padding: 1.5em;
}
/* ==========================================================================
Internet Explorer
========================================================================== */
/*IE8 and IE9*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*IE8 and IE9*/
audio,
canvas,
video {
display: inline-block;
}

View file

@ -1,44 +1,110 @@
/* ========================================================================== /* ==========================================================================
Sommaire
1 = Global 1 = Global
2 = Apps 2 = Apps
3 = User 3 = User
4 = Form 4 = Form
5 = Footer 5 = Footer
6 = Colors 6 = Colors
7 = Internet Explorer
========================================================================== */ ========================================================================== */
/* ========================================================================== /* ==========================================================================
1 = Global 1 = Global
========================================================================== */ ========================================================================== */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body { body {
background: #41444f; background: #41444f;
font-family: 'source_sans_proregular'; font-family: 'source_sans_proregular';
overflow-y: scroll; overflow-y: scroll;
font-size: 1em;
line-height:1.5;
margin: 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child{
margin-top: 0;
}
/* Responsive image */
img {
max-width: 100%;
height :auto;
}
.element-invisible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
} }
/* Layout */ /* Layout */
.overlay { .overlay {
padding: 2%; padding: 2%;
} }
.inner {
max-width: 50em;
margin: auto;
}
.wrapper { .wrapper {
width: 90%; width: 90%;
margin: 2% 5%; margin: 2% 5%;
z-index: 10; position: relative;
z-index: 1;
} }
.wrapper:before, .wrapper:before,
.wrapper:after {content: " ";display: table;} .wrapper:after {content: " ";display: table;}
.wrapper:after {clear: both;} .wrapper:after {clear: both;}
.col {
letter-spacing: -5px; /*fix bug ff PC*/
}
.col > * {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.colMarge > * {
margin-left: 1%;
}
.colNomarge > * {
margin-left: 0;
}
/* Logo */
.logo { .logo {
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
@ -68,17 +134,20 @@ body {
display: none; display: none;
} }
.wrapper {
position: relative;
z-index: 1;
}
/* messages */
.messages { .messages {
color: #FFF;
margin-bottom: 1em;
text-align: center; text-align: center;
max-width: 21em; max-width: 21em;
margin: 2% auto 1em auto; margin: 2% auto 1em auto;
padding: 1.5em; padding: 1.5em;
} }
.messages.danger { background: #c0392b; }
.messages.warning { background: #e67e22; }
.messages.success { background: #27ae60; }
.messages.info { background: #2980b9; }
.logged .messages { .logged .messages {
max-width: none; max-width: none;
@ -101,6 +170,17 @@ h6 {
font-weight: normal; font-weight: normal;
} }
/* headings */
h1,
.h1 {
font-size: 2.5em;
}
h2,
.h2 {
font-size: 1.8em;
}
.cwhite { .cwhite {
color: #fff; color: #fff;
} }
@ -162,7 +242,13 @@ textarea {
content: attr(data-first-letter); content: attr(data-first-letter);
} }
.listing-apps {
margin: 0;
padding: 0;
}
.listing-apps li { .listing-apps li {
list-style: none;
margin: 0 0 1em 1em; margin: 0 0 1em 1em;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4),
-2px -2px 3px 0 rgba(0, 0, 0, 0.7) inset; -2px -2px 3px 0 rgba(0, 0, 0, 0.7) inset;
@ -394,7 +480,18 @@ textarea {
4 = Forms 4 = Forms
========================================================================== */ ========================================================================== */
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
}
[type="submit"], [type="submit"],
[type="password"], [type="password"],
[type="email"], [type="email"],
@ -404,11 +501,17 @@ textarea {
-webkit-border-radius:0; -webkit-border-radius:0;
} }
/* Extend artichaut-buttons.css */ input::-moz-focus-inner {
.link-btn { background: none;} border: 0;
.link-btn:hover, padding: 0;
.link-btn:focus {background: #41444f;text-decoration: underline;} }
@media screen and (-webkit-min-device-pixel-ratio:0){
select{
-webkit-appearance: none;
border-radius: 0;
}
}
.form-text { .form-text {
padding: 0.8em; padding: 0.8em;
@ -452,17 +555,6 @@ label + .help-link {
} }
label + .help-link:hover {background: #30333b;} label + .help-link:hover {background: #30333b;}
.btn {
cursor: pointer;
transition: all 0.1s ease;
-webkit-transition: all 0.1s ease;
}
.btn-group {
margin: 4em 0;
text-align: right;
}
.form-group { .form-group {
background: none; background: none;
margin-bottom: 2em; margin-bottom: 2em;
@ -505,6 +597,63 @@ input:disabled {
.form-group .btn {padding: 0.5em 0.8em;} .form-group .btn {padding: 0.5em 0.8em;}
} }
/* Buttons */
.btn {
background: #999;
display: inline-block;
padding: 0.5em 1em;
line-height: normal;
text-decoration: none;
color: #FFF;
cursor: pointer;
transition: all 0.1s ease;
-webkit-transition: all 0.1s ease;
}
.large-btn {
padding: 0.8em 1.5em;
font-size: 1.1em;
}
button.btn,
input.btn {
border:0;
cursor:pointer;
}
.btn:hover,
.btn:focus {
background: #AAA;
}
.important-btn { background: #c0392b;}
.important-btn:hover,
.important-btn:focus {background: #e74c3c;}
.validate-btn { background: #27ae60;}
.validate-btn:hover,
.validate-btn:focus {background: #2ecc71;}
.warning-btn { background: #e67e22;}
.warning-btn:hover,
.warning-btn:focus {background: #f39c12;}
.classic-btn { background: #2980b9;}
.classic-btn:hover,
.classic-btn:focus {background: #3498db;}
.link-btn { background: none;}
.link-btn:hover,
.link-btn:focus {background: #41444f;text-decoration: underline;}
.btn-group {
margin: 4em 0;
text-align: right;
}
/* Login form */ /* Login form */
.login-form { .login-form {
@ -624,7 +773,7 @@ input:disabled {
6 = Colors 6 = Colors
========================================================================== */ ========================================================================== */
.listing-apps .purplebg { .purplebg {
background: #9B59B6!important; background: #9B59B6!important;
} }
.purplebg:hover:after, .purplebg:hover:after,
@ -753,3 +902,23 @@ input:disabled {
/* ==========================================================================
Internet Explorer
========================================================================== */
/*IE8 and IE9*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}

View file

@ -12,10 +12,6 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/artichaut.css">
<link rel="stylesheet" href="assets/css/artichaut-col.css">
<link rel="stylesheet" href="assets/css/artichaut-messages.css">
<link rel="stylesheet" href="assets/css/artichaut-buttons.css">
<link rel="stylesheet" href="assets/css/fonts.css"> <link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/ynh-style.css"> <link rel="stylesheet" href="assets/css/ynh-style.css">