You are here

Home » API reference » Dismiss 7

dismiss.base.css in Dismiss 7

Essential CSS for the Dismiss module

File

css/dismiss.base.css
View source 
  1. /**

  2.  * @file

  3.  *   Essential CSS for the Dismiss module

  4.  */

  5. 

  6. /*

  7.  * All messages require relative positioning

  8.  * for the Dismiss button to be placed properly

  9.  */

  10. div.messages {

  11.   position: relative;

  12.   padding-right: 1.5em;

  13. }

  14. 

  15. /*

  16.  * Dismiss button

  17.  */

  18. .dismiss {

  19.   display: block;

  20.   position: absolute;

  21.   top: .4em;

  22.   right: .4em;

  23.   width: 1.8em;

  24.   background: #ed541d;

  25.   border: 0;

  26.   color: #fff;

  27. 

  28.   font-weight: 900;

  29.   text-align: center;

  30.   text-shadow: -1px -1px 0px rgba(0,0,0,0.4);

  31.   text-decoration: none;

  32. 

  33.   border-radius: 3px;

  34.   box-shadow: 1px 1px 0px rgba(0,0,0,0.4);

  35.   opacity: .5;

  36. 

  37.   cursor: pointer;

  38.   -webkit-transition: .1s opacity linear;

  39.      -moz-transition: .1s opacity linear;

  40.       -ms-transition: .1s opacity linear;

  41.        -o-transition: .1s opacity linear;

  42.           transition: .1s opacity linear;

  43. }

  44. 

  45. .dismiss:before {

  46.   content: '\2715';

  47. }

  48. 

  49. .error .dismiss {

  50.   background: #ed541d;

  51. }

  52. 

  53. .status .dismiss {

  54.   background: #be7;

  55.   color: #000;

  56.   text-shadow: none;

  57. }

  58. 

  59. .warning .dismiss {

  60.   background: #ed5;

  61.   color: #000;

  62.   text-shadow: none;

  63. }

  64. 

  65. /*

  66.  * When the user mouses over the message box, make the button more prominent

  67.  */

  68. .messages:hover .dismiss {

  69.   opacity: 1;

  70. }

  71. 

  72. /*

  73.  * Change states when users mouseover

  74.  */

  75. .dismiss:hover {

  76.   color: #fff;

  77.   text-decoration: none;

  78.   text-shadow: -1px -1px 0px rgba(0,0,0,0.4);

  79. }

  80. 

  81. /*

  82.  * Change states when users click

  83.  */

  84. .dismiss:active {

  85.   text-shadow: 1px 1px 0px rgba(0,0,0,0.4);

  86.   box-shadow: 0 0 1px rgba(0,0,0,0.4);

  87.   margin-top: 1px;

  88.   margin-left: 1px;

  89. }