convert css to scss
This commit is contained in:
Leo Graf
parent
1f44769030
commit
504ed30461
5 changed files with 547 additions and 1 deletions
237
include/css/webmum.style.css
Normal file
237
include/css/webmum.style.css
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
body {
|
||||
font-family: arial, serif;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
background-color: white; }
|
||||
|
||||
/* Header Styles */
|
||||
#header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: #0f0f0f linear-gradient(#3f3f3f, #0f0f0f);
|
||||
color: white;
|
||||
line-height: 50px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; }
|
||||
#header div.title {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: auto; }
|
||||
#header div.title a {
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
#header div.title a:hover {
|
||||
text-decoration: underline; }
|
||||
#header div.header-menu {
|
||||
float: left;
|
||||
padding-left: 100px; }
|
||||
#header div.header-button {
|
||||
float: left;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
color: white; }
|
||||
#header div.header-button a {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
#header div.header-button a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
/* Content Styles */
|
||||
#content {
|
||||
height: auto;
|
||||
min-height: calc(100vh - 150px);
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
/* Form Styles */
|
||||
/* Button Styles */
|
||||
/* Table Styles */
|
||||
/* Notification Styles */ }
|
||||
#content h1 {
|
||||
color: #3e3b3b; }
|
||||
#content a {
|
||||
color: blue;
|
||||
text-decoration: none; }
|
||||
#content a:hover {
|
||||
text-decoration: underline; }
|
||||
#content .form {
|
||||
margin: 25px 0; }
|
||||
#content .form .input-group,
|
||||
#content .form .buttons {
|
||||
padding-bottom: 10px; }
|
||||
#content .form .input-group > label {
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
font-size: 13px; }
|
||||
#content .form .input-group > .input-info {
|
||||
padding-bottom: 5px;
|
||||
color: #999; }
|
||||
#content .form .input input,
|
||||
#content .form .input textarea,
|
||||
#content .form .input select {
|
||||
background: #fefefe;
|
||||
border: 1px solid #c8c8c8;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0 10px;
|
||||
box-shadow: inset 1px 1px 3px #e6e6e6; }
|
||||
#content .form .input input:focus,
|
||||
#content .form .input textarea:focus,
|
||||
#content .form .input select:focus {
|
||||
border: 1px solid #898989; }
|
||||
#content .form .input input {
|
||||
min-width: 180px; }
|
||||
#content .form .input input[type="number"] {
|
||||
padding-right: 0;
|
||||
min-width: 190px; }
|
||||
#content .form .input textarea {
|
||||
min-height: 150px;
|
||||
min-width: 400px;
|
||||
line-height: 18px !important;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px; }
|
||||
#content .form .input select {
|
||||
padding: 8px 10px 9px;
|
||||
min-width: 200px; }
|
||||
#content .form .input select option[value=""] {
|
||||
color: #ccc; }
|
||||
#content .form .input input,
|
||||
#content .form .input textarea, #content .form .input.input-labeled.input-labeled-left > *:first-child, #content .form .input.input-labeled.input-labeled-right > *:last-child {
|
||||
line-height: 33px; }
|
||||
#content .form .input.input-labeled.input-labeled-left > *:first-child, #content .form .input.input-labeled.input-labeled-right > *:last-child {
|
||||
background: #eee;
|
||||
border: 1px solid #c8c8c8;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 0 0 3px;
|
||||
padding: 0 10px;
|
||||
position: absolute; }
|
||||
#content .form .input.input-action > *:first-child, #content .form .input.input-labeled > *:first-child {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
margin-right: -4px; }
|
||||
#content .form .input.input-action > *:last-child, #content .form .input.input-labeled > *:last-child {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important; }
|
||||
#content .buttons {
|
||||
margin: 15px 0; }
|
||||
#content .form .buttons {
|
||||
margin: 0; }
|
||||
#content .buttons.buttons-horizontal .button {
|
||||
display: block;
|
||||
margin-top: 10px; }
|
||||
#content .buttons.buttons-horizontal .button:first-child {
|
||||
margin-top: 0; }
|
||||
#content .button {
|
||||
background: #dddddd;
|
||||
background: linear-gradient(white, #eaeaea);
|
||||
border: 1px solid #c8c8c8;
|
||||
border-radius: 3px;
|
||||
font-family: arial, serif;
|
||||
transition: all 0.2s;
|
||||
height: auto;
|
||||
min-width: 200px;
|
||||
width: 200px;
|
||||
line-height: 31px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #393939;
|
||||
text-decoration: none; }
|
||||
#content .button:hover {
|
||||
box-shadow: 1px 1px 4px #dbdbdb;
|
||||
text-decoration: none;
|
||||
cursor: pointer; }
|
||||
#content a.button {
|
||||
display: inline-block; }
|
||||
#content .button.button-large,
|
||||
#content .buttons.button-large .button {
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
font-size: 15px;
|
||||
line-height: 45px;
|
||||
color: #393939; }
|
||||
#content .button.button-primary,
|
||||
#content .buttons.button-primary .button {
|
||||
background: #666;
|
||||
background: linear-gradient(#999999, #666666);
|
||||
border-color: #444;
|
||||
color: #fff; }
|
||||
#content .button.button-primary:hover, #content .button.button-primary:active,
|
||||
#content .buttons.button-primary .button:hover,
|
||||
#content .buttons.button-primary .button:active {
|
||||
background: #777;
|
||||
background: linear-gradient(#777777, #444444);
|
||||
border-color: #333;
|
||||
color: #fff; }
|
||||
#content .table {
|
||||
margin: 25px 0;
|
||||
border-collapse: collapse;
|
||||
border: none; }
|
||||
#content .table a {
|
||||
color: #9494ff; }
|
||||
#content .table thead th {
|
||||
line-height: 38px;
|
||||
padding: 2px 15px 0;
|
||||
border: 1px solid #b3b0b0;
|
||||
background: #eeeeee;
|
||||
background: linear-gradient(white, #eaeaea);
|
||||
font-size: 13px; }
|
||||
#content .table tfoot th {
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-weight: normal;
|
||||
color: #999; }
|
||||
#content .table tbody td {
|
||||
line-height: 21px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #b3b0b0; }
|
||||
#content .table tbody > tr:hover {
|
||||
background-color: #eaeaea; }
|
||||
#content .table tbody > tr.warning {
|
||||
background-color: #fcf897; }
|
||||
#content .table tbody > tr:hover a {
|
||||
color: blue; }
|
||||
#content .table-compact {
|
||||
margin: 5px 0; }
|
||||
#content .notification {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
padding: 15px 10px;
|
||||
box-sizing: border-box; }
|
||||
#content .notification.notification-fail {
|
||||
background-color: #fcacac;
|
||||
border-color: red; }
|
||||
#content .notification.notification-warning {
|
||||
background-color: #fcf897;
|
||||
border-color: #ffe600; }
|
||||
#content .notification.notification-success {
|
||||
background-color: #b6ffb7;
|
||||
border-color: green; }
|
||||
|
||||
/* Footer Styles */
|
||||
#footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
color: grey; }
|
||||
#footer a {
|
||||
color: #888888; }
|
||||
#footer a:hover {
|
||||
color: #666666; }
|
||||
#footer ul {
|
||||
list-style: none; }
|
||||
#footer li {
|
||||
display: inline-block; }
|
||||
#footer li:not(:last-child):after {
|
||||
content: '|';
|
||||
color: #444444;
|
||||
padding: 0 6px; }
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>WebMUM</title>
|
||||
<link rel=stylesheet href="<?php echo Router::url('include/css/style.css'); ?>" type="text/css" media=screen>
|
||||
<link rel=stylesheet href="<?php echo Router::url('include/css/webmum.style.css?v=1.00'); ?>" type="text/css" media=screen>
|
||||
<script type="text/javascript">
|
||||
function generatePassword() {
|
||||
var length = <?php echo Config::get('password.min_length', 8) + 1; ?>,
|
||||
|
|
|
|||
299
include/scss/partials/_styles.scss
Normal file
299
include/scss/partials/_styles.scss
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
body {
|
||||
font-family: arial, serif;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
#header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: rgba(15, 15, 15, 1) linear-gradient(rgba(63, 63, 63, 1), rgba(15, 15, 15, 1));
|
||||
color: white;
|
||||
line-height: 50px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
div.title {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
a {
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.header-menu {
|
||||
float: left;
|
||||
padding-left: 100px;
|
||||
}
|
||||
div.header-button {
|
||||
float: left;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
color: white;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Content Styles */
|
||||
#content {
|
||||
height: auto;
|
||||
min-height: calc(100vh - 150px);
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
h1 {
|
||||
color: rgba(62, 59, 59, 1);
|
||||
}
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
/* Form Styles */
|
||||
.form {
|
||||
margin: 25px 0;
|
||||
.input-group,
|
||||
.buttons {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.input-group > label {
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.input-group > .input-info {
|
||||
padding-bottom: 5px;
|
||||
color: #999;
|
||||
}
|
||||
.input {
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
background: #fefefe;
|
||||
border: 1px solid rgba(200, 200, 200, 1);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0 10px;
|
||||
box-shadow: inset 1px 1px 3px rgba(230, 230, 230, 1);
|
||||
&:focus {
|
||||
border: 1px solid rgba(137, 137, 137, 1);
|
||||
}
|
||||
}
|
||||
input {
|
||||
min-width: 180px;
|
||||
}
|
||||
input[type="number"] {
|
||||
padding-right: 0;
|
||||
min-width: 190px;
|
||||
}
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
min-width: 400px;
|
||||
line-height: 18px !important;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
select {
|
||||
padding: 8px 10px 9px;
|
||||
min-width: 200px;
|
||||
option[value=""] {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
&.input-labeled.input-labeled-left > *:first-child,
|
||||
&.input-labeled.input-labeled-right > *:last-child {
|
||||
line-height: 33px;
|
||||
}
|
||||
&.input-labeled.input-labeled-left > *:first-child,
|
||||
&.input-labeled.input-labeled-right > *:last-child {
|
||||
background: #eee;
|
||||
border: 1px solid rgba(200, 200, 200, 1);
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 0 0 3px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
}
|
||||
&.input-action,
|
||||
&.input-labeled {
|
||||
> *:first-child {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
margin-right: -4px;
|
||||
}
|
||||
> *:last-child {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Button Styles */
|
||||
.buttons {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.form .buttons {
|
||||
margin: 0;
|
||||
}
|
||||
.buttons.buttons-horizontal .button {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
background: #dddddd;
|
||||
background: linear-gradient(#ffffff, #eaeaea);
|
||||
border: 1px solid rgba(200, 200, 200, 1);
|
||||
border-radius: 3px;
|
||||
font-family: arial, serif;
|
||||
transition: all 0.2s;
|
||||
height: auto;
|
||||
min-width: 200px;
|
||||
width: 200px;
|
||||
line-height: 31px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: rgba(57, 57, 57, 1);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
box-shadow: 1px 1px 4px #dbdbdb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
a.button {
|
||||
display: inline-block;
|
||||
}
|
||||
.button.button-large,
|
||||
.buttons.button-large .button {
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
font-size: 15px;
|
||||
line-height: 45px;
|
||||
color: rgba(57, 57, 57, 1);
|
||||
}
|
||||
.button.button-primary,
|
||||
.buttons.button-primary .button {
|
||||
background: #666;
|
||||
background: linear-gradient(#999, #666);
|
||||
border-color: #444;
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: #777;
|
||||
background: linear-gradient(#777777, #444);
|
||||
border-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
/* Table Styles */
|
||||
.table {
|
||||
margin: 25px 0;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
a {
|
||||
color: rgb(148, 148, 255);
|
||||
}
|
||||
thead th {
|
||||
line-height: 38px;
|
||||
padding: 2px 15px 0;
|
||||
border: 1px solid rgba(179, 176, 176, 1);
|
||||
background: #eeeeee;
|
||||
background: linear-gradient(#ffffff, #eaeaea);
|
||||
font-size: 13px;
|
||||
}
|
||||
tfoot th {
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
tbody td {
|
||||
line-height: 21px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid rgba(179, 176, 176, 1);
|
||||
}
|
||||
tbody > tr:hover {
|
||||
background-color: rgba(234, 234, 234, 1);
|
||||
}
|
||||
tbody > tr.warning {
|
||||
background-color: #fcf897;
|
||||
}
|
||||
tbody > tr:hover a {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
.table-compact {
|
||||
margin: 5px 0;
|
||||
}
|
||||
/* Notification Styles */
|
||||
.notification {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
padding: 15px 10px;
|
||||
box-sizing: border-box;
|
||||
&.notification-fail {
|
||||
background-color: #fcacac;
|
||||
border-color: red;
|
||||
}
|
||||
&.notification-warning {
|
||||
background-color: #fcf897;
|
||||
border-color: #ffe600;
|
||||
}
|
||||
&.notification-success {
|
||||
background-color: rgba(182, 255, 183, 1);
|
||||
border-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer Styles */
|
||||
#footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
color: grey;
|
||||
a {
|
||||
color: #888888;
|
||||
&:hover {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
&:not(:last-child):after {
|
||||
content: '|';
|
||||
color: #444444;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
include/scss/partials/_variables.scss
Normal file
4
include/scss/partials/_variables.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// @file
|
||||
// SASS partials import
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
6
include/scss/webmum.style.scss
Normal file
6
include/scss/webmum.style.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// @file
|
||||
// SASS partials import
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@import "partials/variables";
|
||||
@import "partials/styles";
|
||||
Loading…
Add table
Reference in a new issue