KEYCLOAK-1362 - button CSS classes are defined by theme properties

This commit is contained in:
Vlastimil Elias 2015-06-02 10:47:13 +02:00
parent d042f6e2c9
commit 43799fd315
15 changed files with 40 additions and 22 deletions

View file

@ -104,8 +104,8 @@
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit"> <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
<div class=""> <div class="">
<#if url.referrerURI??><a href="${url.referrerURI}">${msg("backToApplication")}/a></#if> <#if url.referrerURI??><a href="${url.referrerURI}">${msg("backToApplication")}/a></#if>
<button type="submit" class="btn btn-primary btn-lg" name="submitAction" value="Save">${msg("doSave")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
<button type="submit" class="btn btn-default btn-lg" name="submitAction" value="Cancel">${msg("doCancel")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -77,7 +77,7 @@
<td> <td>
<#if application.client.consentRequired> <#if application.client.consentRequired>
<button type='submit' class='btn btn-primary' id='revoke-${application.client.clientId}' name='clientId' value="${application.client.id}">${msg("revoke")}</button> <button type='submit' class='${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!}' id='revoke-${application.client.clientId}' name='clientId' value="${application.client.id}">${msg("revoke")}</button>
</#if> </#if>
</td> </td>
</tr> </tr>

View file

@ -19,10 +19,10 @@
<div class="col-sm-5 col-md-5"> <div class="col-sm-5 col-md-5">
<#if identity.connected> <#if identity.connected>
<#if federatedIdentity.removeLinkPossible> <#if federatedIdentity.removeLinkPossible>
<a href="${identity.actionUrl}" type="submit" id="remove-${identity.providerId!}" class="btn btn-primary btn-lg">${msg("doRemove")}</a> <a href="${identity.actionUrl}" type="submit" id="remove-${identity.providerId!}" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}">${msg("doRemove")}</a>
</#if> </#if>
<#else> <#else>
<a href="${identity.actionUrl}" type="submit" id="add-${identity.providerId!}" class="btn btn-primary btn-lg">${msg("doAdd")}</a> <a href="${identity.actionUrl}" type="submit" id="add-${identity.providerId!}" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}">${msg("doAdd")}</a>
</#if> </#if>
</div> </div>
</div> </div>

View file

@ -48,8 +48,8 @@
<div class="form-group"> <div class="form-group">
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit"> <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
<div class=""> <div class="">
<button type="submit" class="btn btn-primary btn-lg" name="submitAction" value="Save">${msg("doSave")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
<button type="submit" class="btn btn-default btn-lg" name="submitAction" value="Cancel">${msg("doCancel")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -56,8 +56,8 @@
<div class="form-group"> <div class="form-group">
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit"> <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
<div class=""> <div class="">
<button type="submit" class="btn btn-primary btn-lg" name="submitAction" value="Save">${msg("doSave")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
<button type="submit" class="btn btn-default btn-lg" name="submitAction" value="Cancel">${msg("doCancel")}</button> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -23,7 +23,7 @@
</div> </div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input class="btn btn-primary btn-lg" type="submit" value="${msg("doSubmit")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
</div> </div>
</div> </div>
</form> </form>

View file

@ -54,8 +54,8 @@
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!}"> <div class="${properties.kcFormButtonsWrapperClass!}">
<input class="btn btn-primary btn-lg" name="accept" id="kc-login" type="submit" value="${msg("doYes")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="accept" id="kc-login" type="submit" value="${msg("doYes")}"/>
<input class="btn btn-default btn-lg" name="cancel" id="kc-cancel" type="submit" value="${msg("doNo")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doNo")}"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -23,7 +23,7 @@
</div> </div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input class="btn btn-primary btn-lg" type="submit" value="${msg("doSubmit")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
</div> </div>
</div> </div>
</form> </form>

View file

@ -27,8 +27,8 @@
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!}"> <div class="${properties.kcFormButtonsWrapperClass!}">
<input class="btn btn-primary btn-lg" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
<input class="btn btn-default btn-lg" name="cancel" id="kc-cancel" type="submit" value="${msg("doCancel")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doCancel")}"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -31,7 +31,7 @@
</div> </div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input class="btn btn-primary btn-lg" type="submit" value="${msg("doSubmit")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
</div> </div>
</div> </div>
</form> </form>

View file

@ -40,7 +40,7 @@
</div> </div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input class="btn btn-primary btn-lg" type="submit" value="${msg("doSubmit")}" /> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
</div> </div>
</div> </div>
</form> </form>

View file

@ -49,8 +49,8 @@
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!}"> <div class="${properties.kcFormButtonsWrapperClass!}">
<input class="btn btn-primary btn-lg" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
<input class="btn btn-default btn-lg" name="cancel" id="kc-cancel" type="submit" value="${msg("doCancel")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doCancel")}"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -116,7 +116,7 @@
</div> </div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input class="btn btn-primary btn-lg" type="submit" value="${msg("doRegister")}"/> <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
</div> </div>
</div> </div>
</form> </form>

View file

@ -2,3 +2,12 @@ parent=base
import=common/keycloak import=common/keycloak
styles=lib/patternfly/css/patternfly.css css/account.css styles=lib/patternfly/css/patternfly.css css/account.css
##### css classes for form buttons
# main class used for all buttons
kcButtonClass=btn
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
kcButtonPrimaryClass=btn-primary
kcButtonDefaultClass=btn-default
# classes defining size of the button
kcButtonLargeClass=btn-lg

View file

@ -28,3 +28,12 @@ kcFormButtonsClass=col-xs-8 col-sm-7 col-md-4 col-lg-4 submit
kcTextareaClass=form-control kcTextareaClass=form-control
kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-6 details kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-6 details
##### css classes for form buttons
# main class used for all buttons
kcButtonClass=btn
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
kcButtonPrimaryClass=btn-primary
kcButtonDefaultClass=btn-default
# classes defining size of the button
kcButtonLargeClass=btn-lg