inspec/www/source/stylesheets/_layout.scss

360 lines
6.8 KiB
SCSS
Raw Normal View History

// Alignment
2016-09-21 00:11:41 +00:00
.strict-center {
right : 0;
left : 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 {
float : left;
text-align : left;
}
2017-01-07 00:03:24 +00:00
.clear {
clear : both;
2017-01-07 00:03:24 +00:00
}
.relative {
position : relative;
}
.relative-top {
z-index : 10;
position : relative;
}
2017-01-07 04:53:01 +00:00
// margins
// xl
2016-09-21 00:11:41 +00:00
.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;
}
// default
.margin-both {
margin-top : $percent_md;
margin-bottom : $percent_md;
}
.pad-both {
padding-top : $percent_md;
padding-bottom : $percent_md;
}
.margin-both-offset {
margin-top : $percent_md+80px;
margin-bottom : $percent_md;
// add header height
}
.margin-top-offset {
margin-top : $percent_md+80px;
// add header height
}
.margin-top {
margin-top : $percent_md;
}
.margin-under {
margin-bottom : $percent_md;
}
// 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;
}
// White Box
2017-01-07 04:53:01 +00:00
.box-white {
padding : 2em;
border-radius : 7px;
background-color : white;
2017-01-06 21:21:45 +00:00
}
2017-01-07 04:53:01 +00:00
// White Box with border
.box-white-brdr {
padding : 2em;
border : 1px solid #d3e2e2;
border-radius : 7px;
}
2017-01-07 04:53:01 +00:00
// Art
.icon-art {
// Illustrations with content underneath
height : 100px;
margin-top : 15px;
margin-bottom : 15px;
}
2017-01-07 04:53:01 +00:00
.icon {
// gradient arrows with white box
z-index : 50;
position : absolute;
width : 70px;
height : 70px;
margin-top : -35px;
overflow : hidden;
border : 2px solid $color_white;
border-radius : 50%;
background : $color_white;
2017-01-07 04:53:01 +00:00
img {
display : block;
height : auto;
padding : 30%;
}
}
2017-01-06 21:21:45 +00:00
.shadow {
// dropshadow
box-shadow : 0 0 25px $color_shadow;
}
.block-angl {
// Angled Background
background : $color_triangle_block;
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
}
.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 );
}
.dark-bg {
background-color : $color_heading;
}
.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 : -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%
);
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 : -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 : -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%
);
}
// form
2017-01-07 04:53:01 +00:00
input.form-item {
display : inline;
width : 60%;
2017-01-07 04:53:01 +00:00
}
form > button {
margin-left : 1em;
2017-01-07 04:53:01 +00:00
}
form > button > i {
margin-right : 6px;
2017-01-07 04:53:01 +00:00
}
input[type="email"], input[type="text"] {
color : $color_heading;
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;
margin:0;
2017-01-07 04:53:01 +00:00
}
input[type="text"]:focus,
input[type="text"]:hover,
input[type="email"]:focus,
input[type="email"]:hover {
border : 1px solid $color_purple;
-webkit-box-shadow : 0 0 5px $color_shadow;
box-shadow : 0 0 5px $color_shadow;
2017-01-07 04:53:01 +00:00
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color : $color_gray;
font-family : $main-font;
2017-01-07 04:53:01 +00:00
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color : $color_gray;
font-family : $main-font;
2017-01-07 04:53:01 +00:00
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color : $color_gray;
font-family : $main-font;
2017-01-07 04:53:01 +00:00
}
input::placeholder,
textarea::placeholder {
color : $color_gray;
font-family : $main-font;
}
// Progress bar
progress {
/* Positioning */
-moz-appearance : none;
-webkit-appearance : none;
appearance : none;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 1.6px;
color : $color_link;
border : none;
background-color : transparent;
2017-01-09 22:11:49 +00:00
z-index : 500;
/* Dimensions */
/* Reset the appearance */
/* Get rid of the default border in Firefox/Opera. */
/* Progress bar container for Firefox/IE10+ */
/* Progress bar value for IE10+ */
2017-01-07 04:53:01 +00:00
}
progress[value]::-webkit-progress-bar {
background-color : white;
}
2017-01-06 21:21:45 +00:00
progress[value]::-webkit-progress-value {
background-color : $color_link;
}
2017-01-06 21:21:45 +00:00
progress[value]::-moz-progress-bar {
background-color : white;
}
2017-01-06 21:21:45 +00:00
progress[value]::-moz-progress-value {
background-color : $color_link;
2017-01-06 21:21:45 +00:00
}
progress[value]::progress-bar {
background-color : white;
2017-01-06 21:21:45 +00:00
}
progress[value]::progress-value {
background-color : $color_link;
2017-01-06 21:21:45 +00:00
}
//search bar
2017-01-09 22:11:49 +00:00
.searchbar{
display:flex;
align-items: center
2017-01-06 21:21:45 +00:00
}
//Search button
.search {
// search icon
width : 70px;
height : 70px;
overflow : hidden;
border : 2px solid $color_white;
border-radius : 50%;
background : $color_white;
cursor: pointer;
position: relative;
z-index: 50;
img {
display : block;
height : auto;
padding : 30%;
}
2017-01-06 21:21:45 +00:00
}