introducing scss (v1)
This commit is contained in:
533
style/_common.scss
Normal file
533
style/_common.scss
Normal file
@@ -0,0 +1,533 @@
|
||||
/* Standard Tags */
|
||||
|
||||
body, html {
|
||||
background:white;
|
||||
font-family:Verdana, Arial;
|
||||
color:$col_blue;
|
||||
background:$col_blue;
|
||||
padding:0;
|
||||
margin:0;
|
||||
min-width:1024px;
|
||||
}
|
||||
|
||||
table {
|
||||
border:none;
|
||||
background:none;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-family:Verdana, Arial;
|
||||
font-size:12px;
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
input[type=text], input[type=password] {
|
||||
border:2px solid $col_blue;
|
||||
padding:5px;
|
||||
width:200px;
|
||||
}
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=password]:hover, input[type=text]:hover, input[type=text]:focus {
|
||||
background-color:$col_orange;
|
||||
}
|
||||
|
||||
input[disabled="disabled"], textarea[disabled="disabled"], input:disabled, textarea:disabled {
|
||||
background-color:$col_bright_blue;
|
||||
border-color:$col_bright_blue;
|
||||
border:2px solid $col_blue;
|
||||
}
|
||||
|
||||
input[disabled="disabled"]:hover, textarea[disabled="disabled"]:hover, input:disabled:hover, textarea:disabled:hover {
|
||||
background-color:$col_bright_blue;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=button], .clickable {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background:white;
|
||||
border:2px solid $col_blue;
|
||||
padding:5px;
|
||||
color:$col_blue;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height:30px;
|
||||
}
|
||||
|
||||
input, select, textarea, h1, h2, h3, h4, p, a {
|
||||
color:$col_blue;
|
||||
}
|
||||
|
||||
p {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a:active, a:focus, input:active, input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
/* Functions */
|
||||
|
||||
@mixin gradient-diag($fromColor, $ToColor, $fromPos, $ToPos) {
|
||||
background: $fromColor;
|
||||
background: -moz-linear-gradient(45deg, $fromColor $fromPos, $ToColor $ToPos);
|
||||
background: -webkit-gradient(linear, left bottom, right top, color-stop($fromPos,$fromColor), color-stop($ToPos,$ToColor));
|
||||
background: -webkit-linear-gradient(45deg, $fromColor $fromPos,$ToColor $ToPos);
|
||||
background: -o-linear-gradient(45deg, $fromColor $fromPos,$ToColor $ToPos);
|
||||
background: -ms-linear-gradient(45deg, $fromColor $fromPos,$ToColor $ToPos);
|
||||
background: linear-gradient(45deg, $fromColor $fromPos,$ToColor $ToPos);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$fromColor', endColorstr='$ToColor',GradientType=1 );
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
|
||||
.round_top {
|
||||
-moz-border-radius:10px 10px 0 0;
|
||||
-webkit-border-radius:10px 10px 0 0;
|
||||
-khtml-border-radius:10px 10px 0 0;
|
||||
border-radius:10px 10px 0 0;
|
||||
}
|
||||
.round_bottom {
|
||||
-moz-border-radius:0 0 10px 10px;
|
||||
-webkit-border-radius:0 0 10px 10px;
|
||||
-khtml-border-radius:0 0 10px 10px;
|
||||
border-radius:0 0 10px 10px;
|
||||
}
|
||||
.round_right {
|
||||
-moz-border-radius:0 10px 10px 0;
|
||||
-webkit-border-radius:0 10px 10px 0;
|
||||
-khtml-border-radius:0 10px 10px 0;
|
||||
border-radius:0 10px 10px 0;
|
||||
}
|
||||
.round_left {
|
||||
-moz-border-radius:10px 0 0 10px;
|
||||
-webkit-border-radius:10px 0 0 10px;
|
||||
-khtml-border-radius:10px 0 0 10px;
|
||||
border-radius:10px 0 0 10px;
|
||||
}
|
||||
.round_bottom_left {
|
||||
-moz-border-radius:0 0 0 10px;
|
||||
-webkit-border-radius:0 0 0 10px;
|
||||
-khtml-border-radius:0 0 0 10px;
|
||||
border-radius:0 0 0 10px;
|
||||
}
|
||||
.round {
|
||||
-moz-border-radius:10px;
|
||||
-webkit-border-radius:10px;
|
||||
-khtml-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
.tiny_round {
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
-khtml-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
.tiny_top_right {
|
||||
-moz-border-radius:5px 0 5px 5px;
|
||||
-webkit-border-radius:5px 0 5px 5px;
|
||||
-khtml-border-radius:5px 0 5px 5px;
|
||||
border-radius:5px 0 5px 5px;
|
||||
}
|
||||
|
||||
.inc_border {
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
}
|
||||
|
||||
.loading {
|
||||
font-size:20px;
|
||||
margin:5px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.error, .warning, .success {
|
||||
margin:10px 0;
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
padding:3px;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
-khtml-border-radius:5px;
|
||||
border-radius:5px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.error a, .warning a, .success a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error, .error a {
|
||||
color:red;
|
||||
border-color:red;
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.warning, .warning a {
|
||||
color:orange;
|
||||
border-color:orange;
|
||||
font-size:13px;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.success, .success a {
|
||||
color:green;
|
||||
border-color:green;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.default_text {
|
||||
color:$col_bright_blue !important;
|
||||
}
|
||||
|
||||
a.button {
|
||||
padding:7px;
|
||||
margin-right:5px;
|
||||
background:$col_bright_blue;
|
||||
font-size:12px;
|
||||
cursor:pointer;
|
||||
border:1px solid $col_blue;
|
||||
/*position:relative;*/
|
||||
display:inline-block;
|
||||
}
|
||||
a.button:hover {
|
||||
background-color:$col_orange;
|
||||
}
|
||||
a.button:active {
|
||||
background-color:$col_blue;
|
||||
color:white;
|
||||
}
|
||||
|
||||
a.button .fa {
|
||||
@extend .fa-60;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
a.button.strong .value {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
a.button.inverse {
|
||||
background-color:$col_blue;
|
||||
color:$col_bright_blue;
|
||||
}
|
||||
|
||||
a.button.inverse:hover {
|
||||
background-color:$col_orange;
|
||||
color:$col_blue;
|
||||
}
|
||||
|
||||
a.button.heavy {
|
||||
border-width:2px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.addr {
|
||||
cursor:text;
|
||||
}
|
||||
|
||||
.addr:hover {
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
.maximized {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.righty {
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.glue-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.lefty {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.side_margins {
|
||||
margin:0 12px 10px;
|
||||
}
|
||||
|
||||
a.internal_link {
|
||||
text-decoration:underline;
|
||||
font-style:normal;
|
||||
background:$col_bright_blue;
|
||||
padding:1px 8px 1px 5px;
|
||||
margin:0;
|
||||
}
|
||||
a.internal_link:visited, a.external_link:visited {
|
||||
color:grey;
|
||||
}
|
||||
a.internal_link span.type {
|
||||
text-transform:capitalize;
|
||||
}
|
||||
a[href^="table"].internal_link span.item {
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
.author_box {
|
||||
padding:5px 10px;
|
||||
border:1px solid $col_blue;
|
||||
color:$col_blue;
|
||||
font-style:italic;
|
||||
font-size:12px;
|
||||
}
|
||||
.author_box:nth-child(odd) {
|
||||
background:$col_brighter_blue;
|
||||
}
|
||||
.author_box:nth-child(even) {
|
||||
background:$col_bright_blue;
|
||||
}
|
||||
.author_box:hover {
|
||||
border-color:$col_orange;
|
||||
}
|
||||
|
||||
.author_box a {
|
||||
background:none;
|
||||
padding:0;
|
||||
display:block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.author_box i.fa-30 {
|
||||
vertical-align: -5%;
|
||||
}
|
||||
|
||||
.author_box span.description {
|
||||
font-weight:bold;
|
||||
font-style:normal;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.author_box span.rank {
|
||||
font-weight: bold;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.standalone .author_box {
|
||||
margin-top:10px;
|
||||
}
|
||||
.standalone .author_box:hover {
|
||||
color:$col_orange;
|
||||
}
|
||||
|
||||
.hide, .mobile {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Step Box */
|
||||
|
||||
.step_box {
|
||||
margin-top:5px;
|
||||
margin-bottom:5px;
|
||||
padding:10px;
|
||||
background:$col_bright_blue;
|
||||
color:$col_blue;
|
||||
border: 2px solid $col_blue;
|
||||
}
|
||||
.step_box:nth-child(even) {
|
||||
background:$col_brighter_blue;
|
||||
}
|
||||
|
||||
.step_box input, .step_box textarea, .step_box select, .step_box .read.textarea, .step_box .read.input {
|
||||
margin-top:10px;
|
||||
background:white;
|
||||
font-size:14px;
|
||||
border-width:1px;
|
||||
}
|
||||
.step_box input:disabled, .step_box textarea:disabled, .step_box select:disabled, .step_box input:hover:disabled, .step_box textarea:hover:disabled, .step_box select:hover:disabled {
|
||||
background-color:white;
|
||||
}
|
||||
.step_box input[type=text], .step_box textarea, .step_box .read.textarea, .step_box .read.input {
|
||||
width:100%;
|
||||
}
|
||||
.step_box textarea, .step_box .read.textarea {
|
||||
height:200px;
|
||||
padding:5px;
|
||||
background:white;
|
||||
border:1px solid $col_blue;
|
||||
}
|
||||
.step_box .read.textarea, .step_box .read.input {
|
||||
border-color:$col_bright_blue;
|
||||
font-weight:bold;
|
||||
}
|
||||
.step_box .read.textarea {
|
||||
background-color:$col_brighter_blue;
|
||||
}
|
||||
.step_box:nth-child(even) .read.textarea {
|
||||
background-color:$col_bright_blue;
|
||||
}
|
||||
.step_box .read.input {
|
||||
background-color:$col_bright_blue;
|
||||
padding-left:0;
|
||||
}
|
||||
|
||||
.step_box .step_nb_box, .step_box .step_box_title {
|
||||
border-bottom:1px solid $col_blue;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
|
||||
.scrollbar_box {
|
||||
position:relative;
|
||||
height:0px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.scrollbar_box .scrollbar_subbox {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
position:relative;
|
||||
float:right;
|
||||
width:15px;
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
.scrollbar .thumb, .scrollbar .thumb .end {
|
||||
background-color:$col_blue;
|
||||
width:13px;
|
||||
}
|
||||
.scrollbar .track {
|
||||
background-color:$col_bright_blue;
|
||||
height:100%;
|
||||
width:13px;
|
||||
position:relative;
|
||||
padding:0;
|
||||
}
|
||||
.scrollbar .thumb {
|
||||
position:absolute;
|
||||
top:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.scrollbar .thumb .end {
|
||||
overflow:hidden;
|
||||
height:20px;
|
||||
}
|
||||
|
||||
.disable {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Uploader */
|
||||
|
||||
.uploader_box {
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.uploader_droparea {
|
||||
position:absolute;
|
||||
top:-10px;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
height:210px;
|
||||
z-index:2;
|
||||
border:1px solid $col_blue;
|
||||
background:white;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.uploader_droparea-active {
|
||||
background:$col_orange;
|
||||
}
|
||||
.uploader_droparea span {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
width:100%;
|
||||
margin-top:-8px;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.uploader_buffer {
|
||||
width:100%;
|
||||
height:8px;
|
||||
}
|
||||
|
||||
.uploader_list {
|
||||
/*margin:0;*/margin-top:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
.uploader_list li {
|
||||
margin:0 0 10px 10px;
|
||||
}
|
||||
|
||||
.uploader_item_file, .uploader_item_loading, .uploader_item_size, .uploader_item_cancel, .uploader_item_failed {
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.uploader_item_size, .uploader_item_cancel {
|
||||
font-size:12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a.uploader_item_cancel {
|
||||
text-decoration:underline;
|
||||
color:$col_blue;
|
||||
}
|
||||
|
||||
.uploader_box .image_description {
|
||||
border-width:1px;
|
||||
padding:3px 5px;
|
||||
background:white;
|
||||
}
|
||||
|
||||
.uploader_box .image_action {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.uploader_box .image_action input {
|
||||
width:200px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.uploader_item_failed_notice {
|
||||
display:none;
|
||||
}
|
||||
.uploader_item_failed .uploader_item_failed_notice {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.uploader_item_failed {
|
||||
color:red;
|
||||
}
|
||||
|
||||
.uploader_item_success .fa-c-delete:hover, .uploader_item_cancel .fa-c-delete:hover {
|
||||
color:$col_orange;
|
||||
}
|
||||
Reference in New Issue
Block a user