BookStack Code Mirror - bookstack/blob - resources/sass/_buttons.scss

   1 button {
   2   background-color: transparent;
   3   border: 0;
   4   font-size: 100%;
   5 }
   6
   7 .button  {
   8   text-decoration: none;
   9   font-size: 0.85rem;
  10   line-height: 1.4em;
  11   padding: $-xs*1.3 $-m;
  12   margin-top: $-xs;
  13   margin-bottom: $-xs;
  14   display: inline-block;
  15   font-weight: 400;
  16   outline: 0;
  17   border-radius: 4px;
  18   cursor: pointer;
  19   transition: background-color ease-in-out 120ms,
  20     filter ease-in-out 120ms,
  21     box-shadow ease-in-out 120ms;
  22   box-shadow: none;
  23   background-color: var(--color-primary);
  24   color: #FFF;
  25   border: 1px solid var(--color-primary);
  26   vertical-align: top;
  27   &:hover, &:focus, &:active {
  28     background-color: var(--color-primary);
  29     text-decoration: none;
  30     color: #FFFFFF;
  31   }
  32   &:hover {
  33     @include lightDark(box-shadow, $bs-light, $bs-dark);
  34     filter: brightness(110%);
  35   }
  36   &:focus {
  37     outline: 1px dotted currentColor;
  38     outline-offset: -$-xs;
  39     box-shadow: none;
  40     filter: brightness(90%);
  41   }
  42   &:active {
  43     outline: 0;
  44   }
  45 }
  46
  47 .button.outline {
  48   background-color: transparent;
  49   @include lightDark(color, #666, #AAA);
  50   fill: currentColor;
  51   border: 1px solid;
  52   @include lightDark(border-color, #CCC, #666);
  53   &:hover, &:focus, &:active {
  54     @include lightDark(color, #444, #BBB);
  55     border: 1px solid #CCC;
  56     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  57     background-color: #F2F2F2;
  58     @include lightDark(background-color, #f8f8f8, #444);
  59     filter: none;
  60   }
  61   &:active {
  62     border-color: #BBB;
  63     background-color: #DDD;
  64     color: #666;
  65     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  66   }
  67 }
  68
  69 .button + .button {
  70   margin-inline-start: $-s;
  71 }
  72
  73 .button.small {
  74   font-size: 0.75rem;
  75   padding: $-xs*1.2 $-s;
  76 }
  77
  78 .text-button {
  79   cursor: pointer;
  80   background-color: transparent;
  81   padding: 0;
  82   margin: 0;
  83   border: none;
  84   user-select: none;
  85   font-size: 0.75rem;
  86   line-height: 1.4em;
  87   color: var(--color-link);
  88   &:active {
  89     outline: 0;
  90   }
  91   &:hover {
  92     text-decoration: none;
  93   }
  94   &:hover, &:focus {
  95     color: var(--color-link);
  96     fill: var(--color-link);
  97   }
  98 }
  99 .text-button.hover-underline:hover {
 100   text-decoration: underline;
 101 }
 102
 103 .button.block {
 104   width: 100%;
 105   text-align: start;
 106   display: block;
 107 }
 108
 109 .button.icon, .icon-button, .text-button.icon {
 110   .svg-icon {
 111     margin-inline-end: 0;
 112   }
 113 }
 114
 115 .icon-button {
 116   text-align: center;
 117   border: 1px solid transparent;
 118 }
 119 .icon-button:hover {
 120   background-color: rgba(0, 0, 0, 0.05);
 121   border-radius: 4px;
 122   @include lightDark(border-color, #DDD, #444);
 123   cursor: pointer;
 124 }
 125
 126 .button.svg {
 127   display: flex;
 128   align-items: center;
 129   padding: $-s $-m;
 130   padding-bottom: ($-s - 2px);
 131   width: 100%;
 132   svg {
 133     display: inline-block;
 134     width: 24px;
 135     height: 24px;
 136     bottom: auto;
 137     margin-inline-end: $-m;
 138   }
 139 }
 140
 141 .button[disabled] {
 142   background-color: #BBB;
 143   cursor: default;
 144   border-color: #CCC;
 145   &:hover {
 146     background-color: #BBB;
 147     cursor: default;
 148     box-shadow: none;
 149   }
 150 }