More languages
More actions
(width is controlled as a parameter) |
(going to need a new class instead of targeting .tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
.tpl-button { | .tpl-button { | ||
display: inline-block; | display: inline-block; | ||
padding: 10px; | padding: 4px 10px; | ||
width:100%; | |||
height:40px; | |||
text-align: center; | text-align: center; | ||
border-radius: 8px; | border-radius: 8px; | ||
Line 8: | Line 10: | ||
cursor: pointer; | cursor: pointer; | ||
line-height:1; | line-height:1; | ||
text-decoration:none; | |||
} | |||
.tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{ | |||
height:40px; | |||
width:100%; | |||
} | |||
.tpl-button-center > a,.tpl-button-left > a,.tpl-button-right > a{ | |||
height:100%; | |||
} | } | ||
Line 24: | Line 36: | ||
display: flex; | display: flex; | ||
justify-content: flex-end; | justify-content: flex-end; | ||
} | } | ||
Line 33: | Line 41: | ||
.tpl-button-red { | .tpl-button-red { | ||
background-color:#b50014; /* taken from Citizen.css : --color-red-3*/ | background-color:#b50014; /* taken from Citizen.css : --color-red-3*/ | ||
color:#fff; | |||
} | } | ||
.tpl-button-red:hover{ | .tpl-button-red:hover{ | ||
background-color:#c33242; /* --color-red-light-3 */ | background-color:#c33242; /* --color-red-light-3 from Citizen.css */ | ||
} | } | ||
.tpl-button-blue { | .tpl-button-blue { | ||
background-color: #143fbf; | background-color: #143fbf; | ||
color:#fff; | |||
} | } | ||
.tpl-button-green { | .tpl-button-green { | ||
background-color: #52CF44; | background-color: #52CF44; | ||
color:#333; | |||
} | } | ||
.tpl-button-yellow { | .tpl-button-yellow { | ||
background-color: #FFDA1F; | background-color: #FFDA1F; | ||
color:#333; | |||
} | } | ||
Line 65: | Line 69: | ||
@media screen and (max-width:768px){ | @media screen and (max-width:768px){ | ||
.tpl-button{ | .tpl-button{ | ||
width: | width:75%!important; | ||
} | } | ||
.tpl-button-left,.tpl-button-center,.tpl-button-right{ | |||
display: flex; | |||
justify-content: center; | |||
} | |||
} | } |
Revision as of 21:48, 12 May 2024
/* Button.css */
.tpl-button {
display: inline-block;
padding: 4px 10px;
width:100%;
height:40px;
text-align: center;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
line-height:1;
text-decoration:none;
}
.tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{
height:40px;
width:100%;
}
.tpl-button-center > a,.tpl-button-left > a,.tpl-button-right > a{
height:100%;
}
/* Choose where to align the button (left, right, center) */
.tpl-button-left{
display: flex;
justify-content: flex-start;
}
.tpl-button-center{
display: flex;
justify-content: center;
}
.tpl-button-right{
display: flex;
justify-content: flex-end;
}
/*available colors*/
.tpl-button-red {
background-color:#b50014; /* taken from Citizen.css : --color-red-3*/
color:#fff;
}
.tpl-button-red:hover{
background-color:#c33242; /* --color-red-light-3 from Citizen.css */
}
.tpl-button-blue {
background-color: #143fbf;
color:#fff;
}
.tpl-button-green {
background-color: #52CF44;
color:#333;
}
.tpl-button-yellow {
background-color: #FFDA1F;
color:#333;
}
.tpl-button:hover{ /*colors other than red, which we use for Citizen, are automatically recalculated on a filter value*/
filter:brightness(110%) saturate(100%);
}
@media screen and (max-width:768px){
.tpl-button{
width:75%!important;
}
.tpl-button-left,.tpl-button-center,.tpl-button-right{
display: flex;
justify-content: center;
}
}