.error, .info, .success, .warning { border-left: 5px solid transparent; margin-top: 20px; @include screen-md-up { padding: 10px 20px; } @include screen-sm-down { padding: 10px; } a { @include wcfFontBold; &:hover { text-decoration: underline; } } } .error { background-color: $wcfStatusErrorBackground; border-color: $wcfStatusErrorBorder; color: $wcfStatusErrorText; a { color: $wcfStatusErrorLink; &:hover { color: $wcfStatusErrorLinkActive; } } } .info { background-color: $wcfStatusInfoBackground; border-color: $wcfStatusInfoBorder; color: $wcfStatusInfoText; a { color: $wcfStatusInfoLink; &:hover { color: $wcfStatusInfoLinkActive; } } } .success { background-color: $wcfStatusSuccessBackground; border-color: $wcfStatusSuccessBorder; color: $wcfStatusSuccessText; a { color: $wcfStatusSuccessLink; &:hover { color: $wcfStatusSuccessLinkActive; } } } .warning { background-color: $wcfStatusWarningBackground; border-color: $wcfStatusWarningBorder; color: $wcfStatusWarningText; a { color: $wcfStatusWarningLink; &:hover { color: $wcfStatusWarningLinkActive; } } } .innerError, .innerInfo, .innerSuccess, .innerWarning{ display: table; line-height: 1.5; margin-top: 8px; padding: 5px 10px; position: relative; /* pointer */ &::before { border: 6px solid transparent; border-top-width: 0; content: ""; display: inline-block; left: 10px; position: absolute; top: -6px; z-index: 99; } } /* inline messages */ .innerError { background-color: rgb(242, 222, 222); color: rgb(169, 68, 66); &::before { border-bottom-color: rgb(242, 222, 222); } a { color: $wcfStatusErrorLink; &:hover { color: $wcfStatusErrorLinkActive; } } } .innerSuccess { background-color: $wcfStatusSuccessBackground; color: $wcfStatusSuccessText; &::before { border-bottom-color: $wcfStatusSuccessBackground; } a { color: $wcfStatusSuccessLink; &:hover { color: $wcfStatusSuccessLinkActive; } } } .innerWarning { background-color: $wcfStatusWarningBackground; color: $wcfStatusWarningText; &::before { border-bottom-color: $wcfStatusWarningBackground; } a { color: $wcfStatusWarningLink; &:hover { color: $wcfStatusWarningLinkActive; } } } /* sticky footer notices */ .pageFooterStickyNotice { bottom: 0; left: 0; right: 0; position: fixed; z-index: 600; .error, .info, .success, .warning { border-left-width: 0; border-top-width: 1px; border-top-style: solid; margin-top: 0; padding: 10px 0; @include screen-sm-down { @include wcfFontSmall; } } .cookiePolicyNotice { .layoutBoundary { display: flex; align-items: center; @include screen-sm-down { flex-wrap: wrap; } } .cookiePolicyNoticeText { flex: 1 1 auto; @include screen-sm-down { flex-basis: 100%; margin-bottom: 5px; } } .cookiePolicyNoticeMoreInformation, .cookiePolicyNoticeDismiss { flex: 0 0 auto; } .cookiePolicyNoticeDismiss { margin-left: 5px; } } } /* inline infos */ .innerInfo { background-color: $wcfStatusInfoBackground; color: $wcfStatusInfoText; &::before { border-bottom-color: $wcfStatusInfoBackground; } a { color: $wcfStatusInfoLink; &:hover { color: $wcfStatusInfoLinkActive; } } } /* dismiss icon */ .noticeDismissible > .jsDismissNoticeButton { float: right; @include screen-md-down { font-size: 18px; height: 24px; line-height: 24px; width: 24px; } } .userExceptionMessage { align-self: center; }