feat(plex): implementa nuevo selector de años

andes · Jul 28, 2023 · b226dfd · b226dfd
1 parent f2bab26
commit b226dfd
Show file tree

Hide file tree

Showing 4 changed files with 1,350 additions and 999 deletions.
diff --git a/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss b/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss
@@ -25,16 +25,15 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   user-select: none;
 }
 
-.dtp > .dtp-content {
+.dtp>.dtp-content {
   background: #fff;
   max-width: 300px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  max-height: 555px;
   position: relative;
   left: 50%;
 }
 
-.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
+.dtp>.dtp-content>.dtp-date-view>header.dtp-header {
   background: $blue;
   color: #fff;
   text-align: center;
@@ -49,7 +48,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   padding: 10px;
 }
 
-.dtp div.dtp-date > div {
+.dtp div.dtp-date>div {
   padding: 0;
   margin: 0;
 }
@@ -71,6 +70,56 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
 .dtp div.dtp-actual-year {
   font-size: 1.5em;
   color: #fff;
+  cursor: pointer;
+  width: 40%;
+  margin-top: 10px;
+  border: 1px solid white;
+
+  .adi {
+    position: relative;
+    float: right;
+    margin-left: -50%;
+  }
+}
+
+.dtp div.dtp-year-before,
+.dtp div.dtp-year-after {
+  margin-top: 10px;
+}
+
+.dtp-select-year-after {
+  margin-top: 10px;
+}
+
+.dtp-select-year-range {
+  background-color: #bdbdbd;
+  border: none;
+
+  &.before {
+    margin-bottom: 10px;
+  }
+  &.after {
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+
+  &:hover, &:focus {
+    color: #ffffff;
+  }
+}
+
+.year-picker-item {
+  font-weight: 700;
+  cursor: pointer;
+  margin-bottom: 5px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:hover, &:focus {
+    color: #00a8e0;
+  }
 }
 
 .dtp div.dtp-picker {
@@ -86,7 +135,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
 
 .dtp div.dtp-picker-month {
   padding-bottom: 20px !important;
-  text-transform: uppercase!important;
+  text-transform: uppercase !important;
 }
 
 .dtp .dtp-close {
@@ -95,11 +144,11 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   right: 1em;
 }
 
-.dtp .dtp-close > a {
+.dtp .dtp-close>a {
   color: #fff;
 }
 
-.dtp .dtp-close > a > i {
+.dtp .dtp-close>a>i {
   font-size: 1em;
 }
 
@@ -110,24 +159,24 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
 
 .dtp table.dtp-picker-days,
 .dtp table.dtp-picker-days tr,
-.dtp table.dtp-picker-days tr > td {
+.dtp table.dtp-picker-days tr>td {
   border: none;
 }
 
-.dtp table.dtp-picker-days tr > td {
+.dtp table.dtp-picker-days tr>td {
   font-weight: 700;
   font-size: .8em;
   text-align: center;
   padding: .5em .3em;
 }
 
-.dtp table.dtp-picker-days tr > td > span.dtp-select-day {
-  color: #BDBDBD!important;
+.dtp table.dtp-picker-days tr>td>span.dtp-select-day {
+  color: #BDBDBD !important;
   padding: .4em .5em .5em .6em;
 }
 
-.dtp .dtp-picker-time > a,
-.dtp table.dtp-picker-days tr > td > a {
+.dtp .dtp-picker-time>a,
+.dtp table.dtp-picker-days tr>td>a {
   color: #212121;
   text-decoration: none;
   padding: 0.3em 0.5em;
@@ -136,26 +185,27 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   margin-top: 5px;
 }
 
-.dtp table.dtp-picker-days tr > td > a.selected {
+.dtp table.dtp-picker-days tr>td>a.selected {
   background: $teal;
   color: #fff;
 }
 
-.dtp table.dtp-picker-days tr > th {
+.dtp table.dtp-picker-days tr>th {
   color: #757575;
   text-align: center;
   font-weight: 700;
   padding: .4em .3em;
 }
 
-.dtp .p10 > a {
+.dtp .p10>a {
   color: $white;
   text-decoration: none;
 }
 
 .dtp .p10 {
   width: 10%;
   display: inline-block;
+  padding: 5px;
 }
 
 .dtp .p20 {
@@ -180,7 +230,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   color: #212121;
   font-weight: 500;
   padding: .7em .5em;
-  border-radius: 50%!important;
+  border-radius: 50% !important;
   text-decoration: none;
   background: #eee;
   font-size: 1em;
@@ -191,11 +241,11 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
   color: #fff;
 }
 
-.dtp .dtp-picker-time > .dtp-select-hour {
+.dtp .dtp-picker-time>.dtp-select-hour {
   cursor: pointer;
 }
 
-.dtp .dtp-picker-time > .dtp-select-minute {
+.dtp .dtp-picker-time>.dtp-select-minute {
   cursor: pointer;
 }
 
@@ -227,4 +277,4 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke
 
 .dtp .center {
   text-align: center;
-}
+}