refactor (card.css): unnötiges CSS entfernt
This commit is contained in:
parent
c20b115faf
commit
8b86114998
@ -122,174 +122,4 @@
|
||||
opacity: 0.6;
|
||||
letter-spacing: 0.0625rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dd-card-btn {
|
||||
background-color: #2A265F;
|
||||
border: 0;
|
||||
border-radius: 3.125rem;
|
||||
box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.5625rem;
|
||||
position: absolute;
|
||||
bottom: 1.875rem;
|
||||
right: 1.875rem;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
|
||||
/* SOCIAL PANEL CSS */
|
||||
.social-panel-container {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 5rem;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.social-panel-container.visible {
|
||||
transform: translateX(-0.625rem);
|
||||
}
|
||||
|
||||
.social-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
|
||||
border: 5px solid #001F61;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Muli';
|
||||
position: relative;
|
||||
height: 169px;
|
||||
width: 370px;
|
||||
max-width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.social-panel button.close-btn {
|
||||
border: 0;
|
||||
color: #97A5CE;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.social-panel button.close-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.social-panel p {
|
||||
background-color: #001F61;
|
||||
border-radius: 0 0 10px 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 2px 17px 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 235px;
|
||||
}
|
||||
|
||||
.social-panel p i {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.social-panel p a {
|
||||
color: #FF7500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-panel h4 {
|
||||
margin: 20px 0;
|
||||
color: #97A5CE;
|
||||
font-family: 'Muli';
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.social-panel ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.social-panel ul li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.social-panel ul li a {
|
||||
border: 1px solid #DCE1F2;
|
||||
border-radius: 50%;
|
||||
color: #001F61;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-panel ul li a:hover {
|
||||
border-color: #FF6A00;
|
||||
box-shadow: 0 9px 12px -9px #FF6A00;
|
||||
}
|
||||
|
||||
.floating-btn {
|
||||
border-radius: 26.5px;
|
||||
background-color: #001F61;
|
||||
border: 1px solid #001F61;
|
||||
box-shadow: 0 16px 22px -17px #03153B;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding: 12px 20px;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.floating-btn:hover {
|
||||
background-color: #ffffff;
|
||||
color: #001F61;
|
||||
}
|
||||
|
||||
.floating-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.floating-text {
|
||||
background-color: #001F61;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: #fff;
|
||||
font-family: 'Muli';
|
||||
padding: 7px 15px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
.social-panel-container.visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.floating-btn {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@ -1 +1 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:100%;margin:1rem 0 0 0}.app-logo{width:5rem;margin:1rem 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}}
|
||||
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:100%;margin:1rem 0 0 0}.app-logo{width:5rem;margin:1rem 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}
|
||||
Loading…
x
Reference in New Issue
Block a user