change how css precedence is done

fullcalendar · May 29, 2020 · f699207 · f699207
1 parent f8ebeb3
commit f699207
Show file tree

Hide file tree

Showing 28 changed files with 937 additions and 850 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/bootstrap/src/main.css b/packages/bootstrap/src/main.css
@@ -1,42 +1,19 @@
 
-.fc.fc-theme-bootstrap a {
-  text-decoration: none;
-}
-
-.fc.fc-theme-bootstrap a[data-navlink]:hover {
-  text-decoration: underline;
-}
-
-.fc-theme-bootstrap .fc-day-today.alert {
-  border-radius: 0;
-}
-
-.fc-theme-bootstrap .table {
-  margin-bottom: 0;
-}
+.fc-theme-bootstrap {
+  // TODO: force event hovering on navlink!!
 
-.fc-theme-bootstrap .fc-popover.card {
-  position: absolute; // because .card sets it to position:relative
-}
-
-.fc .fc-bootstrap-bordered {
-  background: transparent; // some themes provide background. undo
-  border-radius: 0; // some themes provide border-radius. undo
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-theme-bootstrap .fc-popover .card-body {
-  padding: 0; // undo built-in padding
-}
+  & .table {
+    margin-bottom: 0;
+  }
 
+  & .fc-timegrid-slots table {
+    /* some themes have background color. see through to cols */
+    background: none;
+  }
 
-/* TimeGrid Slots (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
+  & .fc-bootstrap-bordered { // we provide this alongside "card card-primary"
+    background: transparent; // some themes provide background. undo
+    border-radius: 0; // some themes provide border-radius. undo
+  }
 
-.fc-theme-bootstrap .fc-timegrid-slots table {
-  /* some themes have background color. see through to slats */
-  background: none;
 }
diff --git a/packages/common/src/styles/bg.css b/packages/common/src/styles/bg.css
@@ -1,46 +1,50 @@
 
-.fc-bg-event,
-.fc-non-business,
-.fc-highlight {
-  // will always have a harness with position:relative/absolute, so absolutely expand
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  opacity: .3;
-}
+.fc {
 
+  & .fc-bg-event,
+  & .fc-non-business,
+  & .fc-highlight {
+    // will always have a harness with position:relative/absolute, so absolutely expand
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
 
-.fc-non-business {
-  background: #d7d7d7;
-}
+    opacity: .3;
+  }
 
-.fc-bg-event {
-  background: rgb(143, 223, 130);
-}
 
-.fc-highlight {
-  background: #bce8f1;
-}
+  & .fc-non-business {
+    background: #d7d7d7;
+  }
 
+  & .fc-bg-event {
+    background: rgb(143, 223, 130);
+  }
 
-.fc-bg-event .fc-event-title {
-  margin: .5em;
-  font-size: .85em;
-  font-style: italic;
-}
+  & .fc-highlight {
+    background: #bce8f1;
+  }
 
 
-// today <td>
-// DIFFERENT SYSTEM, not within a shared container
+  & .fc-bg-event .fc-event-title {
+    margin: .5em;
+    font-size: .85em;
+    font-style: italic;
+  }
 
-// for all themes. bootstrap didn't provide a good semi-transparent color for this
-.fc-day-today {
-  background: rgba(255, 220, 40, 0.15);
-}
 
-.fc-day-disabled {
-  background: #f2f2f2; // TODO: let theme style
+  // today <td>
+  // DIFFERENT SYSTEM, not within a shared container
+
+  // for all themes. bootstrap didn't provide a good semi-transparent color for this
+  & .fc-day-today {
+    background: rgba(255, 220, 40, 0.15);
+  }
+
+  & .fc-day-disabled {
+    background: #f2f2f2; // TODO: let theme style
+  }
+
 }
diff --git a/packages/common/src/styles/button-group.css b/packages/common/src/styles/button-group.css
@@ -1,38 +1,42 @@
 
-.fc-button-group {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: middle;
-}
+.fc {
+
+  & .fc-button-group {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+  }
 
-.fc-button-group > .fc-button {
-  position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-}
+  & .fc-button-group > .fc-button {
+    position: relative;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+  }
 
-.fc-button-group > .fc-button:hover {
-  z-index: 1;
-}
+  & .fc-button-group > .fc-button:hover {
+    z-index: 1;
+  }
+
+  & .fc-button-group > .fc-button:focus,
+  & .fc-button-group > .fc-button:active,
+  & .fc-button-group > .fc-button.fc-button-active {
+    z-index: 1;
+  }
 
-.fc-button-group > .fc-button:focus,
-.fc-button-group > .fc-button:active,
-.fc-button-group > .fc-button.fc-button-active {
-  z-index: 1;
 }
 
 .fc-direction-ltr {
 
-  .fc-button-group > .fc-button:not(:first-child) {
+  & .fc-button-group > .fc-button:not(:first-child) {
     margin-left: -1px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .fc-button-group > .fc-button:not(:last-child) {
+  & .fc-button-group > .fc-button:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -41,13 +45,13 @@
 
 .fc-direction-rtl {
 
-  .fc-button-group > .fc-button:not(:first-child) {
+  & .fc-button-group > .fc-button:not(:first-child) {
     margin-right: -1px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .fc-button-group > .fc-button:not(:last-child) {
+  & .fc-button-group > .fc-button:not(:last-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }