You are here

Home » API reference » View Mode Selector 8

view-mode-selector.css in View Mode Selector 8

Same filename and directory in other branches
  1. 7 css/view-mode-selector.css
.view-mode-selector-view-modes .settings {
  margin-left: 3em;
}

/* HTML preview styling
  ==============================================================================
  We display the view mode radio buttons as justified grid.
  The guys at justifygrid.com describe very well how this works
*/
.field-widget-view-mode-selector-icons .form-radios {
  text-align: justify;
  font-size: 0;
  line-height: 0;
}

.field-widget-view-mode-selector-icons .form-radios .form-item {
  display: inline-block;
  padding-left: 1em;
  min-width: 100px;
  font-size: 1rem;
  line-height: 1.4em;
  vertical-align: top;
  text-align: center;
}

.field-widget-view-mode-selector-icons .form-radios .form-item:first-child {
  padding-left: 0;
}

.field-widget-view-mode-selector-icons .form-radios input[type="radio"]:not(.no-preview) {
  display: none;
}

/* Icon & Preview layout */
.field-widget-view-mode-selector-icons .form-radios img {
  display: block;
  max-width: 100px;
  height: auto;
  margin: 0 !important;
}

.field-widget-view-mode-selector-icons .form-radios label {
  display: block;
}

/* Preview coloring */
.field-widget-view-mode-selector-icons .form-radios .placeholder {
  background: #000;
  min-height: 20px;
  border: 2px solid white;
}

.field-widget-view-mode-selector-icons .form-radios label img,
.field-widget-view-mode-selector-icons .form-radios label .entity {
  padding: 0.4em;
  background: rgba(0, 0, 0, 0.075);
  transition: .4s background ease;
}

.field-widget-view-mode-selector-icons .form-radios .form-item:hover label img,
.field-widget-view-mode-selector-icons .form-radios .form-item:hover label .entity {
  background: rgba(0, 0, 0, 0.2);
}

.field-widget-view-mode-selector-icons .form-radios input[type="radio"]:checked + label img,
.field-widget-view-mode-selector-icons .form-radios input[type="radio"]:checked + label .entity {
  background: rgba(150, 188, 68, 0.9);
}

File

css/view-mode-selector.css
View source 
  1. .view-mode-selector-view-modes .settings {

  2.   margin-left: 3em;

  3. }

  4. 

  5. /* HTML preview styling

  6.   ==============================================================================

  7.   We display the view mode radio buttons as justified grid.

  8.   The guys at justifygrid.com describe very well how this works

  9. */

  10. .field-widget-view-mode-selector-icons .form-radios {

  11.   text-align: justify;

  12.   font-size: 0;

  13.   line-height: 0;

  14. }

  15. 

  16. .field-widget-view-mode-selector-icons .form-radios .form-item {

  17.   display: inline-block;

  18.   padding-left: 1em;

  19.   min-width: 100px;

  20.   font-size: 1rem;

  21.   line-height: 1.4em;

  22.   vertical-align: top;

  23.   text-align: center;

  24. }

  25. 

  26. .field-widget-view-mode-selector-icons .form-radios .form-item:first-child {

  27.   padding-left: 0;

  28. }

  29. 

  30. .field-widget-view-mode-selector-icons .form-radios input[type="radio"]:not(.no-preview) {

  31.   display: none;

  32. }

  33. 

  34. /* Icon & Preview layout */

  35. .field-widget-view-mode-selector-icons .form-radios img {

  36.   display: block;

  37.   max-width: 100px;

  38.   height: auto;

  39.   margin: 0 !important;

  40. }

  41. 

  42. .field-widget-view-mode-selector-icons .form-radios label {

  43.   display: block;

  44. }

  45. 

  46. /* Preview coloring */

  47. .field-widget-view-mode-selector-icons .form-radios .placeholder {

  48.   background: #000;

  49.   min-height: 20px;

  50.   border: 2px solid white;

  51. }

  52. 

  53. .field-widget-view-mode-selector-icons .form-radios label img,

  54. .field-widget-view-mode-selector-icons .form-radios label .entity {

  55.   padding: 0.4em;

  56.   background: rgba(0, 0, 0, 0.075);

  57.   transition: .4s background ease;

  58. }

  59. 

  60. .field-widget-view-mode-selector-icons .form-radios .form-item:hover label img,

  61. .field-widget-view-mode-selector-icons .form-radios .form-item:hover label .entity {

  62.   background: rgba(0, 0, 0, 0.2);

  63. }

  64. 

  65. .field-widget-view-mode-selector-icons .form-radios input[type="radio"]:checked + label img,

  66. .field-widget-view-mode-selector-icons .form-radios input[type="radio"]:checked + label .entity {

  67.   background: rgba(150, 188, 68, 0.9);

  68. }