github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/checkbox.less (about)

     1  /*!
     2   * # Semantic UI - Checkbox
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  /*******************************
    13              Theme
    14  *******************************/
    15  
    16  @type    : 'module';
    17  @element : 'checkbox';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22             Checkbox
    23  *******************************/
    24  
    25  
    26  /*--------------
    27      Content
    28  ---------------*/
    29  
    30  .ui.checkbox {
    31    position: relative;
    32    display: inline-block;
    33  
    34    min-height: @checkboxSize;
    35  
    36    font-size: 1rem;
    37    line-height: @checkboxLineHeight;
    38    min-width: @checkboxSize;
    39    backface-visibility: hidden;
    40  
    41    outline: none;
    42    vertical-align: middle;
    43  }
    44  .ui.checkbox input[type="checkbox"],
    45  .ui.checkbox input[type="radio"] {
    46    position: absolute;
    47    top: 0px;
    48    left: 0px;
    49    opacity: 0 !important;
    50    outline: none;
    51    z-index: -1;
    52  }
    53  
    54  
    55  /*--------------
    56        Box
    57  ---------------*/
    58  
    59  
    60  .ui.checkbox .box,
    61  .ui.checkbox label {
    62    display: block;
    63    cursor: pointer;
    64    padding-left: @labelPadding;
    65    outline: none;
    66  }
    67  .ui.checkbox label {
    68    font-size: @fontSize;
    69  }
    70  
    71  .ui.checkbox .box:before,
    72  .ui.checkbox label:before {
    73    position: absolute;
    74  
    75    line-height: 1;
    76    width: @checkboxSize;
    77    height: @checkboxSize;
    78    top: 0em;
    79    left: 0em;
    80    content: '';
    81  
    82    background: @checkboxBackground;
    83    border-radius: @checkboxBorderRadius;
    84  
    85    transition: @checkboxTransition;
    86    border: @checkboxBorder;
    87  }
    88  
    89  /*--------------
    90      Checkmark
    91  ---------------*/
    92  
    93  .ui.checkbox .box:after,
    94  .ui.checkbox label:after {
    95    position: absolute;
    96    top: @checkboxCheckTop;
    97    left: @checkboxCheckLeft;
    98    line-height: @checkboxSize;
    99    width: @checkboxSize;
   100    height: @checkboxSize;
   101    text-align: center;
   102  
   103    opacity: 0;
   104    color: @checkboxColor;
   105    transition: all 0.1s ease;
   106  }
   107  
   108  /*--------------
   109        Label
   110  ---------------*/
   111  
   112  /* Inside */
   113  .ui.checkbox label,
   114  .ui.checkbox + label {
   115    cursor: pointer;
   116    color: @labelColor;
   117    transition: color 0.2s ease;
   118    user-select: none;
   119  }
   120  
   121  /* Outside */
   122  .ui.checkbox + label {
   123    vertical-align: middle;
   124  }
   125  
   126  
   127  /*******************************
   128             States
   129  *******************************/
   130  
   131  
   132  /*--------------
   133        Hover
   134  ---------------*/
   135  
   136  .ui.checkbox .box:hover::before,
   137  .ui.checkbox label:hover::before {
   138    background: @checkboxHoverBackground;
   139    border: @checkboxHoverBorder;
   140  }
   141  .ui.checkbox label:hover,
   142  .ui.checkbox + label:hover {
   143    color: @labelHoverColor;
   144  }
   145  
   146  /*--------------
   147        Down
   148  ---------------*/
   149  
   150  .ui.checkbox .box:active::before,
   151  .ui.checkbox label:active::before {
   152    background: @checkboxSelectedBackground;
   153    border: 1px solid @checkboxSelectedBorder;
   154  }
   155  .ui.checkbox input[type="checkbox"]:active ~ label,
   156  .ui.checkbox input[type="radio"]:active ~ label {
   157    color: @labelSelectedColor;
   158  }
   159  
   160  /*--------------
   161        Focus
   162  ---------------*/
   163  
   164  .ui.checkbox input[type="checkbox"]:focus ~ .box:before,
   165  .ui.checkbox input[type="checkbox"]:focus ~ label:before,
   166  .ui.checkbox input[type="radio"]:focus ~ .box:before,
   167  .ui.checkbox input[type="radio"]:focus ~ label:before {
   168    background: @checkboxSelectedBackground;
   169    border: 1px solid @checkboxSelectedBorder;
   170  }
   171  .ui.checkbox input[type="checkbox"]:focus ~ label,
   172  .ui.checkbox input[type="radio"]:focus ~ label {
   173    color: @labelSelectedColor;
   174  }
   175  
   176  
   177  /*--------------
   178       Active
   179  ---------------*/
   180  
   181  .ui.checkbox input[type="checkbox"]:checked ~ .box:after,
   182  .ui.checkbox input[type="checkbox"]:checked ~ label:after,
   183  .ui.checkbox input[type="radio"]:checked ~ .box:after,
   184  .ui.checkbox input[type="radio"]:checked ~ label:after {
   185    opacity: 1;
   186  }
   187  
   188  /*--------------
   189      Read-Only
   190  ---------------*/
   191  
   192  .ui.read-only.checkbox,
   193  .ui.read-only.checkbox label {
   194    cursor: default;
   195  }
   196  
   197  
   198  /*--------------
   199       Disabled
   200  ---------------*/
   201  
   202  .ui.disabled.checkbox .box:after,
   203  .ui.disabled.checkbox label,
   204  .ui.checkbox input[type="checkbox"][disabled] ~ .box:after,
   205  .ui.checkbox input[type="checkbox"][disabled] ~ label,
   206  .ui.checkbox input[type="radio"][disabled] ~ .box:after,
   207  .ui.checkbox input[type="radio"][disabled] ~ label {
   208    cursor: default;
   209    opacity: @disabledCheckboxOpacity;
   210    color: @disabledCheckboxLabelColor;
   211  }
   212  
   213  
   214  /*******************************
   215               Types
   216  *******************************/
   217  
   218  
   219  /*--------------
   220       Radio
   221  ---------------*/
   222  
   223  .ui.radio.checkbox {
   224    min-height: @checkboxRadioSize;
   225  }
   226  
   227  /* Box */
   228  .ui.radio.checkbox .box:before,
   229  .ui.radio.checkbox label:before {
   230    width: @checkboxRadioSize;
   231    height: @checkboxRadioSize;
   232    border-radius: @circularRadius;
   233    top: @checkboxRadioTop;
   234    left: @checkboxRadioLeft;
   235    transform: none;
   236  }
   237  
   238  /* Circle */
   239  .ui.radio.checkbox .box:after,
   240  .ui.radio.checkbox label:after {
   241    border: none;
   242    width: @checkboxRadioSize;
   243    height: @checkboxRadioSize;
   244    line-height: @checkboxRadioSize;
   245    top: @checkboxRadioTop;
   246    left: @checkboxRadioLeft;
   247    font-size: @checkboxRadioCircleSize;
   248  }
   249  /* Radio Checkbox */
   250  .ui.radio.checkbox .box:after,
   251  .ui.radio.checkbox label:after {
   252    width: @checkboxRadioSize;
   253    height: @checkboxRadioSize;
   254    border-radius: @checkboxBulletRadius;
   255    transform: scale(@checkboxBulletScale);
   256    background-color: @checkboxBulletColor;
   257  }
   258  
   259  
   260  /*--------------
   261       Slider
   262  ---------------*/
   263  
   264  .ui.slider.checkbox {
   265    cursor: pointer;
   266    min-height: @sliderHeight;
   267  }
   268  
   269  .ui.slider.checkbox .box,
   270  .ui.slider.checkbox label {
   271    padding-left: @sliderLabelDistance;
   272    line-height: @sliderLabelLineHeight;
   273    color: @sliderOffLabelColor;
   274  }
   275  
   276  /* Line */
   277  .ui.slider.checkbox .box:before,
   278  .ui.slider.checkbox label:before {
   279    cursor: pointer;
   280    display: block;
   281  
   282    position: absolute;
   283    content: '';
   284    top: @sliderLineVerticalOffset;
   285    left: 0em;
   286    z-index: 1;
   287    border: none !important;
   288  
   289    background-color: @sliderLineColor;
   290    width: @sliderLineWidth;
   291    height: @sliderLineHeight;
   292  
   293    transform: none;
   294    border-radius: @sliderLineRadius;
   295    transition:
   296      background 0.3s ease
   297    ;
   298  }
   299  
   300  /* Handle */
   301  .ui.slider.checkbox .box:after,
   302  .ui.slider.checkbox label:after {
   303    background: @handleBackground;
   304    position: absolute;
   305    content: '';
   306    opacity: 1;
   307    z-index: 2;
   308  
   309    border: none;
   310    box-shadow: @handleBoxShadow;
   311    width: @sliderHandleSize;
   312    height: @sliderHandleSize;
   313    top: @sliderHandleOffset;
   314    left: 0em;
   315    transform: none;
   316  
   317    border-radius: @circularRadius;
   318    transition:
   319      left 0.3s ease 0s
   320    ;
   321  }
   322  
   323  /* Focus */
   324  .ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
   325  .ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
   326  .ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
   327  .ui.slider.checkbox input[type="radio"]:focus ~ label:before {
   328    background-color: @toggleFocusColor;
   329    border: none;
   330  }
   331  
   332  /* Hover */
   333  .ui.slider.checkbox .box:hover,
   334  .ui.slider.checkbox label:hover {
   335    color: @sliderHoverLabelColor;
   336  }
   337  .ui.slider.checkbox .box:hover::before,
   338  .ui.slider.checkbox label:hover::before {
   339    background: @sliderHoverLaneBackground;
   340  }
   341  
   342  /* Active */
   343  .ui.slider.checkbox input[type="checkbox"]:checked ~ .box,
   344  .ui.slider.checkbox input[type="checkbox"]:checked ~ label,
   345  .ui.slider.checkbox input[type="radio"]:checked ~ .box,
   346  .ui.slider.checkbox input[type="radio"]:checked ~ label {
   347    color: @sliderOnLabelColor;
   348  }
   349  .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before,
   350  .ui.slider.checkbox input[type="checkbox"]:checked ~ label:before,
   351  .ui.slider.checkbox input[type="radio"]:checked ~ .box:before,
   352  .ui.slider.checkbox input[type="radio"]:checked ~ label:before {
   353    background-color: @sliderOnLineColor;
   354  }
   355  .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after,
   356  .ui.slider.checkbox input[type="checkbox"]:checked ~ label:after,
   357  .ui.slider.checkbox input[type="radio"]:checked ~ .box:after,
   358  .ui.slider.checkbox input[type="radio"]:checked ~ label:after {
   359    left: @sliderTravelDistance;
   360  }
   361  
   362  
   363  /*--------------
   364       Toggle
   365  ---------------*/
   366  
   367  .ui.toggle.checkbox {
   368    cursor: pointer;
   369    min-height: @toggleHeight;
   370  }
   371  
   372  .ui.toggle.checkbox .box,
   373  .ui.toggle.checkbox label {
   374    min-height: @toggleHandleSize;
   375    padding-left: @toggleLabelDistance;
   376    color: @toggleOffLabelColor;
   377  }
   378  .ui.toggle.checkbox label {
   379    padding-top: @toggleLabelOffset;
   380  }
   381  
   382  /* Switch */
   383  .ui.toggle.checkbox .box:before,
   384  .ui.toggle.checkbox label:before {
   385    cursor: pointer;
   386    display: block;
   387  
   388    position: absolute;
   389    content: '';
   390  
   391    top: @toggleLaneVerticalOffset;
   392    z-index: 1;
   393    border: none;
   394  
   395    background-color: @neutralCheckbox;
   396    width: @toggleLaneWidth;
   397    height: @toggleLaneHeight;
   398    border-radius: @toggleHandleRadius;
   399  }
   400  
   401  /* Handle */
   402  .ui.toggle.checkbox .box:after,
   403  .ui.toggle.checkbox label:after {
   404    background: @handleBackground;
   405    position: absolute;
   406    content: '';
   407    opacity: 1;
   408    z-index: 2;
   409  
   410    border: none;
   411    box-shadow: @handleBoxShadow;
   412    width: @toggleHandleSize;
   413    height: @toggleHandleSize;
   414    top: @toggleHandleOffset;
   415    left: 0em;
   416  
   417    border-radius: @circularRadius;
   418    transition:
   419      background 0.3s ease 0s,
   420      left 0.3s ease 0s
   421    ;
   422  }
   423  
   424  .ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
   425  .ui.toggle.checkbox input[type="checkbox"] ~ label:after,
   426  .ui.toggle.checkbox input[type="radio"] ~ .box:after,
   427  .ui.toggle.checkbox input[type="radio"] ~ label:after {
   428    left: @toggleOffOffset;
   429  }
   430  
   431  /* Focus */
   432  .ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
   433  .ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
   434  .ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
   435  .ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
   436    background-color: @toggleFocusColor;
   437    border: none;
   438  }
   439  
   440  /* Hover */
   441  .ui.toggle.checkbox .box:hover::before,
   442  .ui.toggle.checkbox label:hover::before {
   443    background-color: @toggleHoverColor;
   444    border: none;
   445  }
   446  
   447  /* Active */
   448  .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box,
   449  .ui.toggle.checkbox input[type="checkbox"]:checked ~ label,
   450  .ui.toggle.checkbox input[type="radio"]:checked ~ .box,
   451  .ui.toggle.checkbox input[type="radio"]:checked ~ label {
   452    color: @toggleOnLabelColor;
   453  }
   454  .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before,
   455  .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before,
   456  .ui.toggle.checkbox input[type="radio"]:checked ~ .box:before,
   457  .ui.toggle.checkbox input[type="radio"]:checked ~ label:before {
   458    background-color: @toggleOnLaneColor;
   459  }
   460  .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after,
   461  .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after,
   462  .ui.toggle.checkbox input[type="radio"]:checked ~ .box:after,
   463  .ui.toggle.checkbox input[type="radio"]:checked ~ label:after {
   464    left: @toggleOnOffset;
   465  }
   466  
   467  /*******************************
   468              Variations
   469  *******************************/
   470  
   471  /*--------------
   472       Fitted
   473  ---------------*/
   474  
   475  .ui.fitted.checkbox .box,
   476  .ui.fitted.checkbox label {
   477    padding-left: 0em !important;
   478  }
   479  
   480  .ui.fitted.toggle.checkbox,
   481  .ui.fitted.toggle.checkbox {
   482    width: @toggleWidth;
   483  }
   484  
   485  .ui.fitted.slider.checkbox,
   486  .ui.fitted.slider.checkbox {
   487    width: @sliderWidth;
   488  }
   489  
   490  .loadUIOverrides();