HTMLテンプレートやBootstrapを追加
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
.card {
|
||||
&.card-background {
|
||||
align-items: $card-bg-align-items;
|
||||
|
||||
.full-background {
|
||||
background-position: $card-full-bg-bg-position;
|
||||
background-size: $card-full-bg-bg-size;
|
||||
margin-bottom: $card-full-bg-mb;
|
||||
width: $card-full-bg-width;
|
||||
height: $card-full-bg-height;
|
||||
position: $card-full-bg-position;
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: $white;
|
||||
position: $card-bg-body-position;
|
||||
z-index: $card-bg-body-z-index;
|
||||
|
||||
.content-center,
|
||||
.content-left {
|
||||
min-height: $card-bg-content-min-height;
|
||||
max-width: $card-bg-content-max-width;
|
||||
padding-top: $card-bg-content-pt;
|
||||
padding-bottom: $card-bg-content-pb;
|
||||
}
|
||||
.content-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.body-left {
|
||||
width: $card-bg-body-left-width;
|
||||
}
|
||||
|
||||
.author {
|
||||
.name {
|
||||
span,
|
||||
.stats {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: $card-bg-filter-position;
|
||||
top: $card-bg-filter-top;
|
||||
bottom: $card-bg-filter-bottom;
|
||||
left: $card-bg-filter-left;
|
||||
height: $card-bg-filter-height;
|
||||
width: $card-bg-filter-width;
|
||||
z-index: $card-bg-filter-z-index;
|
||||
display: $card-bg-filter-display;
|
||||
content: $card-bg-filter-content;
|
||||
background: $card-bg-filter-bg;
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
@each $name, $val in $theme-gradient-colors {
|
||||
&.card-background-mask-#{$name} {
|
||||
&:before {
|
||||
background: $card-bg-filter-mask-bg;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include gradient-directional(nth($val, 1) 0%, nth($val, -1) 100%, $deg: 195deg);
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-category {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
margin-top: $card-bg-description-margin;
|
||||
margin-bottom: $card-bg-description-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
148
app/assets/scss/material-dashboard/cards/card-rotate.scss
Normal file
148
app/assets/scss/material-dashboard/cards/card-rotate.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
.rotating-card-container {
|
||||
@include perspective(800px);
|
||||
|
||||
.card-rotate {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@include transitions(0.8s, cubic-bezier(0.34, 1.45, 0.7, 1));
|
||||
@include transform-style(preserve-3d);
|
||||
position: relative;
|
||||
|
||||
.back,
|
||||
.front {
|
||||
@include backface-visibility(hidden);
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
top: 0;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: -o-flex;
|
||||
display: flex;
|
||||
-moz-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
-o-flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
.card-body {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: -o-flex;
|
||||
display: flex;
|
||||
-moz-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
-o-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
border-radius: $border-radius-lg;
|
||||
background-image: $text-gradient-bg-primary;
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
|
||||
.front {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back {
|
||||
@include rotateY-180();
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.back-background {
|
||||
.card-body {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.manual-flip):hover {
|
||||
.card {
|
||||
@include rotateY-180();
|
||||
}
|
||||
}
|
||||
|
||||
&.hover.manual-flip {
|
||||
.card {
|
||||
@include rotateY-180();
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile & {
|
||||
.front {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-background {
|
||||
.card-body {
|
||||
min-height: auto;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix bug for IE */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.rotating-card-container .card .back,
|
||||
.rotating-card-container .card .front {
|
||||
-ms-backface-visibility: visible;
|
||||
backface-visibility: visible;
|
||||
}
|
||||
|
||||
.rotating-card-container .card .back {
|
||||
visibility: hidden;
|
||||
transition: visibility 0.3s cubic-bezier(0.34, 1.45, 0.7, 1);
|
||||
}
|
||||
|
||||
.rotating-card-container .card .front {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rotating-card-container.manual-flip.hover .card .back,
|
||||
.rotating-card-container:not(.manual-flip):hover .card .back {
|
||||
z-index: 5;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user