src/widgets/colorpalette/less/colorpalette.less

   1 @import "../../common/less/jquery.mobile.todons.defines.less";
   2 @colorpalette-choice-total-width:  54px;
   3 @colorpalette-choice-total-height: 54px;
   4 @colorpalette-item-border-width:  4px;
   5 @colorpalette-item-border-color: #c0c0c0;
   6 @colorpalette-preview-total-width:  304px;
   7 @colorpalette-preview-total-height: 109px;
   8
   9 @colorpalette-choice-actual-width:  @colorpalette-choice-total-width  - 2 * @colorpalette-item-border-width;
  10 @colorpalette-choice-actual-height: @colorpalette-choice-total-height - 2 * @colorpalette-item-border-width;
  11 @colorpalette-preview-actual-width:  @colorpalette-preview-total-width  - 2 * @colorpalette-item-border-width;
  12 @colorpalette-preview-actual-height: @colorpalette-preview-total-height - 2 * @colorpalette-item-border-width;
  13
  14 .todons-colorpalette-disabled {
  15     .colorpalette-table {
  16         .colorpalette-choice-active {
  17             border-color: @todons-selected-color-disabled !important;
  18         }
  19     }
  20 }
  21
  22 .ui-colorpalette {
  23     display: table;
  24     padding-left:   24px;
  25     padding-right:  24px;
  26     padding-top:    15px;
  27     padding-bottom: 15px;
  28
  29     .colorpalette-preview-container {
  30         padding-top: 48px;
  31         padding-bottom: 39px;
  32         display: table;
  33         margin: auto;
  34
  35         .colorpalette-preview {
  36             display: table;
  37             margin: auto;
  38             width:  @colorpalette-preview-actual-width;
  39             height: @colorpalette-preview-actual-height;
  40             border: @colorpalette-item-border-color @colorpalette-item-border-width solid;
  41         }
  42     }
  43
  44     .colorpalette-table {
  45         .colorpalette-bottom-row {
  46             display: table-row;
  47         }
  48
  49         .colorpalette-normal-row {
  50             .colorpalette-bottom-row;
  51         }
  52
  53         .colorpalette-choice-container-left {
  54             display: table-cell;
  55         }
  56
  57         .colorpalette-choice-container-rest {
  58             .colorpalette-choice-container-left;
  59             padding-left: 38px;
  60         }
  61
  62         .colorpalette-normal-row .colorpalette-choice-container-left {
  63             padding-bottom: 16px;
  64         }
  65
  66         .colorpalette-choice {
  67             width:      @colorpalette-choice-actual-width;
  68             height:     @colorpalette-choice-actual-width;
  69             border-width: @colorpalette-item-border-width;
  70             border-style: solid;
  71             border-color: @colorpalette-item-border-color;
  72         }
  73
  74         .colorpalette-choice-active {
  75             border-color: @todons-selected-color;
  76         }
  77     }
  78 }