inspec/www/source/stylesheets/_layout.scss

238 lines
5.9 KiB
SCSS
Raw Normal View History

//Alignment
2016-09-21 00:11:41 +00:00
.strict-center {
left: 0;
right: 0;
margin: auto;
text-align: center;
2016-09-21 00:11:41 +00:00
}
2017-01-07 04:53:01 +00:00
.strict-right {
float: right;
text-align: right;
}
.strict-left {
text-align: left;
float: left;
}
2017-01-07 00:03:24 +00:00
.clear {
clear: both;
}
.relative {
position: relative;
}
2017-01-07 04:53:01 +00:00
//margins
2016-09-21 00:11:41 +00:00
2017-01-07 04:53:01 +00:00
//xl
.margin-both-xl {
margin-top: $percent_lg;
margin-bottom: $percent_lg;
}
.margin-top-xl {
margin-top: $percent_lg;
}
.margin-under-xl {
margin-bottom: $percent_lg;
}
2017-01-07 04:53:01 +00:00
//default
.margin-both {
margin-top: $percent_md;
margin-bottom: $percent_md;
}
.pad-both {
padding-top: $percent_md;
padding-bottom: $percent_md;
}
.margin-both-offset {
2017-01-07 04:53:01 +00:00
margin-top: $percent_md+80px; //add header height
margin-bottom: $percent_md;
}
.margin-top {
margin-top: $percent_md;
}
.margin-under {
margin-bottom: $percent_md;
}
2017-01-07 04:53:01 +00:00
//small
.margin-both-xs {
margin-top: $percent_sm;
margin-bottom: $percent_sm;
}
.margin-top-xs {
margin-top: $percent_sm;
}
.margin-under-xs {
margin-bottom: $percent_sm;
}
2017-01-06 21:21:45 +00:00
//White Box
2017-01-07 04:53:01 +00:00
2017-01-06 21:21:45 +00:00
.box-white{
border-radius: 7px;
padding: 2em;
background-color: white;
}
2017-01-07 04:53:01 +00:00
//Art
2017-01-07 04:53:01 +00:00
.icon-art { //Illustrations with content underneath
height: 100px;
margin-bottom: 15px;
margin-top: 15px;
}
2017-01-07 04:53:01 +00:00
.icon { //gradient arrows with white box
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid $color_white;
overflow: hidden;
background: $color_white;
margin-top: -35px;
z-index: 50;
position: absolute;
img {
display: block;
padding: 30%;
height: auto;
}
}
2017-01-07 04:53:01 +00:00
.shadow { //dropshadow
box-shadow: 0 0 25px $color_shadow;
}
2017-01-07 04:53:01 +00:00
.block-angl { //Angled Background
background: $color_triangle_block;
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}
2017-01-07 04:53:01 +00:00
.purp-shade { //Purple radial gradient applied over blue-gradient
background: -moz-radial-gradient(center, ellipse cover, rgba(151,110,229,0.4) 0%, rgba(151,110,229,0.2) 50%, rgba(151,110,229,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(151,110,229,0.4) 0%,rgba(151,110,229,0.2) 50%,rgba(151,110,229,0) 100%);
background: radial-gradient(ellipse at center, rgba(151,110,229,0.4) 0%,rgba(151,110,229,0.2) 50%,rgba(151,110,229,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66976ee5', endColorstr='#00976ee5',GradientType=1 );
}
2017-01-07 04:53:01 +00:00
.dark-bg {
background-color: $color_heading;
}
2017-01-07 04:53:01 +00:00
.blue-gradient { //Default Blue Gradient
background: -moz-linear-gradient(100% -14.24% -80deg,rgba(99, 206, 153, 1) 0%,rgba(91, 201, 163, 1) 8.33%,rgba(67, 185, 194, 1) 36.64%,rgba(58, 179, 206, 1) 52.48%,rgba(58, 175, 206, 1) 67.93%,rgba(58, 162, 206, 1) 83.94%,rgba(58, 142, 206, 1) 100%);
background: -webkit-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
background: -webkit-gradient(linear,100% -14.24% ,56.15% 114.24% ,color-stop(0,rgba(99, 206, 153, 1) ),color-stop(0.0833,rgba(91, 201, 163, 1) ),color-stop(0.3664,rgba(67, 185, 194, 1) ),color-stop(0.5248,rgba(58, 179, 206, 1) ),color-stop(0.6793,rgba(58, 175, 206, 1) ),color-stop(0.8394,rgba(58, 162, 206, 1) ),color-stop(1,rgba(58, 142, 206, 1) ));
background: -o-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
background: -ms-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99', endColorstr='#3A8ECE' ,GradientType=0)";
background: linear-gradient(170deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99',endColorstr='#3A8ECE' , GradientType=1);
}
2017-01-06 21:21:45 +00:00
2017-01-07 04:53:01 +00:00
//form
input.form-item {
width: 60%;
display: inline;
}
form > button {
margin-left: 1em;
}
form > button > i {
margin-right: 6px;
}
input[type="email"] {
border: 1px solid #d3e2e2;
-webkit-box-shadow: 0 0 2px $color_shadow;
box-shadow: 0 0 2px $color_shadow;
font-family: $main-font;
font-weight: 300;
color: $color_heading;
}
input[type="email"]:hover, input[type="email"]:focus {
border: 1px solid $color_purple;
-webkit-box-shadow: 0 0 5px $color_shadow;
box-shadow: 0 0 5px $color_shadow;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-family: $main-font;
color: $color_gray;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
font-family: $main-font;
color: $color_gray;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
font-family: $main-font;
color: $color_gray;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-family: $main-font;
color: $color_gray;
}
input::placeholder,
textarea::placeholder {
font-family: $main-font;
color: $color_gray;
}
//Progress bar
2017-01-06 21:21:45 +00:00
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
2017-01-07 04:53:01 +00:00
height: 1.6px;
2017-01-06 21:21:45 +00:00
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: $color_link;
}
progress[value]::-webkit-progress-bar {
background-color: white;
}
progress[value]::-webkit-progress-value {
background-color:$color_link;
}
progress[value]::-moz-progress-bar {
background-color: white;
}
progress[value]::-moz-progress-value {
background-color:$color_link;
}