Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 08:03:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

Merge commit '53373c5e97869d3f9e7563c1fd0949c859e72222' as 'Resources/assets/scratch-css'

Browse Source
This commit is contained in:
Marc Ducobu
2014-11-05 09:33:33 +01:00
parent d9aa417e3c 53373c5e97
commit 3bb87009c3
18 changed files with 1352 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Resources/assets/scratch-css/stylesheets/sass/config/_buttons.scss Normal file
View File

@@ -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;

49
Resources/assets/scratch-css/stylesheets/sass/config/_colors.scss Normal file
View File

@@ -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;

65
Resources/assets/scratch-css/stylesheets/sass/config/_variables.scss Normal file
View File

@@ -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;

7
Resources/assets/scratch-css/stylesheets/sass/mixins/_alerts.scss Normal file
View File

@@ -0,0 +1,7 @@
@mixin alert($color) {
background: transparentize($color,0.8);
color: $color;
font-weight: bold;
margin-bottom: 0.75em;
padding: 0.75em;
}

33
Resources/assets/scratch-css/stylesheets/sass/mixins/_buttons.scss Normal file
View File

@@ -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;
}
}
}

15
Resources/assets/scratch-css/stylesheets/sass/modules/_alerts.scss Normal file
View File

@@ -0,0 +1,15 @@
.success {
@include alert($green);
}
.error {
@include alert($red);
}
.alert {
@include alert($orange);
}
.notice {
@include alert($blue);
}

10
Resources/assets/scratch-css/stylesheets/sass/modules/_buttons.scss Normal file
View File

@@ -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); }
}

69
Resources/assets/scratch-css/stylesheets/sass/modules/_footer.scss Normal file
View File

@@ -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;
}
}

122
Resources/assets/scratch-css/stylesheets/sass/modules/_forms.scss Normal file
View File

@@ -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;
}
}
}

492
Resources/assets/scratch-css/stylesheets/sass/modules/_navigation.scss Normal file
View File

@@ -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;
}
}
}*/

10
Resources/assets/scratch-css/stylesheets/sass/modules/_typography.scss Normal file
View File

@@ -0,0 +1,10 @@
ul {
&.unstyled {
list-style: none;
padding-left: 0em;
ul {
list-style:disc outside;
}
}
}

46
Resources/assets/scratch-css/stylesheets/sass/scratch.scss Normal file
View File

@@ -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";