Skip to content
Snippets Groups Projects
Commit 43618c2f authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Format css

parent cf8ce674
No related branches found
No related tags found
No related merge requests found
Pipeline #1034 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
theme-source/sass/components/_global.scss
+ 133
− 120
View file @ 43618c2f
//Default styles
html {
box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
......@@ -18,18 +20,17 @@ main {
}
ul {
list-style-type: none;
list-style-type: none;
}
a {
color: $link-color;
text-decoration: none;
color: $link-color;
text-decoration: none;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
}
// Positioning
.valign-wrapper {
display: flex;
......@@ -40,7 +41,6 @@ a {
}
}
ul {
padding: 0;
li {
......@@ -53,37 +53,39 @@ ul {
clear: both;
}
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
.z-depth-1{
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1-half{
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2{
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3{
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4{
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
.z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22),
0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5{
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2),
0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.hoverable {
transition: box-shadow .25s;
transition: box-shadow 0.25s;
box-shadow: 0;
}
.hoverable:hover {
transition: box-shadow .25s;
transition: box-shadow 0.25s;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
......@@ -92,10 +94,9 @@ ul {
.divider {
height: 1px;
overflow: hidden;
background-color: color("grey", "lighten-2");
background-color: color('grey', 'lighten-2');
}
// Blockquote
blockquote {
......@@ -138,11 +139,9 @@ video.responsive-video {
height: auto;
}
// Pagination
.pagination {
li {
display: inline-block;
font-size: 1.2rem;
......@@ -151,11 +150,17 @@ video.responsive-video {
border-radius: 2px;
text-align: center;
a { color: #444; }
a {
color: #444;
}
&.active a { color: #fff; }
&.active a {
color: #fff;
}
&.active { background-color: $primary-color; }
&.active {
background-color: $primary-color;
}
&.disabled a {
cursor: default;
......@@ -168,7 +173,6 @@ video.responsive-video {
}
}
li.pages ul li {
display: inline-block;
float: none;
......@@ -194,10 +198,11 @@ video.responsive-video {
// Breadcrumbs
.breadcrumb {
font-size: 18px;
color: rgba(255,255,255, .7);
color: rgba(255, 255, 255, 0.7);
i,
[class^="mdi-"], [class*="mdi-"],
[class^='mdi-'],
[class*='mdi-'],
i.material-icons {
display: inline-block;
float: left;
......@@ -206,7 +211,7 @@ video.responsive-video {
&:before {
content: '\E5CC';
color: rgba(255,255,255, .7);
color: rgba(255, 255, 255, 0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
......@@ -226,7 +231,6 @@ video.responsive-video {
}
}
// Parallax
.parallax-container {
position: relative;
......@@ -249,14 +253,15 @@ video.responsive-video {
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transform: translateX(-50%);
}
}
// Pushpin
.pin-top, .pin-bottom {
.pin-top,
.pin-bottom {
position: relative;
}
.pinned {
......@@ -276,7 +281,6 @@ ul.staggered-list li {
transform-origin: 0 50%;
}
/*********************
Media Query Classes
**********************/
......@@ -326,7 +330,6 @@ ul.staggered-list li {
}
}
// Center text on mobile
.center-on-small-only {
@media #{$small-and-down} {
......@@ -344,19 +347,21 @@ footer.page-footer {
overflow: hidden;
height: 50px;
line-height: 50px;
color: rgba(255,255,255,.8);
background-color: rgba(51,51,51,.08);
color: rgba(255, 255, 255, 0.8);
background-color: rgba(51, 51, 51, 0.08);
@extend .light;
}
}
// Tables
table, th, td {
border: none;
table,
th,
td {
border: none;
}
table {
width:100%;
width: 100%;
display: table;
&.bordered > thead > tr,
......@@ -375,26 +380,26 @@ table {
}
&.highlight > tbody > tr {
transition: background-color .25s ease;
transition: background-color 0.25s ease;
&:hover {
background-color: $table-striped-color;
}
}
&.centered {
thead tr th, tbody tr td {
thead tr th,
tbody tr td {
text-align: center;
}
}
}
thead {
border-bottom: 1px solid $table-border-color;
}
td, th{
td,
th {
padding: 15px 5px;
display: table-cell;
text-align: left;
......@@ -404,7 +409,6 @@ td, th{
// Responsive Table
@media #{$medium-and-down} {
table.responsive-table {
width: 100%;
border-collapse: collapse;
......@@ -418,7 +422,9 @@ td, th{
vertical-align: top;
}
th { text-align: left; }
th {
text-align: left;
}
thead {
display: block;
float: left;
......@@ -428,7 +434,7 @@ td, th{
padding: 0 10px 0 0;
th::before {
content: "\00a0";
content: '\00a0';
}
}
}
......@@ -453,7 +459,9 @@ td, th{
min-height: 1.25em;
text-align: left;
}
tr { padding: 0 10px; }
tr {
padding: 0 10px;
}
/* sort out borders */
thead {
......@@ -462,17 +470,25 @@ td, th{
}
&.bordered {
th { border-bottom: 0; border-left: 0; }
td { border-left: 0; border-right: 0; border-bottom: 0; }
tr { border: 0; }
tbody tr { border-right: 1px solid $table-border-color; }
th {
border-bottom: 0;
border-left: 0;
}
td {
border-left: 0;
border-right: 0;
border-bottom: 0;
}
tr {
border: 0;
}
tbody tr {
border-right: 1px solid $table-border-color;
}
}
}
}
// Collections
.collection {
margin: $element-top-margin 0 $element-bottom-margin 0;
......@@ -511,7 +527,6 @@ td, th{
text-align: center;
}
.title {
font-size: 16px;
}
......@@ -525,10 +540,8 @@ td, th{
top: 16px;
right: 16px;
}
}
&:last-child {
border-bottom: none;
}
......@@ -542,9 +555,9 @@ td, th{
}
}
}
a.collection-item{
a.collection-item {
display: block;
transition: .25s;
transition: 0.25s;
color: $collection-link-color;
&:not(.active) {
&:hover {
......@@ -566,7 +579,6 @@ td, th{
padding-left: 72px;
}
}
}
// Made less specific to allow easier overriding
.secondary-content {
......@@ -578,8 +590,6 @@ td, th{
border: none;
}
// Badges
span.badge {
min-width: 3rem;
......@@ -600,7 +610,7 @@ span.badge {
border-radius: 2px;
}
&.new:after {
content: " new";
content: ' new';
}
}
nav ul a span.badge {
......@@ -611,30 +621,32 @@ nav ul a span.badge {
// Responsive Videos
.video-container {
// position: relative;
// padding-bottom: 56.25%;
// height: 0;
// overflow: hidden;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// position: relative;
// padding-bottom: 56.25%;
// height: 0;
// overflow: hidden;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// Progress Bar
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: lighten($progress-bar-color, 40%);
border-radius: 2px;
margin: $element-top-margin 0 $element-bottom-margin 0;
overflow: hidden;
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: lighten($progress-bar-color, 40%);
border-radius: 2px;
margin: $element-top-margin 0 $element-bottom-margin 0;
overflow: hidden;
.determinate {
position: absolute;
background-color: inherit;
......@@ -642,7 +654,7 @@ nav ul a span.badge {
left: 0;
bottom: 0;
background-color: $progress-bar-color;
transition: width .3s linear;
transition: width 0.3s linear;
}
.indeterminate {
background-color: $progress-bar-color;
......@@ -651,58 +663,58 @@ nav ul a span.badge {
position: absolute;
background-color: inherit;
top: 0;
left:0;
left: 0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
infinite;
}
&:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left:0;
left: 0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
infinite;
animation-delay: 1.15s;
}
}
}
@keyframes indeterminate {
0% {
left: -35%;
right:100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
/*******************
Utility Classes
*******************/
......@@ -716,9 +728,10 @@ nav ul a span.badge {
text-align: left;
}
.right-align {
text-align: right
text-align: right;
}
.center, .center-align {
.center,
.center-align {
text-align: center;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment