fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.21

package/src/definitions/modules/calendar.less

@@ -12,7 +12,7 @@
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'calendar';
 
 @import (multiple) '../../theme.config';
@@ -21,32 +21,36 @@
             Popup
 *******************************/
 
-.ui.calendar .ui.popup {
-  max-width: none;
-  padding: 0;
-  border: none;
-  user-select: none;
+.ui.calendar.popup {
+    max-width: none;
+    padding: 0;
+    border: none;
+    user-select: none;
+    &.inverted::before when (@variationCalendarInverted) {
+        background: @invertedArrowBackground;
+    }
 }
 
 /*******************************
             Calendar
 *******************************/
 
-.ui.calendar .calendar:focus {
-  outline: 0;
+.ui.calendar .calendar:focus,
+.ui.calendar.popup:focus {
+    outline: 0;
 }
 
 /*******************************
             Grid
 *******************************/
 
-.ui.calendar .ui.popup .ui.grid {
-  display: block;
-  white-space: nowrap;
+.ui.calendar.popup .ui.grid {
+    display: block;
+    white-space: nowrap;
 }
 
-.ui.calendar .ui.popup .ui.grid > .column {
-  width: auto;
+.ui.calendar.popup .ui.grid > .column {
+    width: auto;
 }
 
 /*******************************
@@ -56,140 +60,140 @@
 .ui.calendar .ui.table.year,
 .ui.calendar .ui.table.month,
 .ui.calendar .ui.table.minute {
-  min-width: 15em;
+    min-width: 15em;
 }
 
 .ui.calendar .ui.table.day {
-  min-width: 18em;
+    min-width: 18em;
 }
 
 .ui.calendar .ui.table.day.andweek {
-  min-width: 22em;
+    min-width: 22em;
 }
 
 .ui.calendar .ui.table.hour {
-  min-width: 20em;
+    min-width: 20em;
 }
 
 .ui.calendar .ui.table tr th,
 .ui.calendar .ui.table tr td {
-  padding: 0.5em;
-  white-space: nowrap;
+    padding: 0.5em;
+    white-space: nowrap;
 }
 
 .ui.calendar .ui.table tr th {
-  border-left: none;
+    border-left: none;
 }
 
 .ui.calendar .ui.table tr th i.icon {
-  margin: 0;
+    margin: 0;
 }
 
 .ui.calendar .ui.table tr:first-child th {
-  position: relative;
-  padding-left: 0;
-  padding-right: 0;
+    position: relative;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .ui.calendar .ui.table.day tr:first-child th {
-  border: none;
+    border: none;
 }
 
 .ui.calendar .ui.table.day tr:nth-child(2) th {
-  padding-top: 0.2em;
-  padding-bottom: 0.3em;
+    padding-top: 0.2em;
+    padding-bottom: 0.3em;
 }
 
 .ui.calendar .ui.table tr td {
-  padding-left: 0.1em;
-  padding-right: 0.1em;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
 }
 
 .ui.calendar .ui.table tr .link {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .ui.calendar .ui.table tr .prev.link {
-  width: 14.28571429%;
-  position: absolute;
-  left: 0;
+    width: 14.28571429%;
+    position: absolute;
+    left: 0;
 }
 
 .ui.calendar .ui.table tr .next.link {
-  width: 14.28571429%;
-  position: absolute;
-  right: 0;
+    width: 14.28571429%;
+    position: absolute;
+    right: 0;
 }
 
 .ui.ui.calendar .ui.table tr .disabled {
-  pointer-events: auto;
-  cursor: default;
-  color: @disabledTextColor;
+    pointer-events: auto;
+    cursor: default;
+    color: @disabledTextColor;
 }
 
 .ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) {
-  color: @adjacentTextColor;
-  background: @adjacentBackground;
+    color: @adjacentTextColor;
+    background: @adjacentBackground;
 }
 
-/*--------------
+/* --------------
      States
----------------*/
+--------------- */
 
 .ui.calendar .ui.table tr td.today {
-  font-weight: @todayFontWeight;
+    font-weight: @todayFontWeight;
 }
 
 .ui.calendar .ui.table tr td.range {
-  background: @rangeBackground;
-  color: @rangeTextColor;
-  box-shadow: @rangeBoxShadow;
+    background: @rangeBackground;
+    color: @rangeTextColor;
+    box-shadow: @rangeBoxShadow;
 }
 
-.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
-  box-shadow: @focusBoxShadow;
+.ui.calendar:not(.disabled):focus .ui.table tbody tr td.focus,
+.ui.calendar:not(.disabled).popup.active .ui.table tbody tr td.focus {
+    box-shadow: @focusBoxShadow;
 }
 
 & when (@variationCalendarInverted) {
-  .ui.inverted.calendar .ui.table.inverted tr td.range {
-    background: @rangeInvertedBackground;
-    color: @rangeInvertedTextColor;
-    box-shadow: @rangeInvertedBoxShadow;
-  }
-
-  .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
-  .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
-    box-shadow: @focusInvertedBoxShadow;
-  }
-  .ui.inverted.calendar .ui.inverted.table tr .disabled {
-    color: @invertedDisabledTextColor;
-  }
-
-  .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) {
-    color: @adjacentInvertedTextColor;
-    background: @adjacentInvertedBackground;
-  }
+    .ui.inverted.calendar .ui.table.inverted tr td.range {
+        background: @rangeInvertedBackground;
+        color: @rangeInvertedTextColor;
+        box-shadow: @rangeInvertedBoxShadow;
+    }
+
+    .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+    .ui.inverted.calendar:not(.disabled).popup.active .ui.table.inverted tbody tr td.focus {
+        box-shadow: @focusInvertedBoxShadow;
+    }
+    .ui.inverted.calendar .ui.ui.ui.inverted.table tr .disabled {
+        color: @invertedDisabledTextColor;
+    }
+
+    .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) {
+        color: @adjacentInvertedTextColor;
+        background: @adjacentInvertedBackground;
+    }
 }
 
 & when (@variationCalendarMultiMonth) {
-  .ui.calendar.popup > .ui.ui.grid {
-    margin: @multiMonthMargin;
-    & > .column:not(:first-child) {
-      padding-left: @multiMonthPadding;
-      & > .ui.table {
-        border-top-left-radius:0;
-        border-bottom-left-radius:0;
-      }
-    }
-    & > .column:not(:last-child) {
-      padding-right:@multiMonthPadding;
-      & > .ui.table {
-        border-top-right-radius:0;
-        border-bottom-right-radius:0;
-      }
+    .ui.calendar.popup > .ui.ui.grid {
+        margin: @multiMonthMargin;
+        & > .column:not(:first-child) {
+            padding-left: @multiMonthPadding;
+            & > .ui.table {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+        & > .column:not(:last-child) {
+            padding-right: @multiMonthPadding;
+            & > .ui.table {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
     }
-  }
 }
 
 /*******************************
@@ -197,19 +201,18 @@
 *******************************/
 
 & when (@variationCalendarDisabled) {
-  /*--------------------
-          Disabled
-  ---------------------*/
+    /* --------------------
+            Disabled
+    --------------------- */
 
-  .ui.disabled.calendar {
-    opacity: @disabledOpacity;
-  }
+    .ui.disabled.calendar {
+        opacity: @disabledOpacity;
+    }
 
-  .ui.disabled.calendar > .input,
-  .ui.disabled.calendar .ui.table tr .link {
-    pointer-events: none;
-  }
+    .ui.disabled.calendar > .input,
+    .ui.disabled.calendar .ui.table tr .link {
+        pointer-events: none;
+    }
 }
 
-
 .loadUIOverrides();