mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 09:18:48 +02:00
26faa8f1f6
Summary: Resonable sketchout of a "Badge" UI for Profiles/Projects/Achievements.
Test Plan:
weee
{F602729}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T7992
Differential Revision: https://secure.phabricator.com/D13615
159 lines
3.1 KiB
CSS
159 lines
3.1 KiB
CSS
/**
|
|
* @provides phui-badge-view-css
|
|
*/
|
|
|
|
.phui-badge-flex-view {
|
|
padding: 12px 4px 8px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-badge-flex-item {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.phui-badge-view {
|
|
display: inline-block;
|
|
position: relative;
|
|
perspective: 512px;
|
|
}
|
|
|
|
.phui-badge-card-container {
|
|
transform-style: preserve-3d;
|
|
-webkit-transform-style: preserve-3d;
|
|
|
|
transition: transform 0.5s;
|
|
-webkit-transition: -webkit-transform 0.5s;
|
|
|
|
transform-origin: right center;
|
|
-webkit-transform-origin: right center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.phui-badge-card {
|
|
cursor: pointer;
|
|
padding: 12px;
|
|
height: 180px;
|
|
width: 128px;
|
|
border: 1px solid {$lightgreyborder};
|
|
background-color: {$lightbluebackground};
|
|
}
|
|
|
|
.card-flipped .phui-badge-card-container {
|
|
transform: translateX( -100% ) rotateY( -180deg );
|
|
-webkit-transform: translateX( -100% ) rotateY( -180deg );
|
|
}
|
|
|
|
.phui-badge-card-front,
|
|
.phui-badge-card-back {
|
|
display: block;
|
|
position: absolute;
|
|
width: 128px;
|
|
height: 100%;
|
|
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
}
|
|
|
|
|
|
/* Firefox Fix */
|
|
.phui-badge-card-front {
|
|
transform: rotateY(0deg);
|
|
-webkit-trasform: rotateY(0deg);
|
|
}
|
|
|
|
.phui-badge-front-view,
|
|
.phui-badge-back-view {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.phui-badge-inner-front,
|
|
.phui-badge-inner-back {
|
|
display: table-row;
|
|
}
|
|
|
|
.phui-badge-illustration {
|
|
background-color: #fff;
|
|
box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,.1);
|
|
text-align: center;
|
|
height: 100px;
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
}
|
|
|
|
.phui-badge-illustration .phui-icon-view {
|
|
font-size: 48px;
|
|
height: 48px;
|
|
width: 48px;
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.phui-badge-view-information {
|
|
display: table-cell;
|
|
text-align: center;
|
|
color: {$greytext};
|
|
}
|
|
|
|
.phui-badge-view-header {
|
|
color: {$darkgreytext};
|
|
font-weight: bold;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
|
|
.phui-badge-quality {
|
|
padding: 4px 0;
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phui-badge-view-subhead {
|
|
color: {$lightgreytext};
|
|
font-size: {$smallerfontsize};
|
|
}
|
|
|
|
.phui-badge-card-back {
|
|
transform: rotateY( 180deg );
|
|
-webkit-transform: rotateY( 180deg );
|
|
}
|
|
|
|
/** Quality Levels ***********************************************************/
|
|
|
|
.phui-badge-view-grey .phui-badge-card {
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
.phui-badge-view-white .phui-badge-card {
|
|
background-color: {$lightbluebackground};
|
|
}
|
|
|
|
.phui-badge-view-green .phui-badge-card {
|
|
background-color: {$sh-greenbackground};
|
|
border-color: {$sh-lightgreenborder};
|
|
}
|
|
|
|
.phui-badge-view-blue .phui-badge-card {
|
|
background-color: {$sh-bluebackground};
|
|
border-color: {$sh-lightblueborder};
|
|
}
|
|
|
|
.phui-badge-view-indigo .phui-badge-card {
|
|
background-color: {$sh-indigobackground};
|
|
border-color: {$sh-lightindigoborder};
|
|
}
|
|
|
|
.phui-badge-view-orange .phui-badge-card {
|
|
background-color: {$sh-orangebackground};
|
|
border-color: {$sh-lightorangeborder};
|
|
}
|
|
|
|
.phui-badge-view-yellow .phui-badge-card {
|
|
background-color: {$sh-yellowbackground};
|
|
border-color: {$sh-lightyellowborder};
|
|
}
|