Commit 81bb1c88 authored by Johan Cwiklinski's avatar Johan Cwiklinski Committed by Johan Cwiklinski

Implement SCSS for main stylesheets

Load at once styles, highcontrast (if neeeded) and requested palette.
Add command line generator, use prod file if present
parent f29c0ccc
......@@ -22,6 +22,7 @@ phpunit.xml
/nbproject
.composer.hash
/css/**/*.min.css
/css/compiled/
!/css/tiny_mce/**/*.min.css
/js/*.min.js
# ignore incomplete locale, fallback to ru.js
......
......@@ -34,7 +34,8 @@
"sebastian/diff": "^1.4 || ^2.0 || ^3.0",
"zendframework/zend-console": "^2.7",
"elvanto/litemoji": "^1.4",
"symfony/console": "^3.4"
"symfony/console": "^3.4",
"leafo/scssphp": "^0.7.7"
},
"require-dev": {
"guzzlehttp/guzzle": "~6",
......
......@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "7fc688096ca6a4500cd70b4d0b69f36e",
"content-hash": "974f77a63a127b7d34c9e110b225f70b",
"packages": [
{
"name": "container-interop/container-interop",
......@@ -107,6 +107,58 @@
],
"time": "2015-05-22T17:10:41+00:00"
},
{
"name": "leafo/scssphp",
"version": "v0.7.7",
"source": {
"type": "git",
"url": "https://github.com/leafo/scssphp.git",
"reference": "1d656f8c02a3a69404bba6b28ec4e06edddf0f49"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/leafo/scssphp/zipball/1d656f8c02a3a69404bba6b28ec4e06edddf0f49",
"reference": "1d656f8c02a3a69404bba6b28ec4e06edddf0f49",
"shasum": ""
},
"require": {
"php": ">=5.4.0"
},
"require-dev": {
"phpunit/phpunit": "~4.6",
"squizlabs/php_codesniffer": "~2.5"
},
"bin": [
"bin/pscss"
],
"type": "library",
"autoload": {
"psr-4": {
"Leafo\\ScssPhp\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Leaf Corcoran",
"email": "leafot@gmail.com",
"homepage": "http://leafo.net"
}
],
"description": "scssphp is a compiler for SCSS written in PHP.",
"homepage": "http://leafo.github.io/scssphp/",
"keywords": [
"css",
"less",
"sass",
"scss",
"stylesheet"
],
"time": "2018-07-22T01:22:08+00:00"
},
{
"name": "michelf/php-markdown",
"version": "1.8.0",
......
......@@ -29,179 +29,235 @@
* ---------------------------------------------------------------------
*/
/****** TABLES ******/
table {
box-sizing: border-box;
border-collapse: collapse;
box-sizing: border-box;
border-collapse: collapse;
}
.tab_cadre,
.tab_cadrehov,
.tab_cadre_fixehov {
border: 1px solid #ADADAD;
.tab_cadre, .tab_cadrehov, .tab_cadre_fixehov {
border: 1px solid #ADADAD;
}
.tab_cadre_fixe {
border: 1px solid #ADADAD;
border-bottom: 0;
}
.tab_glpi {
th, td {
border: 0;
}
}
.tab_cadre {
th, td {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
}
.tab_cadre_fixe {
border: 1px solid #ADADAD;
border-bottom: 0;
th, td {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
}
.tab_cadre_fixehov {
th, td {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
}
.tab_glpi th,
.tab_glpi td {
border: 0;
.tab_cadrehov {
th, td {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
}
.tab_cadre_postonly {
th, td {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
}
.tab_cadre th, .tab_cadre td,
.tab_cadre_fixe th, .tab_cadre_fixe td,
.tab_cadre_fixehov th, .tab_cadre_fixehov td,
.tab_cadrehov th, .tab_cadrehov td,
.tab_cadre_postonly th, .tab_cadre_postonly td,
.main_form tr.headerRow th {
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
border-bottom: 1px solid #ADADAD;
border-top: 1px solid #ADADAD;
box-sizing: border-box;
border-collapse: collapse;
}
/* Removes border on tables that have no tab_cadre class but nested in table with this class. */
/* A border was set by previous rule if nested in previous selector. */
table[class^="tab_cadre"] table:not([class^="tab_cadre"]) th,
table[class^="tab_cadre"] table:not([class^="tab_cadre"]) td {
border: 0;
}
#searchcriterias .tab_cadre_fixe {
border: 1px solid #ADADAD;
table[class^="tab_cadre"] table:not([class^="tab_cadre"]) {
th, td {
border: 0;
}
}
#searchcriterias th,
#searchcriterias td {
border: 0;
#searchcriterias {
.tab_cadre_fixe {
border: 1px solid #ADADAD;
}
th, td {
border: 0;
}
}
.tab_bg_2 {
background-color: #E0E0E0;
background-color: #E0E0E0;
}
.tab_bg_1_2 td,
.tab_bg_2_2 td{
border-color: #7B3E3E;
.tab_bg_1_2 td, .tab_bg_2_2 td {
border-color: #7B3E3E;
}
.actor-head, .actor-content {
margin: 0;
min-height: 25px;
box-sizing: border-box;
border-collapse: collapse;
margin: 0;
min-height: 25px;
box-sizing: border-box;
border-collapse: collapse;
}
.tab_actors {
border-bottom: 1px solid #ADADAD;
border-bottom: 1px solid #ADADAD;
}
.actor-head {
border-right: 1px solid #ADADAD;
border-bottom: 1px solid #ADADAD;
border-right: 1px solid #ADADAD;
border-bottom: 1px solid #ADADAD;
}
.actor_title {
border-right: 1px solid #ADADAD;
border-right: 1px solid #ADADAD;
}
.order_DESC:before {
color: #000;
}
.tab_cadre_pager img[src*=first\.png],
.tab_cadre_pager img[src*=left\.png],
.tab_cadre_pager .fa-wrench,
.tab_cadre_pager img[src*=right\.png],
.tab_cadre_pager img[src*=last\.png]
{
border: 1px solid #393939;
padding: 2px;
border-radius: 2px;
}
.tab_cadre_pager img:hover {
opacity: .5;
color: #000;
}
.tab_cadre_pager .grey_border {
border: 1px dotted #414141;
margin-left: 2px;
.tab_cadre_pager {
img {
&[src*=first\.png], &[src*=left\.png] {
border: 1px solid #393939;
padding: 2px;
border-radius: 2px;
}
}
.fa-wrench {
border: 1px solid #393939;
padding: 2px;
border-radius: 2px;
}
img {
&[src*=right\.png], &[src*=last\.png] {
border: 1px solid #393939;
padding: 2px;
border-radius: 2px;
}
&:hover {
opacity: .5;
}
}
.grey_border {
border: 1px dotted #414141;
margin-left: 2px;
}
}
/****** TABS ******/
.ui-tabs .ui-tabs-nav,
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
border-bottom: 1px solid #878787;
padding:0;
}
.ui-tabs .ui-tabs-nav li,
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
border-color: #878787;
border-bottom: 0;
box-sizing: border-box;
border-collapse: collapse;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
border-right-width: 1px !important;
margin: 0;
width: 100%;
.ui-tabs {
.ui-tabs-nav, &.ui-tabs-vertical .ui-tabs-nav {
border-bottom: 1px solid #878787;
padding: 0;
}
.ui-tabs-nav li {
border-color: #878787;
border-bottom: 0;
box-sizing: border-box;
border-collapse: collapse;
}
&.ui-tabs-vertical .ui-tabs-nav li {
border-color: #878787;
border-bottom: 0;
box-sizing: border-box;
border-collapse: collapse;
border-right-width: 1px !important;
margin: 0;
width: 100%;
}
}
.layout_classic.form .stNavMain li, .layout_vsplit.form .stNavMain li {
border: 1px solid #878787 !important;
border: 1px solid #878787 !important;
}
.ui-tabs-panel {
margin-top: 3px;
margin-top: 3px;
}
/****** CONTROLS ******/
textarea, input[type=text], input[type=password], input[type=number] {
border: 1px solid #5D5D5D;
textarea {
border: 1px solid #5D5D5D;
}
input {
&[type=text], &[type=password], &[type=number] {
border: 1px solid #5D5D5D;
}
}
.select2-choice,
.select2-container--default .select2-selection--single {
border: 1px solid #5D5D5D !important;
.select2-choice, .select2-container--default .select2-selection--single {
border: 1px solid #5D5D5D !important;
}
input.submit,
span.vsubmit, a.vsubmit,
#BackToTop {
color: #4B2F03;
border: 2px solid #4B2F03;
input.submit, span.vsubmit, a.vsubmit, #BackToTop {
color: #4B2F03;
border: 2px solid #4B2F03;
}
/****** CHECKBOXES ******/
th .form-group-checkbox {
padding: 2px;
padding: 2px;
}
.label-checkbox .box,
.subheader .box,
th .label-checkbox .box {
background-color: white;
border: 2px solid black;
margin-right: 2px;
.label-checkbox .box, .subheader .box, th .label-checkbox .box {
background-color: white;
border: 2px solid black;
margin-right: 2px;
}
.label-checkbox .check {
border: 3px solid #000;
border-top: 0;
border-left: 0;
border: 3px solid #000;
border-top: 0;
border-left: 0;
}
/****** MISC ******/
.pointer {
opacity: 1;
opacity: 1;
}
#c_ssmenu2 {
border-bottom: 1px solid #ADADAD;
border-bottom: 1px solid #ADADAD;
}
......@@ -31,120 +31,140 @@
/* ===== LOGIN ===== */
#firstboxlogin {
background-color: #8EC547;
background-color: #8EC547;
}
#logo_login {
background: url(../../pics/login_logo_glpi.png) center no-repeat, #459436;
background: url(../../pics/login_logo_glpi.png) center no-repeat, #459436;
}
#display-login {
color: #FFF;
color: #FFF;
}
#text-login {
background-color: #459436;
color: #FFF;
background-color: #459436;
color: #FFF;
}
#boxlogin #forget,
#footer-login a {
color: #459436;
#boxlogin #forget, #footer-login a {
color: #459436;
}
/* ====== GENERAL ====== */
a, a:link, .ui-widget-content a {
a {
color: #459436;
&:link {
color: #459436;
}
}
.main_form tr.headerRow th {
color: #93CC4A;
.ui-widget-content a {
color: #459436;
}
.main_form tr.headerRow th {
color: #93CC4A;
}
/* ====== HEADER ====== */
#header_top {
background-color: #459436;
background-color: #459436;
}
#c_preference a, #language_link > span {
color: #D9FFA8;
color: #D9FFA8;
}
#c_recherche form #champRecherche input {
background-color: #365731;
color: #D9FFA8;
background-color: #365731;
color: #D9FFA8;
}
#c_menu {
background-color: #8EC547;
}
ul#menu a.itemP, ul#menu a.itemP1 {
color: #fff;
}
ul#menu > li.active,
ul.ssmenu li.active {
background-color: #459436;
}
ul#menu > li.active > a,
ul#menu ul.ssmenu li.active > a {
color: #D9FFA8;
}
ul#menu > li:hover {
background-color: #93CC4A;
}
ul#menu ul li a:hover {
background: #93CC4A;
color: #D9FFA8;
}
ul#menu ul li a {
color: #459436;
background-color: #8EC547;
}
ul {
&#menu {
a {
&.itemP, &.itemP1 {
color: #fff;
}
}
> li.active {
background-color: #459436;
}
}
&.ssmenu li.active {
background-color: #459436;
}
&#menu {
> li.active > a {
color: #D9FFA8;
}
ul {
&.ssmenu li.active > a {
color: #D9FFA8;
}
li a {
&:hover {
background: #93CC4A;
color: #D9FFA8;
}
color: #459436;
}
}
> li:hover {
background-color: #93CC4A;
}
}
}
#c_recherche form #champRecherche button {
background-color: white;
background-color: white;
}
/* ====== PANEL COMPONENTS ====== */
input.submit,
span.vsubmit, a.vsubmit,
.ui-widget-content span.vsubmit {
background-color: #8ec547;
color: #fff;
input.submit, span.vsubmit, a.vsubmit, .ui-widget-content span.vsubmit {
background-color: #8ec547;
color: #fff;
}
/* Primary color elements (white on blue BG) designed to be overridden from palettes */
/* Colors are same as #c_menu */
.primary-bg {
background: #8EC547;
}
.primary-bg-inverse {
background: #D9FFA8;
background: #8EC547;
}
.primary-fg, .primary-fg:hover {
color: #D9FFA8;
.primary-bg-inverse {
background: #D9FFA8;
}
.primary-fg-inverse, .primary-fg-inverse:hover {
color: #8EC547;
.primary-fg {
color: #D9FFA8;
&:hover {
color: #D9FFA8;
}
}
#show_all_menu dt a:hover {
background: #93CC4A;
.primary-fg-inverse {
color: #8EC547;
&:hover {
color: #8EC547;
}
}
#show_all_menu a:hover {
background-color: #8EC547;
color: #D9FFA8;
#show_all_menu {
dt a:hover {
background: #93CC4A;
}
a:hover {
background-color: #8EC547;
color: #D9FFA8;
}
}
......@@ -31,81 +31,92 @@
/* ===== LOGIN ===== */
#firstboxlogin {
background-color: #1B2F62;
background-color: #1B2F62;
}
#logo_login {
background: url(../../pics/login_logo_glpi.png) center no-repeat, #3A5693;
background: url(../../pics/login_logo_glpi.png) center no-repeat, #3A5693;
}
#display-login {
color: #FFF;
color: #FFF;
}
#text-login {
background-color: #3A5693;
color: #FFF;
background-color: #3A5693;
color: #FFF;
}
/* ====== GENERAL ====== */
a, a:link, .ui-widget-content a {
color : #3A5693;
a {
color: #3A5693;
&:link {
color: #3A5693;
}
}
.ui-widget-content a {
color: #3A5693;
}
.main_form tr.headerRow th {
color: #8CABDB;
color: #8CABDB;
}
/* ====== HEADER ====== */
#header_top {
background-color: #1B2F62;
background-color: #1B2F62;
}
#c_preference a, #language_link > span {
color: #C7DBF5;
color: #C7DBF5;
}
#c_recherche form #champRecherche input {
background-color: #131425;
color: #C7DBF5;
background-color: #131425;
color: #C7DBF5;
}
#c_menu {
background-color: #3A5693;
}
ul#menu a.itemP, ul#menu a.itemP1 {
color: #FFF;
}
ul#menu > li.active,
ul.ssmenu li.active {
background-color: #8CABDB;
}
ul#menu > li:hover {
background-color: #8BAADA;
}
ul#menu ul li a:hover {
background: #3A5693;
color: #C7DBF5;
}
ul#menu ul li a {
color: #131425;
background-color: #3A5693;
}
ul {
&#menu {
a {
&.itemP, &.itemP1 {
color: #FFF;
}
}
> li.active {
background-color: #8CABDB;
}
}
&.ssmenu li.active {
background-color: #8CABDB;
}
&#menu {
> li:hover {
background-color: #8BAADA;
}
ul li a {
&:hover {
background: #3A5693;
color: #C7DBF5;
}
color: #131425;
}
}
}