parent
435a78364f
commit
53ea60b8d5
10 changed files with 19 additions and 467 deletions
|
@ -454,7 +454,7 @@ For the available versions, take a look at the directory [tests/other/server-con
|
|||
|
||||
|
||||
## Admin Console UI tests
|
||||
The UI tests are real-life, UI focused integration tests. Hence they do not support the default HtmlUnit browser. Only the following real-life browsers are supported: Mozilla Firefox, Google Chrome and Internet Explorer. For details on how to run the tests with these browsers, please refer to [Different Browsers](#different-browsers) chapter.
|
||||
The UI tests are real-life, UI focused integration tests. Hence they do not support the default HtmlUnit browser. Only the following real-life browsers are supported: Mozilla Firefox and Google Chrome. For details on how to run the tests with these browsers, please refer to [Different Browsers](#different-browsers) chapter.
|
||||
|
||||
The UI tests are focused on the Admin Console. They are placed in the `console` module and are disabled by default.
|
||||
|
||||
|
@ -598,13 +598,6 @@ Although technically they can be run with almost every test in the testsuite, th
|
|||
* **Driver download required:** [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) that corresponds with your version of the browser
|
||||
* **Run with:** `-Dbrowser=chrome -Dwebdriver.chrome.driver=path/to/chromedriver`
|
||||
|
||||
#### Internet Explorer
|
||||
* **Supported test modules:** `console`, `base-ui`
|
||||
* **Supported version:** 11
|
||||
* **Driver download required:** [Internet Explorer Driver Server](http://www.seleniumhq.org/download/); recommended version [3.5.1 32-bit](http://selenium-release.storage.googleapis.com/3.5/IEDriverServer_Win32_3.5.1.zip)
|
||||
* **Run with:** `-Dbrowser=internetExplorer -Dwebdriver.ie.driver=path/to/IEDriverServer.exe -Dauth.server.ssl.required=false`
|
||||
Note: We currently do not support SSL in IE.
|
||||
|
||||
#### Apple Safari
|
||||
* **Supported test modules:** `base-ui`
|
||||
* **Supported version:** latest stable
|
||||
|
@ -619,7 +612,7 @@ Note: We currently do not support SSL in IE.
|
|||
|
||||
#### Automatic driver downloads
|
||||
You can rely on automatic driver downloads which is provided by [Arquillian Drone](http://arquillian.org/arquillian-extension-drone/#_automatic_download). To do so just omit the `-Dwebdriver.{browser}.driver` CLI argument when running the tests.
|
||||
By default latest driver version is always downloaded. To download a specific version, add `-DfirefoxDriverVersion`, `-DchromeDriverVersion` or `-DieDriverVersion` CLI argument.
|
||||
By default latest driver version is always downloaded. To download a specific version, add `-DfirefoxDriverVersion` or `-DchromeDriverVersion` CLI argument.
|
||||
|
||||
#### Mobile browsers
|
||||
The support for testing with the mobile browsers is implemented using the [Appium](http://appium.io/) project.
|
||||
|
|
|
@ -8,7 +8,6 @@ import org.jboss.logging.Logger;
|
|||
import org.openqa.selenium.By;
|
||||
import org.openqa.selenium.WebDriver;
|
||||
import org.openqa.selenium.WebElement;
|
||||
import org.openqa.selenium.ie.InternetExplorerDriver;
|
||||
import org.openqa.selenium.interactions.Actions;
|
||||
import org.openqa.selenium.support.FindBy;
|
||||
|
||||
|
@ -43,12 +42,9 @@ public class LocaleDropdown {
|
|||
// open the menu
|
||||
if (driver instanceof IOSDriver) { // TODO: Fix this! It's a very, very, ... very nasty hack for Safari on iOS - see KEYCLOAK-7947
|
||||
((IOSDriver) driver).executeScript("arguments[0].setAttribute('style', 'display: block')", dropDownMenu);
|
||||
}
|
||||
else if (driver instanceof AndroidDriver || driver instanceof InternetExplorerDriver) { // Android needs to tap (no cursor)
|
||||
// and IE has some bug so needs to click as well (instead of moving cursor)
|
||||
} else if (driver instanceof AndroidDriver) { // Android needs to tap (no cursor)
|
||||
currentLocaleLink.click();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
Actions actions = new Actions(driver);
|
||||
log.info("Moving mouse cursor to the localization menu");
|
||||
actions.moveToElement(currentLocaleLink, -10, 0)
|
||||
|
|
|
@ -61,9 +61,6 @@ public class KeycloakWebDriverConfigurator {
|
|||
}
|
||||
|
||||
private void acceptAllSSLCerts(WebDriverConfiguration webDriverCfg, DesiredCapabilities capabilitiesToAdd) {
|
||||
if (webDriverCfg.getBrowser().equals("internetexplorer")) {
|
||||
return; // IE not supported
|
||||
}
|
||||
capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
|
||||
capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_INSECURE_CERTS, true);
|
||||
}
|
||||
|
|
|
@ -17,9 +17,7 @@
|
|||
package org.keycloak.testsuite.page;
|
||||
|
||||
import org.keycloak.testsuite.util.WaitUtils;
|
||||
import org.openqa.selenium.WebDriverException;
|
||||
import org.openqa.selenium.WebElement;
|
||||
import org.openqa.selenium.ie.InternetExplorerDriver;
|
||||
import org.openqa.selenium.support.FindBy;
|
||||
|
||||
import static org.junit.Assert.assertEquals;
|
||||
|
@ -87,20 +85,11 @@ public class PatternFlyClosableAlert extends AbstractPatternFlyAlert {
|
|||
}
|
||||
|
||||
public void close() {
|
||||
try {
|
||||
closeButton.click();
|
||||
WaitUtils.pause(500); // Sometimes, when a test is too fast,
|
||||
// one of the consecutive alerts is not displayed;
|
||||
// to prevent this we need to slow down a bit
|
||||
}
|
||||
catch (WebDriverException e) {
|
||||
if (driver instanceof InternetExplorerDriver) {
|
||||
log.warn("Failed to close the alert; test is probably too slow and alert has already closed itself");
|
||||
}
|
||||
else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
closeButton.click();
|
||||
WaitUtils.pause(500);
|
||||
// Sometimes, when a test is too fast,
|
||||
// one of the consecutive alerts is not displayed;
|
||||
// to prevent this we need to slow down a bit
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -5,7 +5,6 @@ import org.jboss.logging.Logger;
|
|||
import org.keycloak.common.util.KeycloakUriBuilder;
|
||||
import org.openqa.selenium.TimeoutException;
|
||||
import org.openqa.selenium.WebDriver;
|
||||
import org.openqa.selenium.ie.InternetExplorerDriver;
|
||||
import org.openqa.selenium.support.ui.ExpectedCondition;
|
||||
import org.openqa.selenium.support.ui.WebDriverWait;
|
||||
|
||||
|
@ -29,22 +28,10 @@ public final class URLUtils {
|
|||
private static Logger log = Logger.getLogger(URLUtils.class);
|
||||
|
||||
public static void navigateToUri(String uri) {
|
||||
navigateToUri(uri, true);
|
||||
}
|
||||
|
||||
private static void navigateToUri(String uri, boolean enableIEWorkaround) {
|
||||
WebDriver driver = getCurrentDriver();
|
||||
|
||||
log.info("starting navigation");
|
||||
|
||||
// In IE, sometime the current URL is not correct; one of the indicators is that the target URL
|
||||
// equals the current URL
|
||||
if (driver instanceof InternetExplorerDriver && driver.getCurrentUrl().equals(uri)) {
|
||||
log.info("IE workaround: target URL equals current URL - refreshing the page");
|
||||
driver.navigate().refresh();
|
||||
waitForPageToLoad();
|
||||
}
|
||||
|
||||
log.info("current URL: " + driver.getCurrentUrl());
|
||||
log.info("navigating to " + uri);
|
||||
if (driver.getCurrentUrl().equals(uri)) { // Some browsers won't do anything if navigating to the same URL; this "fixes" it
|
||||
|
@ -58,19 +45,7 @@ public final class URLUtils {
|
|||
waitForPageToLoad();
|
||||
|
||||
log.info("new current URL: " + driver.getCurrentUrl());
|
||||
|
||||
// In IE, after deleting the cookies for test realm, the first loaded page in master's admin console
|
||||
// contains invalid URL (misses #/realms/[realm] or contains state and code fragments), although the
|
||||
// address bar states the correct URL; seemingly this is another bug in IE WebDriver)
|
||||
if (enableIEWorkaround && driver instanceof InternetExplorerDriver
|
||||
&& (driver.getCurrentUrl().matches("^[^#]+/#state=[^#/&]+&code=[^#/&]+$")
|
||||
|| driver.getCurrentUrl().matches("^.+/auth/admin/[^/]+/console/$"))) {
|
||||
log.info("IE workaround: reloading the page after deleting the cookies...");
|
||||
navigateToUri(uri, false);
|
||||
}
|
||||
else {
|
||||
log.info("navigation complete");
|
||||
}
|
||||
log.info("navigation complete");
|
||||
}
|
||||
|
||||
public static boolean currentUrlEquals(String url) {
|
||||
|
@ -109,27 +84,14 @@ public final class URLUtils {
|
|||
return urlCheck(urlMatches(regex));
|
||||
}
|
||||
|
||||
private static boolean urlCheck(ExpectedCondition condition) {
|
||||
return urlCheck(condition, false);
|
||||
}
|
||||
|
||||
@SuppressWarnings("unchecked")
|
||||
private static boolean urlCheck(ExpectedCondition condition, boolean secondTry) {
|
||||
private static boolean urlCheck(ExpectedCondition condition) {
|
||||
WebDriver driver = getCurrentDriver();
|
||||
|
||||
try {
|
||||
(new WebDriverWait(driver, 5, 100)).until(condition);
|
||||
}
|
||||
catch (TimeoutException e) {
|
||||
if (driver instanceof InternetExplorerDriver && !secondTry) {
|
||||
// IE WebDriver has sometimes invalid current URL
|
||||
log.info("IE workaround: checking URL failed at first attempt - refreshing the page and trying one more time...");
|
||||
driver.navigate().refresh();
|
||||
urlCheck(condition, true);
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
} catch (TimeoutException e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
|
|
@ -45,10 +45,6 @@
|
|||
<property name="chromeArguments">${chromeArguments}</property>
|
||||
<property name="chromeDriverVersion">${chromeDriverVersion}</property>
|
||||
|
||||
<!-- internet explorer -->
|
||||
<property name="ieDriverArch">${ieDriverArch}</property>
|
||||
<property name="ieDriverVersion">${ieDriverVersion}</property>
|
||||
|
||||
<!-- appium -->
|
||||
<property name="appium.platformName">${appium.platformName}</property>
|
||||
<property name="appium.deviceName">${appium.deviceName}</property>
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<properties>
|
||||
<keycloak.theme.dir>${auth.server.home}/themes</keycloak.theme.dir>
|
||||
<supportedBrowsers>firefox|chrome|internetExplorer|safari|chromeHeadless|edge</supportedBrowsers>
|
||||
<supportedBrowsers>firefox|chrome|safari|chromeHeadless|edge</supportedBrowsers>
|
||||
</properties>
|
||||
|
||||
<build>
|
||||
|
|
|
@ -11,167 +11,28 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/*IE compatibility*/
|
||||
.pf-c-form-control {
|
||||
font-size: 14px;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
border-width: 1px;
|
||||
border-width: var(--pf-global--BorderWidth--sm);;
|
||||
border-color: #EDEDED #EDEDED #8A8D90 #EDEDED;
|
||||
border-color: var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--200) var(--pf-global--BorderColor--300);
|
||||
background-color: #FFFFFF;
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
height: 36px;
|
||||
height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
|
||||
padding: 5px 0.5rem;
|
||||
padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
|
||||
}
|
||||
|
||||
textarea.pf-c-form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pf-c-form-control:hover, .pf-c-form-control:focus {
|
||||
border-bottom-color: #0066CC;
|
||||
border-bottom-color: var(--pf-global--primary-color--100);
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-width: var(--pf-global--BorderWidth--md);
|
||||
}
|
||||
|
||||
.pf-c-form-control[aria-invalid="true"] {
|
||||
border-bottom-color: #C9190B;
|
||||
border-bottom-color: var(--pf-global--danger-color--100);
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-width: var(--pf-global--BorderWidth--md);
|
||||
}
|
||||
|
||||
.pf-c-check__label, .pf-c-radio__label {
|
||||
font-size: 14px;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline {
|
||||
margin-bottom: 0.5rem; /* default - IE compatibility */
|
||||
margin-bottom: var(--pf-global--spacer--sm);
|
||||
padding: 0.25rem;
|
||||
padding: var(--pf-global--spacer--xs);
|
||||
border: solid #ededed;
|
||||
border: solid var(--pf-global--BorderColor--300);
|
||||
border-width: 1px;
|
||||
border-width: var(--pf-c-alert--m-inline--BorderTopWidth) var(--pf-c-alert--m-inline--BorderRightWidth) var(--pf-c-alert--m-inline--BorderBottomWidth) var(--pf-c-alert--m-inline--BorderLeftWidth);
|
||||
display: -ms-flexbox;
|
||||
display: grid;
|
||||
-ms-grid-columns: max-content 1fr max-content;
|
||||
grid-template-columns:max-content 1fr max-content;
|
||||
grid-template-columns: var(--pf-c-alert--grid-template-columns);
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-rows: var(--pf-c-alert--grid-template-rows);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
top: var(--pf-c-alert--m-inline--before--Top);
|
||||
bottom: -1px;
|
||||
bottom: var(--pf-c-alert--m-inline--before--Bottom);
|
||||
left: 0;
|
||||
width: 3px;
|
||||
width: var(--pf-c-alert--m-inline--before--Width);
|
||||
content: "";
|
||||
background-color: #FFFFFF;
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline.pf-m-success::before {
|
||||
background-color: #92D400;
|
||||
background-color: var(--pf-global--success-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline.pf-m-danger::before {
|
||||
background-color: #C9190B;
|
||||
background-color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline.pf-m-warning::before {
|
||||
background-color: #F0AB00;
|
||||
background-color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline .pf-c-alert__icon {
|
||||
padding: 1rem 0.5rem 1rem 1rem;
|
||||
padding: var(--pf-c-alert--m-inline__icon--PaddingTop) var(--pf-c-alert--m-inline__icon--PaddingRight) var(--pf-c-alert--m-inline__icon--PaddingBottom) var(--pf-c-alert--m-inline__icon--PaddingLeft);
|
||||
font-size: 16px;
|
||||
font-size: var(--pf-c-alert--m-inline__icon--FontSize);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-success .pf-c-alert__icon {
|
||||
color: #92D400;
|
||||
color: var(--pf-global--success-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-success .pf-c-alert__title {
|
||||
color: #486B00;
|
||||
color: var(--pf-global--success-color--200);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-danger .pf-c-alert__icon {
|
||||
color: #C9190B;
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-danger .pf-c-alert__title {
|
||||
color: #A30000;
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-warning .pf-c-alert__icon {
|
||||
color: #F0AB00;
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-warning .pf-c-alert__title {
|
||||
color: #795600;
|
||||
color: var(--pf-global--warning-color--200);
|
||||
}
|
||||
|
||||
.pf-c-alert__title {
|
||||
font-size: 14px; /* default - IE compatibility */
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
padding: 5px 8px;
|
||||
padding: var(--pf-c-alert__title--PaddingTop) var(--pf-c-alert__title--PaddingRight) var(--pf-c-alert__title--PaddingBottom) var(--pf-c-alert__title--PaddingLeft);
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
}
|
||||
|
||||
.pf-c-button{
|
||||
padding:0.375rem 1rem;
|
||||
padding: var(--pf-global--spacer--form-element) var(--pf-global--spacer--md);
|
||||
p.instruction {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* default - IE compatibility */
|
||||
.pf-m-primary {
|
||||
color: #FFFFFF;
|
||||
background-color: #0066CC;
|
||||
background-color: var(--pf-global--primary-color--100);
|
||||
}
|
||||
|
||||
/* default - IE compatibility */
|
||||
.pf-m-primary:hover {
|
||||
background-color: #004080;
|
||||
background-color: var(--pf-global--primary-color--200);
|
||||
}
|
||||
|
||||
/* default - IE compatibility */
|
||||
.pf-c-button.pf-m-control {
|
||||
border: solid 1px;
|
||||
border: solid var(--pf-global--BorderWidth--sm);
|
||||
border-color: rgba(230, 230, 230, 0.5);
|
||||
}
|
||||
/*End of IE compatibility*/
|
||||
|
||||
h1#kc-page-title {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#kc-locale ul {
|
||||
background-color: #FFF;
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
display: none;
|
||||
top: 20px;
|
||||
|
@ -187,19 +48,14 @@ h1#kc-page-title {
|
|||
display:block;
|
||||
}
|
||||
|
||||
/* IE compatibility */
|
||||
#kc-locale-dropdown a {
|
||||
color: #6A6E73;
|
||||
color: var(--pf-global--Color--200);
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
/* IE compatibility */
|
||||
a#kc-current-locale-link::after {
|
||||
content: "\2c5";
|
||||
margin-left: 4px;
|
||||
margin-left: var(--pf-global--spacer--xs)
|
||||
}
|
||||
|
||||
|
@ -335,7 +191,6 @@ div.kc-logo-text span {
|
|||
}
|
||||
|
||||
.required {
|
||||
color: #A30000; /* default - IE compatibility */
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
|
@ -406,12 +261,10 @@ ul#kc-totp-supported-apps {
|
|||
}
|
||||
|
||||
.kc-social-gray {
|
||||
color: #737679; /* default - IE compatibility */
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
||||
.kc-social-item {
|
||||
margin-bottom: 0.5rem; /* default - IE compatibility */
|
||||
margin-bottom: var(--pf-global--spacer--sm);
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
|
@ -584,32 +437,6 @@ ul#kc-totp-supported-apps {
|
|||
width: 40%;
|
||||
}
|
||||
|
||||
/* Internet Explorer 11 compatibility workaround for select-authenticator screen */
|
||||
@media all and (-ms-high-contrast: none),
|
||||
(-ms-high-contrast: active) {
|
||||
.select-auth-box-parent {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-auth-box-headline {
|
||||
font-size: 16px;
|
||||
color: #06c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.select-auth-box-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pf-l-stack {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
/* End of IE11 workaround for select-authenticator screen */
|
||||
|
||||
.select-auth-box-arrow{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -661,7 +488,6 @@ ul#kc-totp-supported-apps {
|
|||
padding: 0 20px;
|
||||
max-width: 500px;
|
||||
border-top: 4px solid;
|
||||
border-color: #0066CC; /* default - IE compatibility */
|
||||
border-color: var(--pf-global--primary-color--100);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,207 +0,0 @@
|
|||
/*Internet Explorer 11 compatibility workaround - IE does not support CSS variables */
|
||||
|
||||
@media all and (-ms-high-contrast: none),
|
||||
(-ms-high-contrast: active) {
|
||||
.pf-c-tile {
|
||||
position: relative;
|
||||
display: -ms-inline-grid;
|
||||
display: inline-grid;
|
||||
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
grid-template-rows: -webkit-min-content;
|
||||
-ms-grid-rows: -webkit-min-content;
|
||||
-ms-grid-rows: min-content;
|
||||
grid-template-rows: min-content;
|
||||
}
|
||||
.pf-c-tile::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 1px solid #d2d2d2;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.pf-c-tile:hover {
|
||||
border: 1px solid #06c;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.pf-c-tile:hover .pf-c-tile__title,
|
||||
.pf-c-tile:hover .pf-c-tile__icon {
|
||||
color: #06c;
|
||||
}
|
||||
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__title,
|
||||
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__icon {
|
||||
color: #06c;
|
||||
}
|
||||
.pf-c-tile__input:checked + .pf-c-tile {
|
||||
border: 2px solid #06c;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.pf-c-tile.pf-m-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.pf-c-tile__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pf-c-tile__header.pf-m-stacked {
|
||||
flex-direction: column;
|
||||
justify-content: initial;
|
||||
}
|
||||
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.pf-c-tile__title {
|
||||
color: #6a6e73;
|
||||
}
|
||||
.pf-c-tile__body {
|
||||
font-size: 0.75rem;
|
||||
color: #6a6e73;
|
||||
}
|
||||
.pf-c-tile__icon {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
color: #6a6e73;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*End of the IE11 workaround*/
|
||||
|
||||
.pf-c-tile {
|
||||
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
|
||||
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
|
||||
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
|
||||
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
|
||||
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
||||
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
|
||||
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
||||
--pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm);
|
||||
--pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
||||
--pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
||||
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
||||
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
||||
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
||||
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
|
||||
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
|
||||
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
|
||||
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
|
||||
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
|
||||
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
|
||||
--pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
|
||||
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
||||
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
||||
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
||||
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
|
||||
margin-bottom: 0.25rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--pf-c-tile--BackgroundColor);
|
||||
grid-template-rows: min-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pf-c-tile::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
|
||||
border-radius: var(--pf-c-tile--before--BorderRadius);
|
||||
}
|
||||
|
||||
.pf-c-tile:hover {
|
||||
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
|
||||
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
|
||||
--pf-c-tile--before--BorderColor: var(--pf-c-tile--hover--before--BorderColor);
|
||||
}
|
||||
|
||||
.pf-c-tile__input:checked + .pf-c-tile {
|
||||
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
||||
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
||||
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
|
||||
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
|
||||
}
|
||||
|
||||
.pf-c-tile:focus {
|
||||
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
|
||||
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
|
||||
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
|
||||
--pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
|
||||
}
|
||||
|
||||
.pf-c-tile.pf-m-disabled {
|
||||
--pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
|
||||
--pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
|
||||
--pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
|
||||
--pf-c-tile--before--BorderWidth: 0;
|
||||
--pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
|
||||
--pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
|
||||
}
|
||||
|
||||
.pf-c-tile__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pf-c-tile__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pf-c-tile__header.pf-m-stacked {
|
||||
--pf-c-tile__icon--MarginRight: 0;
|
||||
--pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
|
||||
flex-direction: column;
|
||||
justify-content: initial;
|
||||
}
|
||||
|
||||
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
|
||||
}
|
||||
|
||||
.pf-c-tile__title {
|
||||
color: var(--pf-c-tile__title--Color);
|
||||
}
|
||||
|
||||
.pf-c-tile__body {
|
||||
font-size: var(--pf-c-tile__body--FontSize);
|
||||
color: var(--pf-c-tile__body--Color);
|
||||
}
|
||||
|
||||
.pf-c-tile__icon {
|
||||
margin-right: var(--pf-c-tile__icon--MarginRight);
|
||||
font-size: var(--pf-c-tile__icon--FontSize);
|
||||
color: var(--pf-c-tile__icon--Color);
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
parent=base
|
||||
import=common/keycloak
|
||||
|
||||
styles=css/login.css css/tile.css
|
||||
styles=css/login.css
|
||||
stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
|
||||
|
||||
meta=viewport==width=device-width,initial-scale=1
|
||||
|
|
Loading…
Reference in a new issue