You are here

Home » API reference » YAML Form 8

yamlform.element.message.css in YAML Form 8

Messages element styles.

File

css/yamlform.element.message.css
View source 
  1. /**

  2.  * @file

  3.  * Messages element styles.

  4.  */

  5. 

  6. .messages {

  7.   box-shadow: -8px 0 0 #3b3b3b; /* LTR */

  8. }

  9. [dir="rtl"] .messages {

  10.   box-shadow: 8px 0 0 #3b3b3b;

  11.   margin-left: 0;

  12. }

  13. 

  14. .messages.messages--info {

  15.   color: #31708f;

  16.   background-color: #d9edf7;

  17.   background-image: url(../images/icons/info.svg);

  18.   border-color: #0074bd #0074bd #0074bd transparent;  /* LTR */

  19.   box-shadow: -8px 0 0 #0074bd; /* LTR */

  20. }

  21. [dir="rtl"] .messages.messages--info {

  22.   border-color: #0074bd transparent #0074bd #0074bd;

  23.   box-shadow: 8px 0 0 #0074bd;

  24.   margin-left: 0;

  25. }

  26. 

  27. /**

  28.  * Message close.

  29.  */

  30. .yamlform-message--close .messages {

  31.   position: relative;

  32. }

  33. 

  34. .yamlform-message--close .yamlform-message__link {

  35.   display: none;

  36. }

  37. 

  38. html.js .yamlform-message--close .yamlform-message__link {

  39.   display: block;

  40.   position: absolute;

  41.   top: 11px;

  42.   right: 10px;

  43.   line-height: 24px;

  44.   font-size: 24px;

  45. }

  46. 

  47. .yamlform-message__link {

  48.   color: inherit;

  49.   opacity: 0.33;

  50. }

  51. 

  52. .yamlform-message__link:link {

  53.   border-bottom: none;

  54.   text-decoration: none;

  55. }

  56. 

  57. .yamlform-message__link:hover,

  58. .yamlform-message__link:focus,

  59. .yamlform-message__link:active {

  60.   border-bottom: none;

  61.   text-decoration: none;

  62.   color: inherit;

  63.   opacity: 1;

  64. }

  65. 

  66. html.js .js-yamlform-message--close-storage {

  67.   display: none;

  68. }